BootStrap基礎知識
1、 .lead //突出
.text-left //文字居左
.text-right //文字居右
.text-center //文字居中
.text-justify //文字兩端對齊
.text-nowrap //文字不換行
.text-uppercase //大寫
.text-lowercase //小寫
.text-capitalize //首字母大寫
.text-muted //柔和灰
.text-primary //主要藍
.text-success //成功藍
.text-info //信息藍
.text-warning //警告黃
.text-danger //危險紅
.blockquote-reverse //blockquote左側引用
.list-unstyled //ul移出樣式
.list-inline //ul設置內聯
.dl-horizontal //dl水平展示
<kbd> //用戶輸入
2、表格設置
整個表格：table
.table //基本表格
.table .table-striped //斑馬狀表格
.table .table-bordered //帶內邊框の表格
.table-hover //懸停有背景
單行：tr
.active //設置活動
.success、.info、.warning、.danger //設置顏色
.sr-only //隱藏行
3、按鈕設置 (.btn必須有，有默認尺寸)
.btn .btn-default //默認樣式
.btn .btn-success //成功樣式
.btn .btn-info //信息樣式
.btn .btn-warning //警告樣式
.btn .btn-danger //危險模式
.btn .btn-primary //重要模式
.btn .btn-link //鏈接樣式
.btn .btn-lg //大尺寸
.btn .btn-sm //中尺寸
.btn .btn-xs //小尺寸
.btn .btn-block //轉成區塊
.btn .active //設置活動
.btn .disabled //禁用
4、表單設置(form)
.form-group //實現表單樣式(所有標籤可用)
.form-group .has-error //錯誤狀態
.form-group .has-success //成功狀態
.form-group .has-warning //錯誤狀態
.form-group .form-group-lg //大圖標
.form-group .form-group-sm //小圖標
.form-inline //表單內聯(小於768px會獨佔)
.form-horizontal //水平排列
5、表單元素input設置
.checkbox-inline //設置複選框內聯
.checkbox //設置複選框
.radio //設置單選框
select .form-control //設置下拉框
.input-lg //大尺寸
.input-sm //小尺寸
6、 </div>圖片設置(img)
.img-rounded //帶border-radius的圖片
.img-circle //把圖片設置圓形
.img-thumbnail //帶border-radius和邊框的圖片
.img-responsive //添加響應式
7、輸入框內設置圖片
<div>
<label>电子邮件</label>
<input type="email" placeholder="请输入您的电子邮件">
<span></span>
<div>
.glyphicon .glyphicon-remove //錯誤×圖標
.glyphicon .glyphicon-ok //成功√圖標
.glyphicon .glyphicon-sign //警告！圖標
8、
<div>
<div> <input type=’checkbox’> </div>
<input type="text" placeholder="请输入您的价格">
<div>元</div>
</div>
9、 .container //固定寬度
.container-fluid //100%寬度
div .container >div .row >div .col-md-4*3
全列共12格
.col-md-4 : 中屏時佔4格
lg : 大屏(>1200px)
md : 中屏(992px-1200px)
sm : 小屏(768px-991px)
xs : 超小屏(<768px)
四屏全激活 ：div .col-lg-2 .col-md-3 .col-sm-4 .col-xs-6
設置間隔(隔一格) ：div .col-md-3 .col-md-offset-1
左移三格：div .col-md-9 .col-md-push-3
右移九格：div .col-md-3 .col-md-pull-9
10、背景色
.bg-primary //主要藍
.bg-success //成功綠
.bg-info //信息青
.bg-warning //警告黃
.bg-danger //危險紅
11、.pull-right //強制右浮
.pull-left //強制左浮
.center-block //塊級居中
.show //顯示
.hidden //隱藏
.visible-xs-block //超小屏時顯示
.hidden-xs //超小屏時隱藏
.glyphicon .glyphicon-star //
.glyphicon .glyphicon-home //
圖標地址：#glyphicons
12、關閉×
<button>×</button>
下拉倒三角
<span></span>
下拉菜單：
<div> //向下顯示數據；dropup 向上顯示數據
<button data-toggle="dropdown"> //數據引用
下拉菜单
<span></span>
</button>
分開： <button>下拉菜单</button>
<button data-toggle="dropdown">
<span></span>
</button>
<ul> //數據源