bootstrap
關于bootstrap
定義：用于快速開發 Web 應用程式和網站的前端框架， 基于 HTML、CSS、JAVASCRIPT ，
優點：框架包含了貫穿于整個庫的移動設備優先的樣式，所有的主流瀏覽器都支持 Bootstrap：
- 為開發人員創建介面提供了一個簡潔統一的解決方案，
- 包含了功能強大的內置組件，易于定制，
- 提供了基于 Web 的定制，
- 是開源的，(可以根據自己的需要更改)
引入：需要下載用于生產環境的Bootstrap(內部包含壓縮后的CSS、JavaScript和字體檔案)和Bootstrap原始碼(內部包含Less、JavaScript和字體檔案的原始碼，并帶有檔案)，參考時，要參考css檔案和js檔案，有的代碼還需要引入Jquery檔案，
例：
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="../jQuery.js"></script> <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
柵格系統
bootstrap把網頁等分為了12分，根據螢屏大小把螢屏分為了4個等級，小于768像素的為超小螢屏，在柵格系統中用xs控制(或者說設定)；大于等于768像素的為小螢屏，在柵格系統中用sm控制；大于等于992像素的為中等螢屏，在柵格系統中用md控制(也是默認值)；大于等于1200像素的則為大螢屏，在柵格系統中用lg控制，
柵格系統中，可以多次嵌套，
例：
1 <div class="container"> 2 <div class="row"> 3 <div class="col-xs-6"> 4 <div class="row"> 5 <div class="col-xs-4"> 6 <div class="box">1</div> 7 </div> 8 <div class="col-xs-4"> 9 <div class="box">2</div> 10 </div> 11 <div class="col-xs-4"> 12 <div class="box">3</div> 13 </div> 14 </div> 15 </div> 16 </div> 17 </div>
用法："-"后的數字代表占據了幾列
超小螢屏 (<768px) . col-xs-
小螢屏 (≥768px) . col-sm-
中等螢屏 (≥992px) . col-md-
大螢屏 (≥1200px) col-lg-
列偏移和列排序
列偏移
添加.col-?-offset-?類名實作列的偏移(或者說橫向向后移動)，第一個?代表在多大尺寸范圍的螢屏內，第二個?代表偏移多少列，注意，使用這個方法會將該元素后的元素也推走，后方的元素如果使用該類名，會在被推走的基礎上再進行偏移，
例：在超小螢屏占據3列，向右偏移3列
1 <div class="row"> 2 <div class="col-xs-3 col-xs-offset-3"><div class="box">1</div></div> 3 <div class="col-xs-3 col-xs-offset-3"><div class="box">2</div></div> 4 </div>
列嵌套
添加.col-?-push-?類名(向后偏移)和.col-?-pull-?類名(向前偏移)實作對該元素的偏移，第一個?表示在多大螢屏范圍內，第二個?表示偏移多少列，注意，這兩種方法不會影響其他元素，如果一個元素設定了該類名，偏移后的位置也有元素存在，則會重疊(或者說覆寫到上面，類似于浮動)，如果兩個元素分別設定了這兩個類名，且偏移的列數相同，兩個元素會互換位置，
例：
1 <!-- 使用push和pull將頁面內元素調換位置，調換程序不影響其他元素 --> 2 <div class="container"> 3 <div class="row"> 4 <!-- push:向后推N列，在這里向后推動6列，不影響其他元素 --> 5 <div class="col-xs-3 col-xs-push-6"><div class="box">box1</div></div> 6 <div class="col-xs-3"><div class="box">box2</div></div> 7 <!-- pull:向前推N列，在這里向前推動6列，不影響其他元素 --> 8 <div class="col-xs-3 col-xs-pull-6"><div class="box">box3</div></div> 9 <div class="col-xs-3"><div class="box">box4</div></div> 10 </div> 1 </div>
標題
HTML中的所有標題標簽h1~h6都可以使用，用法一致
例：
1 <h1>我是h1</h1> 2 <h2>我是h2</h2> 3 <h3>我是h3</h3> 4 <h4>我是h4</h4> 5 <h5>我是h5</h5> 6 <h6>我是h6</h6>
效果：
表格（必須使用table標簽）
1.給表格添加.table table-striped類名，可以給表格添加條紋樣式(隔行變色，不影響表頭)
2.給表格添加.table table-bordered類名，可以給表格和內部的每個單元格添加邊框
3.給表格添加.table table-hover類名，可以讓表格內每一行對滑鼠移入做出回應
4.給表格添加.table table-condensed類名，可以讓表格更加緊湊
5.給表格添加.table-responsive類名，可以在設備非常小的情況下，給表格添加滾動條
按鈕
按鈕可以有幾種種常用的方式，a標簽設置，button按鈕設定，效果相同，可以添加.btn btn-?來給按鈕添加背景色，?有5種：primary、success、danger、warning、info物種顏色，
例子：
a標簽：
1 <a href="" class="btn btn-default">Link</a>
button按鈕：
<button class="btn btn-primary">Button</button>
文本和背景顏色
設定文本顏色只需要添加.text-?類名，設定背景顏色只需要添加.bg-?，?代表不同的顏色
文本顏色有：muted、primary、success、info、warning、danger六種
例：
1 <p class="text-muted">122345dsadcxczcs</p> 2 <p class="text-primary">122345dsadcxczcs</p> 3 <p class="text-success">122345dsadcxczcs</p> 4 <p class="text-info">122345dsadcxczcs</p> 5 <p class="text-warning">122345dsadcxczcs</p> 6 <p class="text-danger">122345dsadcxczcs</p>
效果：
背景顏色有：primary、success、info、warning、danger五種
例：
1 <p class="bg-primary">122345dsadcxczcs</p> 2 <p class="bg-success">122345dsadcxczcs</p> 3 <p class="bg-info">122345dsadcxczcs</p> 4 <p class="bg-warning">122345dsadcxczcs</p> 5 <p class="bg-danger">122345dsadcxczcs</p>
效果：
輔助類：浮動和清除浮動
使用pull-?可以實作浮動，?代表left左浮動和right右浮動，
為浮動元素添加.clearfix類名可以實作清除浮動
為元素添加.center-block讓元素在其父元素中居中
下拉框
默認左對齊(.dropdown-left，未定義時默認使用)，通過添加.dropdown-right可以實作右對齊
展開方式：.dropdown向下展開；.dropup:向上展開
通過添加.divider類名可以給下拉選單添加分割線
通過添加.dropdown-header類名，實作對下拉框內容的分組說明(不可點擊)
通過添加.disabled類名，實作對下拉選單子元素的禁用(添加到下拉選單子元素上)
例：
1 <div class="dropdown"> 2 <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"> 3 一級選單 4 <span class="caret"></span></button> 8 <ul class="dropdown-menu"> 9 <li><a href="">選單項</a></li> 10 <li class="divider" role="separator"></li> 11 <li class="dropdown-header">網路</li> 12 <li class="disabled"><a href="">移動</a></li> 13 <li><a href="">聯通</a></li> 14 </ul> 15 </div>
效果：
模態框
- data-toggle="modal"表示按鈕是用來切換模態框的顯示和隱藏的
- data-target="#mymodal"表示按鈕切換的目標模態框是誰，這里是ID屬性是mymodal的模態框
- data-dismiss="modal"表示該按鈕具有關閉模態框的功能
- fade在這里控制彈窗出現的效果，是漸出的，不是必須的，只是給模態框顯示時添加一些動態效果
- modal-* 表示控制模態框的大小，有三種尺寸：modal-lg表示最大;modal-sm表示小的;不添加類表示默認，表示為中等大小
1 <button class="btn btn-success" type="button" data-toggle="modal" data-target="#mymodal">退出</button> 2 3 <div class="modal fade" id="mymodal"> 4 <div class="modal-dialog modal-lg"> 5 <div class="modal-content"> 6 <div class="modal-header"> 7 <button type="button" class="close" data-dismiss="modal"> 8 <span>×</span> 9 </button> 10 <h4 class="modal-title">提示</h4> 11 </div> 12 <div class="modal-body"> 13 <p>是否退出應用</p> 14 </div> 15 <div class="modal-footer"> 16 <button class="btn btn-primary"data-dismiss="modal">確定</button> 18 <button class="btn btn-danger" data-dismiss="modal">取消</button> 19 </div> 20 </div> 21 </div> 22 </div>
效果：
任俊玖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/27984.html
標籤：HTML5
上一篇：密碼強度