bootstrap3.0 框架應用總結
一 首先匯入 bootstrap模組外掛
匯入bootstrap的css外掛，js外掛 還有jquery
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
此處引用的外掛來自於bootstrap官網！
二 外掛匯入完以後就可以使用bootstrap來開發前端頁面
1 首先總結一下柵格系統，柵格系統是通過行和列的組合應用來實現的，行裡面巢狀列，列裡面放需要實現的標籤，其中每一行都預設等分成12等分，然後給每一列分配對應的寬度，即12等份中的幾份來實現標籤的排布，通過給每一列設定對應的class屬性值來控制，在不同平螢幕下，標籤外掛的排布方式：
<div class="container">
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
</div>
柵格系統的引數：.col-lg- 為大屏 1170，.col-md- 為中屏 970，.col-sm- 為小屏 768, .col-xs- 為超小屏 ,其中 .col-lg-3代表該列(colnum)佔12等分中的3份兒,如果在一個 .row 內包含的列（column）大於12個，包含多餘列（column）的元素將作為一個整體單元被另起一行排列。
.container 為固定容器 ,.container-fluid 為流式佈局 其寬度為100%
2 列偏移 .col-lg-offset-4 代表將該列向右偏移4個列的寬度,如果該行空間不足以剩餘列的排布,則外下一行排列
3 列的巢狀 比如在一個列裡面再新增一個新的 .row 元素和一系列 .col-sm-* 元素
<div class="container"> <div class="row"> <div class="col-lg-3"> 1 <div class="row"> <div class="col-lg-4">1</div> <div class="col-lg-4">2</div> <div class="col-lg-4">3</div> </div> </div> </div> </div>
4 頁面主體,Bootstrap 將全域性 font-size 設定為 14px，line-height 設定為 1.428。這些屬性直接賦予 <body> 元素和所有段落元素。另外，<p> （段落）元素還被設定了等於 1/2 行高（即 10px）的底部外邊距（margin）。 給p標籤新增.lead屬性可以使段落突出
設定文字對齊時,通過新增.text-left,text-center等
設定文字大小寫 .text-lowercase .text-uppercase .text-capitalize
5 表格
<table class="table "> ........ </table>
.table-striped 可以給表中的每一行新增魚尾紋樣式
.table-bordered 類為表格和其中的每個單元格增加邊框。 .table-hover 類可以讓 每一行對滑鼠懸停狀態作出響應。 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。
還可以給 tr標籤設定class屬性 succes,active,danger,warning,info
如果要把表格做成響應式的,需要在table外面包裹一個class屬性為 table-responsive 的div標籤
6 form 表單 :
單獨的表單控制元件會被自動賦予一些全域性樣式。所有設定了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被預設設定寬度屬性為 width: 100%;。 將 label 元素和前面提到的控制元件包裹在 .form-group 中可以獲得最好的排列。
<from> <div class="form-group"> <label for="">Email</label> <input type="text" class="form-control" /> </div> <div class="form-group"> <label for="">password</label> <input type="password" class="form-control" /> </div> </from>
.form-inlin 內聯表單域 .form-horizontal 水平排列表單域
form-group 表單組 form-control 文字輸入框 下拉選單控制樣式
radio-inline 單選框樣式
checkbox-inline 多選框樣式
input-group 表單控制元件組
7 按鈕:
a button input 都一可以通過新增 btn屬性 應用bootstrap樣式
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以獲得不同尺寸的按鈕。
button 新增 .active類 表示按鈕處於啟用狀態,表示被按下去了
還也以給這些標籤新增disabled的類
8 圖片 :
響應式圖片:通過為圖片新增 .img-responsive 類可以讓圖片支援響應式佈局。其實質是為圖片設定了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。
<img src="..." class="img-responsive" alt="Responsive image">