Bootstrap編寫一個兼容主流瀏覽器的受眾巨幕式風格頁面
更新時間：2016年07月01日 10:07:29 作者：yongh701
這篇文章主要介紹了Bootstrap編寫一個兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風格頁面，感興趣的小伙伴們可以參考一下
雖然說IE6除了部分要求苛刻的需求以外已經(jīng)被可以不考慮了，但是WIN7自帶的瀏覽器IE8還是需要支持的。
本文這個方法主要的優(yōu)點，個人覺得就是準備少，不需要上網(wǎng)尋找大量的圖片做素材，你只要準備好一個bootstrap、jquery與photoshop就可以了，bootstrap與jquery怎么配置，可以參考《Bootstrap編寫一個在當前網(wǎng)頁彈出可關閉的對話框 非彈窗》（點擊打開鏈接）
被要求編寫一個網(wǎng)站，常常會被如何布局困擾，其實也不難，如果能夠熟練使用Bootstrap，并且有一套特定的方法，那么應對普通的需求還是能夠快速輕松地交功課的。
雖然網(wǎng)上的頁面模板一搜一大段，但是能夠庖丁解牛地了解這些頁面模板的創(chuàng)造過程才是關鍵。
一旦下載這些模板與瀏覽器不兼容，又不會修改，那就麻煩大了。
一、基本目標
使用BootstrapV3來創(chuàng)造如下的頁面：
主頁如上所示，首先掛在頁頭是這個網(wǎng)站的導航，分別為left,middle,right三個按鈕與下拉菜單dropdown。這里的實質是一個按鈕組，不能使用Bootstrap提供的導航欄組件，因為這個導航欄組件不兼容IE8，具體見：《解決bootstrap導航欄navbar在IE8上存在缺陷的方法》一文（點擊打開鏈接）
之后，在巨幕之下，還有三個專欄，與相應的兩個按鈕，這里可以放置網(wǎng)站上最重要的幾個部分，最后按照慣例是版權信息。
而內(nèi)頁則如下所示：
同樣是置頂?shù)膶Ш綏l，然后是這個內(nèi)頁的標題與內(nèi)容。內(nèi)頁的標題實質上還是一個巨幕，只是比主頁的尺寸少而已。
接下來是還是版權信息。
二、制作過程
1.首先打開photoshop，新建一個1024x1的圖像，寬度隨意，盡量寬就可以了，圖像是1就可以了，前景色為深綠色R:0 G:140 B:0，背景色為淺綠色R:100 G:200 B:100，用漸變工具拉出如下的圖像，怎么拉都可以向左往右拉可以，向中間往兩邊也可以，看個人喜好：
這是我們需要準備的唯一一個圖像，可以把photoshop關閉，拋在一邊，把這個圖像保存在網(wǎng)站工程文件夾，這個圖像才6k左右，根本不影響加載。
2、主頁
具體代碼如下，然后一段一段代碼說明：
<!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>無標題文檔</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)站編碼，標題，自適應屏幕等-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</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樣式，用來解決win7系統(tǒng)下，微軟雅黑字體無法正常顯示，而顯示宋體的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）導航欄
由于bootstrap提供的導航欄不適用，我們只好用bootstrap提供的按鈕組來自己寫導航欄
<!--首先導航欄必必須掛在網(wǎng)頁頭--> <div style="position: absoulted; top: 0; left: 0; width: 100%;"> <!--定義一個按鈕組--> <div class="btn-group btn-group-justified"> <div class="btn-group"> <!--導航欄中單個按鈕，也就是沒有下拉菜單的按鈕的超級鏈接寫作方式需要注意，是使用a標簽，然后加上class樣式的，而不是官網(wǎng)提供的button標簽--> <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等能夠改變這個按鈕的顏色哦！
（3）巨幕部分
巨幕的寫法如下，關鍵是引入我們剛才用photoshop畫出來的背景
這里之所以要加這么多<br>回車是因為要拉大這個巨幕的尺寸
<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）專欄部分
這里運用到bootstrap的柵格組織，進行對三個專欄的排版
具體可以參考Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)一文，把整個網(wǎng)頁的12格分成3份，每份4格就剛剛好了 ，而每個專欄就是一個沒有面板頭的面板，里面一個h3的大標題，然后p的一個段落文本，再兩個按鈕。
值得注意的是，這些東西必須放到一個容器以內(nèi)，不然這三個東西會占滿整個頁面：
<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）版權信息部分
沒什么好說的，就是一個面板
<div class="panel panel-default"> <div class="panel-body" style="text-align: center"> Copyright information </div> </div>
3、內(nèi)頁
會做主頁，那么內(nèi)頁的思想也就完全相同了，不再贅述，同理，代碼如下：
<!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>無標題文檔</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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS常用加密編碼與算法,結合實例形式總結分析了javascript常見的utf8、base64編碼及md5、md4、SHA1等算法實現(xiàn)方法,需要的朋友可以參考下2016-12-12
js樹插件zTree獲取所有選中節(jié)點數(shù)據(jù)的方法
這篇文章主要介紹了js樹插件zTree獲取所有選中節(jié)點數(shù)據(jù)的方法,是對js樹插件zTree非常實用的操作,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了原生javascript實現(xiàn)百葉窗效果的方法及原理介紹，感興趣的小伙伴們可以參考一下2016-04-04
今天小編就為大家分享一篇layui加載表格,綁定新增,編輯刪除,查看按鈕事件的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
很多人可能遇到這樣的問題，JS調試，而且都很郁悶，雖然我的JS學的不是那么透徹，基本上算是初級入門.2010-04-04
用javascript獲得地址欄參數(shù)的兩種方法...2006-11-11
在js中將中文用gb2312編碼。如，“我”編碼后應該是“%CE%D2”。2009-12-12
IOS中safari下的select下拉菜單文字過長不換行的解決方法
今天在項目開發(fā)中遇到一個問題safari下的select下拉菜單文字過長不換行問題，最終我用<optgroup>標簽解決此問題，下面小編把實現(xiàn)思路分享給大家供大家參考2016-09-09
這篇文章主要介紹了js中如何往對象中添加屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
button的id不要設置為submit,否則可能會引起混淆，導致表單的submit()方法不能提交表單2014-10-10