-
字體圖標(biāo)
.glyphicon
.glyphicon-star
.glyphicon-*
查看全部 -
Bootstrap組件-怪異的屬性
1.role????????html5標(biāo)簽屬性
2.aria-label????????通常使用在輸入框
3.tabIndex
4.data-????? html5規(guī)范自定義屬性,在頁(yè)面上不顯示
查看全部 -
圖標(biāo)
.glyphicon-*
查看全部 -
單位
px
em???????? 1em=16px
????????????? ?匯繼承父級(jí)元素的字體大小
????????????? ?IE瀏覽器不支持em
rem????????與em類似? ??
????????????? ?會(huì)繼承根元素的字體大小
????????????? ?html{ font-size:62.5%; }?
查看全部 -
柵格布局
@media screen and (min-width: px) and (max-width: px){
}
查看全部 -
Bootstrap中的viewport(手機(jī)適配)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minium-scale=1,user-scalable=no" >
查看全部 -
圖片--形狀
.img-rounded????????圓角
.img-circle???????????? 圓形
.img-thumbnail???? 帶有邊框的圓角圖形
查看全部 -
表單
<button></button>? //? 或者用<a></a>標(biāo)簽
.btn? Bootstrap基礎(chǔ)按鈕
.btn-default? ? ?默認(rèn)按鈕
,btn-primary? ?主要按鈕
.btn-warning? 警告按鈕
.btn-info? ? ? ? ?信息按鈕
.btn-success? ?成功按鈕
.btn-danger? ? 報(bào)錯(cuò)按鈕
.btn-link? ? ? ? ? 鏈接按鈕
.btn-lg? ? ? ? ? ? ?大按鈕
.btn-sm????????????小按鈕
.active????????????? 默認(rèn)選中
.btn-block?????? 全屏按鈕
.disabled?????????禁止按鈕
查看全部 -
表單
<form class=""></form>
.form-inline
<div class=""></div>
.form-group
.has-success? 代表狀態(tài)
.has-warning
.has-error
<input? class="" />
.form-cotrol
.input-lg
.input-sm
<label class=""></label>
.sr-only 標(biāo)簽消失
.control-label
查看全部 -
排版--表格
<table class=""></table>
.table 基礎(chǔ)表格效果
.table-striped? 斑馬線效果
.table-bordered? 邊框效果
.table-hover? 高亮效果(鼠標(biāo)經(jīng)過(guò)的變色效果)
<tr class=""></tr>? //表格顏色
.danger
.warping
.info
.success
.active
查看全部 -
排版--文本
.text-left? ?內(nèi)容左置
.text-center? 內(nèi)容居中
.text-right? ?內(nèi)容右置
.text-lowercase? 內(nèi)容變成小寫
.text-uppercase? 內(nèi)容變成大寫?
.text- capitalize? 內(nèi)容首字母變大寫
查看全部 -
Bootstrap 全局樣式的特點(diǎn)
????代碼整潔
????風(fēng)格統(tǒng)一
????美觀易用
查看全部 -
字體圖標(biāo)可以阿里 字體圖標(biāo)不會(huì)失真查看全部
-
字體圖標(biāo),特殊形式的字體,可以使用字體樣式改變大小顏色查看全部
-
如果有兼容性問(wèn)題 px寫在前面,rem寫在后面查看全部
舉報(bào)