2. 程式人生 > >【Bootstrap】一個相容IE8、谷歌等主流瀏覽器的受眾巨幕式風格頁面

【Bootstrap】一個相容IE8、谷歌等主流瀏覽器的受眾巨幕式風格頁面

阿新 • • 發佈：2019-01-23

雖然說IE6除了部分要求苛刻的需求以外已經被可以不考慮了，但是WIN7自帶的瀏覽器IE8還是需要支援的。

本文這個方法主要的優點，個人覺得就是準備少，不需要上網尋找大量的圖片做素材，你只要準備好一個bootstrap、jquery與photoshop就可以了，bootstrap與jquery怎麼配置，可以參考《【Bootstrap】一個在當前網頁彈出的對話方塊，可以關閉，不用跳轉，非彈窗》（點選開啟連結）

被要求編寫一個網站，常常會被如何佈局困擾，

其實也不難，如果能夠熟練使用Bootstrap，並且有一套特定的方法，

那麼應對普通的需求還是能夠快速輕鬆地交功課的。

雖然網上的頁面模板一搜一大段，但是能夠庖丁解牛地瞭解這些頁面模板的創造過程才是關鍵。

一旦下載這些模板與瀏覽器不相容，又不會修改，那就麻煩大了。

一、基本目標

使用BootstrapV3來創造如下的頁面：


主頁如上所示，首先掛在頁頭是這個網站的導航，分別為left,middle,right三個按鈕與下拉選單dropdown。這裡的實質是一個按鈕組，不能使用Bootstrap提供的導航欄元件，因為這個導航欄元件不相容IE8，具體見：《【Bootstrap】導航欄navbar在IE8上的缺陷與解決方案》一文（點選開啟連結）

之後，在巨幕之下，還有三個專欄，與相應的兩個按鈕，

這裡可以放置網站上最重要的幾個部分，

最後按照慣例是版權資訊。

而內頁則如下所示：


同樣是置頂的導航條，

然後是這個內頁的標題與內容。內頁的標題實質上還是一個巨幕，只是比主頁的尺寸少而已。

接下來是還是版權資訊。

二、製作過程

1.首先開啟photoshop，新建一個1024x1的影象，寬度隨意，儘量寬就可以了，影象是1就可以了，前景色為深綠色R:0 G:140 B:0，背景色為淺綠色R:100 G:200 B:100，用漸變工具拉出如下的影象，怎麼拉都可以向左往右拉可以，向中間往兩邊也可以，看個人喜好：


這是我們需要準備的唯一一個影象，可以把photoshop關閉，拋在一邊，把這個影象儲存在網站工程資料夾，

這個影象才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>
    	<!--網站編碼，標題，自適應螢幕等-->
		<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系統下，微軟雅黑字型無法正常顯示，而顯示宋體的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提供的按鈕組來自己寫導航欄

<!--首先導航欄必必須掛在網頁頭-->
		<div style="position: absoulted; top: 0; left: 0; width: 100%;">
        	<!--定義一個按鈕組-->
			<div class="btn-group btn-group-justified">
				<div class="btn-group">
                <!--導航欄中單個按鈕，也就是沒有下拉選單的按鈕的超級連結寫作方式需要注意，是使用a標籤，然後加上class樣式的，而不是官網提供的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柵格系統》（點選開啟連結）一文，

把整個網頁的12格分成3份，每份4格就剛剛好了

而每個專欄就是一個沒有面板頭的面板，裡面一個h3的大標題，然後p的一個段落文字，再兩個按鈕

值得注意的是，這些東西必須放到一個容器以內，不然這三個東西會佔滿整個頁面：

<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、內頁

會做主頁，那麼內頁的思想也就完全相同了，不再贅述，同理，程式碼如下：

<!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>


相關推薦

【Bootstrap】一個相容IE8、谷歌等主流瀏覽器的受眾巨幕式風格頁面

雖然說IE6除了部分要求苛刻的需求以外已經被可以不考慮了，但是WIN7自帶的瀏覽器IE8還是需要支援的。 本文這個方法主要的優點，個人覺得就是準備少，不需要上網尋找大量的圖片做素材，你只要準備好一個bootstrap、jquery與photoshop就可以了，bootstr

【Bootstrap】一個PC、平板、手機同一時候使用並且美觀的登陸頁面

south 文檔 panel code input fse 使用 start pro Bootstrap如同前臺框架，它已經布置好不少的CSS。前端開發的使用須要則直接調用就可以。其站點的網址就是http://www.bootcss.com。使用Bootstrap能降低

【Bootstrap】一個PC、平板、手機同時使用而且美觀的登陸頁面

Bootstrap如同前臺框架，它已經佈置好不少的CSS，前端開發的使用需要則直接呼叫即可。其網站的網址就是http://www.bootcss.com。使用Bootstrap能減少前端開發時候在CSS樣子的佈置時間 需要使用Bootstrap先在官網（點選開啟連結）下載元

【Bootstrap】一個在當前網頁彈出的對話方塊，可以關閉，不用跳轉，非彈窗

使用彈窗在網頁中顯示簡訊息還行，雖然不那麼地友好。然而，彈窗對於如同網站服務條款的長資訊就無能為力的了。這是需要使用一個叫模態框modal的東西，並且在模態框裡面嵌入一個多行文字框textarea。 這個東西，如果要手工寫JavaScript程式碼就太難做了，但是使用Boo

【Bootstrap】自動適應PC、平板、手機的Bootstrap柵格系統

柵格系統英文為“grid systems”，也有人翻譯為“網格系統”，運用固定的格子設計版面佈局，其風格工整簡潔，在二戰後大受歡迎，已成為今日出版物設計的主流風格之一。 1692年，新登基的法國國王路易十四感到法國的印刷水平差強人意，因此命令成立一個管理印刷的皇家特別委員會

【BIEE】11_BIEE圖形報表在谷歌瀏覽器64.0.3282.140中訪問圖例亂碼解決

中文 order image 下載谷歌 isp pap 但是 api png 如上圖，使用谷歌瀏覽器訪問BIEE圖形報表的時候，標題、圖例等涉及到中文的地方全部亂碼了！但是用IE打開是不會亂碼的，這是由於：谷歌需要設置編碼格式但是55版本以後，谷歌公司為了加快瀏覽器的速度，

用js實現複製內容到作業系統貼上板(相容IE、谷歌、火狐等瀏覽器)

一、如果只考慮IE瀏覽器，可以直接用原聲js實現 if(window.clipboardData){ //清空作業系統貼上板 window.clipboardData.clearData(); //將需要複製的內容複製到作業系統貼上板 window.clipbo

【測試】Jmeter測試CPU、I/O等伺服器效能

安裝配置Jmeter        PS：        個人環境是Windows，伺服器環境是Linux，故需要在個人環境和伺服器環境分別安裝Jmeter：        通過伺服器環境的Jmete

【Ex】如何開啟國際版谷歌

–其實其他國家也是一樣，比如日本就是co.jp，俄羅斯是ru等。 但是有時候我們是想開啟國際版的谷歌而不轉換的時候該怎麼辦呢？ ►此時我們可以在【http://google.com】的尾

【easyui】datagrid清除排序、分頁等引數

在觸發datagrid查詢的前一句程式碼，增加下面的配置引數 //重置列表的查詢引數 function resetDatagridOpt(dataGrid){ var

event 物件相容火狐、谷歌、ie瀏覽器問題

         獲取當前觸發事件的頁面元素 使用event的target和srcElement 屬性，srcElement 在ie中使用，target在firefox中使用，chrome瀏覽器同時具有這兩個屬性，但據我個人測試，target屬性在ie10中也可以使用了（ie其他版本沒有測試），這樣如果我要

解決js函式replace禁止輸入框輸入非法字元，游標回到文字最後問題(相容ie、谷歌)

/*獲取游標位置*/ function getCursorPos(obj) {      var CaretPos = 0;      // IE Support      if (document.selection) {          obj.focus (); //獲取游標位置函式         

【webProtocol】開啟quic加速訪問谷歌和油管

簡介 QUIC（Quick UDP Internet Connections）協議是一種全新的基於UDP的web開發協議。 特點是擁有tcp的功能且速度較之更快，更快，更快 在Ch

在網頁中插入FLV視訊，經測試相容IE、火狐、谷歌等瀏覽器

比較目前，所有的瀏覽器都支援FLASH。所以，這個方法大眾普遍都很接受，優酷、土豆等線上視訊就是使用的FLASH的。 本例播放器使用Flvplayer.swf。播放器在下文的demo檔案中。網頁中插入程式碼的如下： <object classid="clsid:

CAD資料分塊，偏移校準，載入到百度地圖、高德地圖、谷歌等地圖上

前面分享過一篇如何將CAD海量資料顯示在百度地圖上（百度地圖Canvas實現十萬CAD資料秒級載入），但是很多開發者在CAD資料提取時遇到了問題，所以接下來的文章將介紹如何將CAD資料提取。 準備軟體： 1. Global Mapper V20.0 2.AutoCAD（我用的是2019，其他版本也可以）

【腦瓜疼】相容IE8、IE10 心德

網上查看了各網友的回覆 ，鄙人也貼一個經驗，希望能幫助得上再坑得同學； IE8\IE10瀏覽器 “此頁上的程式碼禁用了反向和正向快取”問題 解決方案： a) 檢查程式碼，看看你的程式碼裡面有用到 parameters => { statements } 箭

【日常學習筆記】2019/1/8(JS物件與JSON的轉換、谷歌黑語法)

JS物件與JSON的轉換 話不多說，上程式碼： <html> <title>測試</title> <script> //此時j是個JS物件，並且具有name屬性 var j={"name":"san"}; //提示s

js可選擇時分秒的日曆時間控制元件程式碼下載,多瀏覽器IE8,9,10、谷歌chrome,火狐firefox等都是相容的

該空間相容性比較好！我試過很多瀏覽器IE8,9,10、谷歌 火狐等瀏覽器，都是相容的，只需要匯入WdatePicker.js檔案。在inputText控制元件的onclick事件加入onclick="WdatePicker( {el:this,dateFmt:'yyy

【BootStrap】Bootstrap簡介、環境安裝與基本模板

BootStrap簡介 什麼是BootStrap 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發。 基於 HTML、CSS、JAVASCRIPT。 主要是前端的框架(HTML、CSS、JS)。 （使用Bo

【BootStrap】 布局組件 I

包括 code put school radi 靈活 -- 標簽 上拉 BootStrap布局組件 I 　　除了在原生的HTML基礎上進行了外觀和類別上的改進，BS還包裝了很多組件進庫中，設計網頁時我們可以方便地調用這些組件。下面來簡略地介紹一下各種各樣的組件 ■