DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 創建一個自己的bootstrap模板示例
創建一個自己的bootstrap模板示例
編輯:CSS詳解     
代碼如下:
<!DOCTYPE Html>
<Html lang="zh-cn">
<head>
<meta charset="utf-8">
<!-- Bootstrap不支持IE的兼容模式,加入此標簽以確保在每個被支持的IE浏覽器中保持最好的頁面展現效果 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 由於Bootstrap 3是移動設備優先,加入此標簽是為了確保適當的繪制和觸屏縮放 -->
<meta name="vIEwport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap-Template-01</title>
<!-- 最新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="<a href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.CSS</a>">
<!-- Html5 Shim and Respond.JS IE8 support of Html5 elements and media querIEs -->
<!-- WARNING: Respond.JS doesn't work if you vIEw the page via file:// -->
<!--[if lt IE 9]>
<script src="<a href="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.JS"></script">http://cdn.bootCSS.com/Html5shiv/3.7.0/Html5shiv.min.JS"></script</a>>
<script src="<a href="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.JS"></script">http://cdn.bootCSS.com/respond.js/1.3.0/respond.min.JS"></script</a>>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- 所有 Bootstrap 插件都依賴 jQuery,因此jQuery必須在Bootstrap之前引入 -->
<script src="<a href="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.JS"></script">http://cdn.bootCSS.com/jquery/1.10.2/jquery.min.JS"></script</a>>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="<a href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.JS"></script">http://cdn.bootCSS.com/twitter-bootstrap/3.0.3/js/bootstrap.min.JS"></script</a>>
</body>
</Html>

哪下面我就來說說幾個要點吧

【1】Bootstrap是使用的Html5文檔類型,你仔細看看第一行是不是和我們平時寫的不一。

【2】使用了lang,咋們是中國吧,當然用簡體中文了,當然這裡有點點問題,就是看到網上有人說,這個zn-cn已經不在適用於現在的情況了,具體的自己百度吧。

【3】單個標簽沒有閉合了,看看meta標簽就知道了,具體的了解下Html5吧。

【4】加入了在IE小於9的情況下對Html5不是很支持的情況下的兼容處理,當然要是我做的話,我就直接屏蔽了IE9以下的,給一個頁面讓用戶升級浏覽器,不然用戶看到了就是一個丑陋的頁面,何必呢!!!

【5】為什麼這裡JQuery用的是1.102版的,而不是2.x版的呢?貌似因為1.9.x版對ie8支持,而2.x版是對ie9以後的,所有這裡用了一個大於1.9.x版的,當然,你也可以不支持ie8,就像我在第4步中說的一樣,屏蔽IE9以下的浏覽器。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved