-
字體圖標
.glyphicon
.glyphicon-star
.glyphicon-*
查看全部 -
Bootstrap組件-怪異的屬性
1.role????????html5標簽屬性
2.aria-label????????通常使用在輸入框
3.tabIndex
4.data-????? html5規范自定義屬性，在頁面上不顯示
查看全部 -
圖標
.glyphicon-*
查看全部 -
單位
px
em???????? 1em=16px
????????????? ?匯繼承父級元素的字體大小
????????????? ?IE瀏覽器不支持em
rem????????與em類似? ??
????????????? ?會繼承根元素的字體大小
????????????? ?html{ font-size:62.5%; }?
查看全部 -
柵格布局
@media screen and (min-width: px) and (max-width: px){
}
查看全部 -
Bootstrap中的viewport(手機適配)
<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>標簽
.btn? Bootstrap基礎按鈕
.btn-default? ? ?默認按鈕
,btn-primary? ?主要按鈕
.btn-warning? 警告按鈕
.btn-info? ? ? ? ?信息按鈕
.btn-success? ?成功按鈕
.btn-danger? ? 報錯按鈕
.btn-link? ? ? ? ? 鏈接按鈕
.btn-lg? ? ? ? ? ? ?大按鈕
.btn-sm????????????小按鈕
.active????????????? 默認選中
.btn-block?????? 全屏按鈕
.disabled?????????禁止按鈕
查看全部 -
表單
<form class=""></form>
.form-inline
<div class=""></div>
.form-group
.has-success? 代表狀態
.has-warning
.has-error
<input? class="" />
.form-cotrol
.input-lg
.input-sm
<label class=""></label>
.sr-only 標簽消失
.control-label
查看全部 -
排版--表格
<table class=""></table>
.table 基礎表格效果
.table-striped? 斑馬線效果
.table-bordered? 邊框效果
.table-hover? 高亮效果（鼠標經過的變色效果）
<tr class=""></tr>? //表格顏色
.danger
.warping
.info
.success
.active
查看全部 -
排版--文本
.text-left? ?內容左置
.text-center? 內容居中
.text-right? ?內容右置
.text-lowercase? 內容變成小寫
.text-uppercase? 內容變成大寫?
.text- capitalize? 內容首字母變大寫
查看全部 -
Bootstrap 全局樣式的特點
????代碼整潔
????風格統一
????美觀易用
查看全部 -
字體圖標可以阿里 字體圖標不會失真查看全部
-
字體圖標，特殊形式的字體，可以使用字體樣式改變大小顏色查看全部
-
如果有兼容性問題 px寫在前面，rem寫在后面查看全部
舉報