學(xué)做Bootstrap的第一個(gè)頁面
更新時(shí)間：2016年05月15日 15:09:36 作者：竹焮
這篇文章主要為大家介紹了學(xué)做Bootstrap的第一個(gè)頁面，這是學(xué)bootstrap的第一個(gè)頁面，還有許多需要改進(jìn)的地方，希望大家批評指正
本文實(shí)例分享了第一個(gè)Bootstrap頁面的實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
效果圖：
實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /><!--為了確保適當(dāng)?shù)睦L制和觸屏縮放，需要在 <head> 之中添加 viewport 元數(shù)據(jù)標(biāo)簽。-->
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script src="js/bootstrap.min.js"></script>
<style>
.masthead{
padding: 110px 0px 110px;
margin-bottom: 0px;
}
.masthead:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(img/bg1.png) repeat center center;
opacity: 0.4;
}
.masthead h1{
font-weight: 700;
font-size: 700%;
}
.active{font-size: 120%;font-weight: bold;}
.masthead-a{
opacity: 0.5;
color: white;
font-size: medium;
}
.masthead-a:hover{
color: white;
opacity: 1;
}
.modal-header li i{opacity: 0.5;}
.text-align{
display: inline;
}
.img-ls{
width: 23%;
border: 1px solid hsl(0, 0%, 87%);
margin-right: 2%;
padding: 4px 0px;
margin-bottom: 6%;
min-height: 350px;
max-height: 600px;
float: left;
}
.img-ls img{
width: 97%;
height: auto;
}
.img-ls img:hover{
cursor: pointer;
}
.footer{
padding: 50px 50px;
}
.navbar-nav li{display: inline;}
</style>
</head>
<body>
<div class="navbar-inverse navbar-fixed-top">
<!-- 定義個(gè)內(nèi)部框架表現(xiàn)的基調(diào),位置大小背景等 -->
<div class="container">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav"><li><a href="#" class="active">Bootstrap中文網(wǎng)</a></li></ul>
<div class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="#">Bootstrap2中文文檔</a></li>
<li><a href="#">Bootstrap3中文文檔</a></li>
<li><a href="#">Bootstrap 4.0 預(yù)覽</a></li>
<li><a href="#">Less 教程</a></li>
<li><a href="#">jQuery API</a></li>
<li><a href="#">網(wǎng)站實(shí)例</a></li>
<li><a href="#">前端高薪職位</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</div>
</div>
</div>
<div class="jumbotron masthead">
<div class="container">
<h1>Bootstrap</h1>
<h2>簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡單。</h2>
<p><a class="btn btn-lg btn-primary" href="#">Bootstrap3中文文檔(v3.3.5)</a></p>
<p><a href="#" class="masthead-a">Bootstrap2中文文檔(v2.3.2)</a></p>
</div>
</div>
<div class="modal-header text-center">
<div class="container">
<ul>
<li class="text-align">Bootstrap技術(shù)交流群：318630708 <i>|</i> </li>
<li class="text-align">Bootstrap問答社區(qū) <i>|</i> </li>
<li class="text-align">新浪微博：@Bootstrap中文網(wǎng)</li>
</ul>
</div>
</div>
<div class="modal-header">
<div class="container">
<div class="page-header text-center">
<h2>Bootstrap相關(guān)優(yōu)質(zhì)項(xiàng)目推薦</h2>
<p>這些項(xiàng)目或者是對Bootstrap進(jìn)行了有益的補(bǔ)充，或者是基于Bootstrap開發(fā)的</p>
</div>
<div class="img-ls col-lg-3 text-center">
<img src="img/codeguide.png" />
<h3>
<a href="javascript:void(0)" class="btn btn-lg">Bootstrap 編碼規(guī)范<br/><small>by @mdo</small></a>
</h3>
<p class="modal-body">
Bootstrap 編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的 HTML 和 CSS 代碼的規(guī)范。
</p>
</div>
<div class="img-ls col-lg-3 text-center">
<img src="img/jqueryapi.png" />
<h3>
<a href="javascript:void(0)" class="btn btn-lg">jQuery API <br/><small>中文手冊</small></a>
</h3>
<p class="modal-body">
根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊。
</p>
</div>
<div class="img-ls col-lg-3 text-center">
<img src="img/w3schools.png" />
<h3>
<a href="javascript:void(0)" class="btn btn-lg">w3schools<br/><small>原版國內(nèi)鏡像</small></a>
</h3>
<p class="modal-body">
w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！
</p>
</div>
<div class="img-ls col-lg-3 text-center">
<img src="img/expo.png"/>
<h3>
<a href="javascript:void(0)" class="btn btn-lg">優(yōu)站精選<br/><small>Bootstrap網(wǎng)站實(shí)例</small></a>
</h3>
<p class="modal-body">
Bootstrap優(yōu)站精選頻道收集了眾多基于 Bootstrap 構(gòu)建、設(shè)計(jì)精美的、有創(chuàng)意的網(wǎng)站。
</p>
</div>
</div>
</div>
<footer class="footer">
<div class="container modal-header">
<div class="col-lg-6">
<img src="img/logo.png" />
<h5>
<p>本網(wǎng)站所列開源項(xiàng)目的中文版文檔全部由<a href="javascript:void(0)"><small>Bootstrap中文網(wǎng)</small></a>成員翻譯整理，并全部遵循 <a href="javascript:void(0)"><small>CC BY 3.0</small></a>協(xié)議發(fā)布。</p>
</h5>
</div>
<div class="col-lg-6">
<div class="col-xs-3">
<h4>關(guān)于</h4>
<h4>
<ul class="list-unstyled">
<li><a href="javascript:void(0)"><small>關(guān)于我們</small></a></li>
<li><a href="javascript:void(0)"><small>廣告合作</small></a></li>
<li><a href="javascript:void(0)"><small>友情鏈接</small></a></li>
<li><a href="javascript:void(0)"><small>招聘</small></a></li>
</ul>
</h4>
</div>
<div class="col-xs-3">
<h4>聯(lián)系方式</h4>
<h4>
<ul class="list-unstyled">
<li><a href="javascript:void(0)"><small>新浪微博</small></a></li>
<li><a href="javascript:void(0)"><small>電子郵件</small></a></li>
</ul>
</h4>
</div>
<div class="col-xs-3">
<h4>旗下網(wǎng)站</h4>
<h4>
<ul class="list-unstyled">
<li><a href="javascript:void(0)"><small>Laravel中文網(wǎng)</small></a></li>
<li><a href="javascript:void(0)"><small>Ghost中國</small></a></li>
</ul>
</h4>
</div>
<div class="col-xs-3">
<h4>贊助商</h4>
<h4>
<ul class="list-unstyled">
<li><a href="javascript:void(0)"><small>UCloud</small></a></li>
<li><a href="javascript:void(0)"><small>又拍云</small></a></li>
</ul>
</h4>
</div>
</div>
</div>
<h4 class="text-center "><a href="javascript:void(0)"><small>京ICP備11008151號</small></a><small> | 京公網(wǎng)安備11010802014853</small></h4>
</footer>
</body>
</html>
相信大家一定還沒過癮吧，下面再為大家分享幾篇文章：
《值得分享和收藏的Bootstrap學(xué)習(xí)教程》 《Bootstrap學(xué)習(xí)教程》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于js數(shù)組去重九種方式以及詳解的相關(guān)資料,js數(shù)組去重是比較常見的數(shù)組操作方式之一,文中介紹了九種方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了一些老手都不一定知道的JavaScript技巧,需要的朋友可以參考下2014-05-05
通過Jscript中@cc_on 語句識(shí)別IE瀏覽器及版本的代碼
通過Jscript中@cc_on 語句識(shí)別IE瀏覽器及版本的代碼，需要的朋友可以參考下。2011-05-05
用于CSS代碼壓縮與格式化的javascript函數(shù)代碼
呵呵，發(fā)現(xiàn)只要幾行ＪＳ代碼就可實(shí)現(xiàn)css的壓縮與格式化，非常不錯(cuò)。2009-12-12
一個(gè)加載js文件的小腳本...2007-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義底部導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
下面小編就為大家?guī)硪黄狫S獲取字符對應(yīng)的ASCII碼實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就想給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
antd項(xiàng)目實(shí)現(xiàn)彩蛋效果的詳細(xì)代碼
這篇文章主要介紹了antd項(xiàng)目如何實(shí)現(xiàn)彩蛋效果,首先在components目錄下創(chuàng)建Transform目錄，包括index.css、index.js，index.js是主要的邏輯代碼，下面對代碼進(jìn)行分析，需要的朋友可以參考下2022-09-09
javascript 將共享屬性遷移到原型中去的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨avascript 將共享屬性遷移到原型中去的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了詳細(xì)討論JavaScript中的求值策略，對求值策略感興趣的同學(xué)，可以參考下2021-04-04