bootstrap知識總結
Bootstrap框架
一、Bootstrap簡介
Bootstrap是一個用於快速開發Web應用程式和網站的前端框架。Bootstrap是基於HTML、CSS、JavaScript的。
二．Bootstrap 特點
(1)**跨裝置、跨瀏覽器：**可以相容所有現代瀏覽器，包括比較詬病的IE7、8。
(2)**響應式佈局：**不但可以支援PC端的各種解析度的顯示，還支援移動端PAD、手機等螢幕的響應式切換顯示。
(3)**提供的全面的元件：**Bootstrap提供了實用性很強的元件，包括：導航、標籤、工具條、按鈕等一系列元件，方便開發者呼叫。
(4)**內建 jQuery：**外掛Bootstrap提供了很多實用性的jquery外掛，這些外掛方便開發者實現Web中各種常規特效。
(5)**支援 HTML5、CSS3：**HTML5語義化標籤和CSS3屬性，都得到很好的支援。
(6)**支援 LESS 動態樣式：**LESS使用變數、巢狀、操作混合編碼，編寫更快、更靈活的CSS。它和Bootstrap能很好的配合開發。
三、柵格系統
柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就可以放入這些建立好的佈局中。
引數 Bootstrap3
引數 Bootstrap4
二、Bootstrap全域性CSS樣式
1、CSS Reset
*{box-sizing:border-box;}
box-sizing:content-box;/預設值/=margin+border+padding+width
box-sizing:border-box;/推薦使用/=margin+width
2、按鈕
.btn{padding: ;border: ;}
.btn-default{color: ;background: ;border-color: ;}
（1）五種帶有預定義樣式的按鈕：
.btn-danger（危險） .btn-success（成功） .btn-warning（警告） .btn-info（一般資訊） .btn-primary（首選項）
（2）四種常用尺寸的按鈕：
.btn-lg（大按鈕） .btn-default（預設尺寸） .btn-sm（小按鈕） .btn-xs（超小尺寸）
（3）按鈕可變為塊級（block）元素：
.btn-block（塊級元素）
（4）調整按鈕的位置：
.pull-left{float:left;}
.pull-right{float:right;}
3、圖片
.img-rounded(圓角圖片)
.img-circle(圓形圖片)
.img-thumbnail(縮圖片)
.img-responsive(響應式圖片)
4、排版和程式碼
.text-danger .text-success .text-warning .text-info .text-primary
.bg-danger .bg-success .bg-warning .bg-info .bg-primary
.text-left .text-right .text-center .text-justify
.text-lowercase .text-uppercase .text-capitalize
.list-unstyled .list-inline
5、表格
.table
.table-bordered 帶邊框的表格
.table-responsive 響應式表格（注意：使用在table的父元素上，而不是table上）
.table-striped 隔行變色的表格
.table-hover 帶懸停效果的表格
6.表單
Bootstrap中的表單分為三種：
（1）預設表單
<form>
<div class="form-group">
<label class="control-label"></label>
<input class="form-control">
<span class="help-block"></span>
</div>
</form>
（2）行內表單
<form class="form-inline">
<div class="form-group">
<label class="control-label"></label>
<input class="form-control">
<span class="help-block"></span>
</div>
</form>
（3）水平表單
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-3"></label>
<div class="col-md-5">
<input class="form-control">
</div>
<div class="col-md-4">
<span class="help-block"></span>
</div>
</div>
</form>
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.css">
</head>
<body>
<div clss="container">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>cxk</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>蔡徐坤</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>陳立農</td>
<td>男</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Bootstrap 縮圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.css">
<style>
img{
width: 100%;
height: auto;
}
.row div{
margin:20px 0;
}
.nav{
position: fixed;
right: 10px;
top: 100px;
width: 50px;
height: 300px;
background-color: #000;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="./images/t01ea6ff288c41ceefe.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="./images/t01ea6ff288c41ceefe.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="./images/t01ea6ff288c41ceefe.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="./images/t01ea6ff288c41ceefe.jpg" alt="">
</div>
</div>
</div>
<div class="nav visible-md visible-lg">
</div>
</body>
</html>