Bootstrap編寫一個(gè)兼容主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面
雖然說(shuō)IE6除了部分要求苛刻的需求以外已經(jīng)被可以不考慮了，但是WIN7自帶的瀏覽器IE8還是需要支持的。
本文這個(gè)方法主要的優(yōu)點(diǎn)，個(gè)人覺(jué)得就是準(zhǔn)備少，不需要上網(wǎng)尋找大量的圖片做素材，你只要準(zhǔn)備好一個(gè)bootstrap、jquery與photoshop就可以了，bootstrap與jquery怎么配置，可以參考《Bootstrap編寫一個(gè)在當(dāng)前網(wǎng)頁(yè)彈出可關(guān)閉的對(duì)話框 非彈窗》（點(diǎn)擊打開(kāi)鏈接）
被要求編寫一個(gè)網(wǎng)站，常常會(huì)被如何布局困擾，其實(shí)也不難，如果能夠熟練使用Bootstrap，并且有一套特定的方法，那么應(yīng)對(duì)普通的需求還是能夠快速輕松地交功課的。
雖然網(wǎng)上的頁(yè)面模板一搜一大段，但是能夠庖丁解牛地了解這些頁(yè)面模板的創(chuàng)造過(guò)程才是關(guān)鍵。
一旦下載這些模板與瀏覽器不兼容，又不會(huì)修改，那就麻煩大了。
一、基本目標(biāo)
使用BootstrapV3來(lái)創(chuàng)造如下的頁(yè)面：
主頁(yè)如上所示，首先掛在頁(yè)頭是這個(gè)網(wǎng)站的導(dǎo)航，分別為left,middle,right三個(gè)按鈕與下拉菜單dropdown。這里的實(shí)質(zhì)是一個(gè)按鈕組，不能使用Bootstrap提供的導(dǎo)航欄組件，因?yàn)檫@個(gè)導(dǎo)航欄組件不兼容IE8，具體見(jiàn)：《解決bootstrap導(dǎo)航欄navbar在IE8上存在缺陷的方法》一文（點(diǎn)擊打開(kāi)鏈接）
之后，在巨幕之下，還有三個(gè)專欄，與相應(yīng)的兩個(gè)按鈕，這里可以放置網(wǎng)站上最重要的幾個(gè)部分，最后按照慣例是版權(quán)信息。
而內(nèi)頁(yè)則如下所示：
同樣是置頂?shù)膶?dǎo)航條，然后是這個(gè)內(nèi)頁(yè)的標(biāo)題與內(nèi)容。內(nèi)頁(yè)的標(biāo)題實(shí)質(zhì)上還是一個(gè)巨幕，只是比主頁(yè)的尺寸少而已。
接下來(lái)是還是版權(quán)信息。
二、制作過(guò)程
1.首先打開(kāi)photoshop，新建一個(gè)1024x1的圖像，寬度隨意，盡量寬就可以了，圖像是1就可以了，前景色為深綠色R:0 G:140 B:0，背景色為淺綠色R:100 G:200 B:100，用漸變工具拉出如下的圖像，怎么拉都可以向左往右拉可以，向中間往兩邊也可以，看個(gè)人喜好：
這是我們需要準(zhǔn)備的唯一一個(gè)圖像，可以把photoshop關(guān)閉，拋在一邊，把這個(gè)圖像保存在網(wǎng)站工程文件夾，這個(gè)圖像才6k左右，根本不影響加載。
2、主頁(yè)
具體代碼如下，然后一段一段代碼說(shuō)明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
h1,h2,h3,h4,h5 {
font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue",
Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3",
"WenQuanYi Micro Hei", sans-serif;
}
</style>
</head>
<body>
<div style="position: absoulted; top: 0; left: 0; width: 100%;">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-success">
Left
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">
Middle
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">
Right
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">Dropdown link</a>
</li>
<li>
<a href="#">Dropdown link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="jumbotron masthead"
style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center">
<br />
<br />
<br />
<br />
<br />
<h1>
<font color="#ffffff">Banner : the Main headline</font>
</h1>
<h2>
<font color="#ffffff">Sub-heading</font>
</h2>
<br />
<br />
<br />
<br />
<br />
</div>
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 ">
<div class="panel panel-default">
<div class="panel-body">
<h3>
Column1
</h3>
<p>
...
</p>
<p>
<a href="#" class="btn btn-success" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<h3>
Column2
</h3>
<p>
...
</p>
<p>
<a href="#" class="btn btn-success" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<h3>
Column2
</h3>
<p>
...
</p>
<p>
<a href="#" class="btn btn-success" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body" style="text-align: center">
Copyright information
</div>
</div>
</div>
</body>
</html>
（1）<head>部分
<head>
<!--網(wǎng)站編碼，標(biāo)題，自適應(yīng)屏幕等-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!--需要使用的js與css樣式-->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--這是唯一需要我們自己定義的css樣式，用來(lái)解決win7系統(tǒng)下，微軟雅黑字體無(wú)法正常顯示，而顯示宋體的bug-->
<style type="text/css">
h1,h2,h3,h4,h5 {
font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue",
Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3",
"WenQuanYi Micro Hei", sans-serif;
}
</style>
</head>
（2）導(dǎo)航欄
由于bootstrap提供的導(dǎo)航欄不適用，我們只好用bootstrap提供的按鈕組來(lái)自己寫導(dǎo)航欄
<!--首先導(dǎo)航欄必必須掛在網(wǎng)頁(yè)頭--> <div style="position: absoulted; top: 0; left: 0; width: 100%;"> <!--定義一個(gè)按鈕組--> <div class="btn-group btn-group-justified"> <div class="btn-group"> <!--導(dǎo)航欄中單個(gè)按鈕，也就是沒(méi)有下拉菜單的按鈕的超級(jí)鏈接寫作方式需要注意，是使用a標(biāo)簽，然后加上class樣式的，而不是官網(wǎng)提供的button標(biāo)簽--> <a href="#" class="btn btn-success"> Left </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> Middle </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> Right </a> </div> <!--下拉菜單的寫法如下：--> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div>
改變class屬性中btn-success變成btn-primary，btn-danger等能夠改變這個(gè)按鈕的顏色哦！
（3）巨幕部分
巨幕的寫法如下，關(guān)鍵是引入我們剛才用photoshop畫出來(lái)的背景
這里之所以要加這么多<br>回車是因?yàn)橐筮@個(gè)巨幕的尺寸
<div class="jumbotron masthead" style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center"> <br /> <br /> <br /> <br /> <br /> <h1> <font color="#ffffff">Banner : the Main headline</font> </h1> <h2> <font color="#ffffff">Sub-heading</font> </h2> <br /> <br /> <br /> <br /> <br /> </div>
（4）專欄部分
這里運(yùn)用到bootstrap的柵格組織，進(jìn)行對(duì)三個(gè)專欄的排版
具體可以參考Bootstrap自動(dòng)適應(yīng)PC、平板、手機(jī)的Bootstrap柵格系統(tǒng)一文，把整個(gè)網(wǎng)頁(yè)的12格分成3份，每份4格就剛剛好了 ，而每個(gè)專欄就是一個(gè)沒(méi)有面板頭的面板，里面一個(gè)h3的大標(biāo)題，然后p的一個(gè)段落文本，再兩個(gè)按鈕。
值得注意的是，這些東西必須放到一個(gè)容器以內(nèi)，不然這三個(gè)東西會(huì)占滿整個(gè)頁(yè)面：
<div class="container"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 "> <div class="panel panel-default"> <div class="panel-body"> <h3> Column1 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> </div>
（5）版權(quán)信息部分
沒(méi)什么好說(shuō)的，就是一個(gè)面板
<div class="panel panel-default"> <div class="panel-body" style="text-align: center"> Copyright information </div> </div>
3、內(nèi)頁(yè)
會(huì)做主頁(yè)，那么內(nèi)頁(yè)的思想也就完全相同了，不再贅述，同理，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
h1,h2,h3,h4,h5 {
font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue",
Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3",
"WenQuanYi Micro Hei", sans-serif;
}
</style>
</head>
<body>
<div style="position: absoulted; top: 0; left: 0; width: 100%;">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<a href="#" class="btn btn-success">
Left
</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-success">
Middle
</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-success">
Right
</a>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">Dropdown link</a>
</li>
<li>
<a href="#">Dropdown link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="jumbotron masthead"
style="background-image: url(images/bg.jpg); background-repeat: repeat;">
<h1>
<font color="#ffffff">Title</font>
</h1>
</div>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">
Content
</div>
</div>
<div class="panel panel-default">
<div class="panel-body" style="text-align: center">
Copyright information
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
只有msg是必須的，后面的參數(shù)可以省略。如果中間的參數(shù)為空則在對(duì)應(yīng)位置上''或者""表示（根據(jù)實(shí)際情況選擇單雙引號(hào)） 調(diào)用此方法須在每個(gè)使用的頁(yè)面的head區(qū)域加入下面代碼。2009-11-11
用JavaScript對(duì)JSON進(jìn)行模式匹配(Part 1-設(shè)計(jì))
在《從 if else 到 switch case 再到抽象》這篇文章里面說(shuō)到，解決 if else 和 switch case 分支過(guò)多的一個(gè)方法，就是做一個(gè)專用的 dispatcher ，讓它來(lái)負(fù)責(zé)進(jìn)行篩選與轉(zhuǎn)發(fā)。2010-07-07
在面試過(guò)程中經(jīng)常被面試官問(wèn)到這樣的題目：如何判斷數(shù)組？下面小編就針對(duì)這個(gè)問(wèn)題給大家收集整理了份資料，感興趣的朋友一起看看吧2017-10-10
本篇文章主要介紹了js中幾種實(shí)用的跨域方法原理詳解 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。2016-12-12
這篇文章主要給大家介紹了關(guān)于JS拆箱轉(zhuǎn)換的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
用JS寫一段判斷搜索引擎來(lái)路并且屏蔽PC的跳轉(zhuǎn)代碼
以下是用JS寫的判斷搜索引擎來(lái)路并屏蔽PC跳轉(zhuǎn)的代碼,需要的朋友可以參考下2023-12-12
控件cloneNode（）方法的使用 實(shí)例代碼。2009-07-07
JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能,結(jié)合實(shí)例形式分析了JS字符串、數(shù)組及正則操作相關(guān)技巧,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了使用cypress編寫第一個(gè)測(cè)試用例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
javascript算法解數(shù)獨(dú)實(shí)現(xiàn)方案示例
這篇文章主要為大家介紹了javascript算法解數(shù)獨(dú)實(shí)現(xiàn)方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08