bootstrap初接觸

時間 2019-11-13

原文原文鏈接

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架.(主要是結合HTML5 CSS3的樣式, 基於jquery+Bootstrap 自帶 12 種 jQuery 插件，擴展了功能，能夠給站點添加更多的互動。 )javascript

2011年，twitter的「一小撮」工程師爲了提升他們內部的分析和管理能力，用業餘時間爲他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所設計和創建，在github上開源以後，迅速成爲該站上最多人watch&fork的項目。css

GitHub上這樣介紹 bootstrap：簡單靈活可用於架構流行的用戶界面和交互接口的html,css,javascript工具集。基於html五、css3的bootstrap，具備大量的誘人特性：友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式嚮導文檔，自定義JQuery插件，完整的類庫，基於Less等。html

bootstrap最新版本:前端

相似jquery. 2的版本再也不更新但能兼容舊版的瀏覽器. 3版本代碼比較簡潔,再也不兼容IE8甚至是IE7和IE6html5

2版本的官方地址 http://v2.bootcss.com/java

起步和腳手架大概就是介紹bootstrap的狀況. 以及搭建頁面. 其中能夠考慮將引入的js css等文件放到本地,或者使用百度之類的cdn網站,這樣訪問速度比較快jquery

bootstrap大概分爲幾個模塊:css3

[腳手架][基本CSS樣式] [組件] [javascript插件]git

腳手架: 佈局相關github

基本css樣式: 常規的樣式.

組件: 下拉菜單按鈕組導航條分頁警告框進度條等以下面例子 <ul class="nav navbar-nav">

javascript插件: 組件的相關動做實現.以下面例子用到的下拉菜單組件 <li class="dropdown"> 如不使用下拉組件,則點擊下拉菜單無響應動做.

插件內還能夠設置不少參數和方法.

如:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <title>Bootstrap 實例 - 默認的導航欄</title>
 5    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 6    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 7    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 8 </head>
 9 <body>
10 
11 <nav class="navbar navbar-default" role="navigation">
12    <div class="navbar-header">
13       <a class="navbar-brand" href="#">W3Cschool</a>
14    </div>
15    <div>
16       <ul class="nav navbar-nav">  //備註: nav是導航條樣式 navbar-nav是導航條內部ui li的樣式
17          <li class="dropdown"> //備註: 使用下拉菜單（Dropdown）插件
18             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
19                Java 
20                <b class="caret"></b>
21             </a>
22             <ul class="dropdown-menu">
23                <li><a href="#">jmeter</a></li>
24                <li><a href="#">EJB</a></li>
25                <li><a href="#">Jasper Report</a></li>
26                <li class="divider"></li>
27                <li><a href="#">分離的連接</a></li>
28                <li class="divider"></li>
29                <li><a href="#">另外一個分離的連接</a></li>
30             </ul>
31          </li>
32       </ul>
33    </div>
34 </nav>
35 
36 </body>
37 </html>