初探bootstarp

時間  2019-11-19
標籤 初探 bootstarp 简体版
原文   原文鏈接

目錄
一、下載Bootstrap
二、引入Bootstrap相關的css、js
三、一個最簡單的Bootstrap頁面
四、瀏覽器支持javascript

一、下載Bootstrap
Bootstrap官網下載地址 
Bootstrap-v3.0.3下載地址 
注：本教程採用Bootstrap v3.0.3版本進行演示。 css

下載壓縮包以後，將其解壓縮到任意目錄便可看到如下目錄結構：html

複製代碼 
bootstrap/
├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
複製代碼

這是最基本的Bootstrap組織形式：未壓縮版的文件能夠在任意web項目中直接使用。咱們提供了壓縮(bootstrap.min.*)與未壓縮 (bootstrap.*)的CSS和JS文件。字體圖標文件來自於Glyphicons。html5

二、引入Bootstrap相關的css、jsjava

複製代碼 
<!-- Bootstrap核心CSS文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- 可選的Bootstrap主題文件(通常不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
<!-- jQuery文件，在bootstrap.min.js以前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap核心JavaScript文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
複製代碼

Bootstrap依賴jQuery
請注意，全部 JavaScript 插件都依賴 jQuery，所以jQuery必須在Bootstrap以前引入，jQuery版本需大於或等於1.9.0。點擊此能夠查看Bootstrap所對應的jQuery版本。

jquery

三、一個最簡單的Bootstrap頁面
使用如下給出的這份超級簡單的HTML模版，或者修改這些案例。咱們強烈建議你對這些案例按照本身的需求進行修改，而不要簡單的複製、粘貼。git

複製代碼 
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- 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="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> </body> </html>
複製代碼

HTML5文檔類型說明
Bootstrap使用到的某些HTML元素和CSS屬性須要將頁面設置爲HTML5文檔類型。在你項目中的每一個頁面都要參照下面的格式進行設置。github

<!DOCTYPE html> <html lang="zh-cn"> ... </html>

引入respond.min.js說明
Internet Explorer 8 和 9 是被支持的，然而，你要知道，不少CSS3屬性和HTML5元素 -- 例如，圓角矩形和投影 -- 是確定不被支持的。另外，Internet Explorer 8 須要Respond.js配合才能實現對媒體查詢（media query）的支持。web

引入html5shiv.min.js說明
愈來愈多的站點開始使用 HTML5 標籤。可是目前的狀況是還有不少人在使用IE6，IE7，IE8。爲了讓全部網站瀏覽者都能正常的訪問網站，解決方案就有下面兩個：
a、爲網站建立多套模板，經過程序對User-Agent的判斷給不一樣的瀏覽器用戶顯示不一樣的頁面，好比優酷網就是採用的這種模式。
b、使用Javascript來使不支持HTML5的瀏覽器支持HTML標籤。目前不少網站採用的這種方式。json

針對IE瀏覽器比較好的解決方案是html5shiv。htnl5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能做 爲父節點包裹子元素，而且不能應用CSS樣式。讓CSS 樣式應用在未知元素上只需執行 document.createElement(elementName) 便可實現。html5shiv就是根據這個原理建立的。

html5shiv的使用很是的簡單，考慮到IE9是支持html5的，因此只須要在頁面head中添加以下代碼便可：

<!--[if lt IE 9]>
    <script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->

 

四、瀏覽器支持
Bootstrap的目標是在最新的桌面和移動瀏覽器上有最佳的表現，也就是說，在較老舊的瀏覽器上可能會致使某些組件表現出的樣式有些不一樣，可是功能是完整的。

被支持的瀏覽器
特別注意，咱們堅定支持這些瀏覽器的最新版本：

a. Chrome (Mac、Windows、iOS和Android)
b. Safari (只支持Mac和iOS版，Windows版已經基本死掉了)
c. Firefox (Mac、Windows)
d. Internet Explorer
e. Opera (Mac、Windows)

Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表現也是很不錯的，雖然咱們不對其進行官方支持。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程