演示代碼較多,可以複製進行操作演示,但要注意加載的文件需要根據自己電腦的文件路徑進行加載!!!
列表(list):
list-unstyled:無樣式列表
list-inline:內聯樣式列表
列表組:
ul:list-group
li:list-group-item列表項公共樣式
list-group-item-[danger|warning|info|success]列表具體
樣式;
代碼演示:=>
Bootstrap
列表樣式
無樣式列表
- 小碗麵
- 宮保雞丁
- 三瓶啤酒
- 醉三鮮
內聯樣式列表
- 冰箱
- 電視
- 洗衣機
- 微波爐
- 櫥櫃
列表組
- 第一篇博客
789456
- 第二篇博客
689456
- 第三篇博客
589456
489456第四篇博客
class="badge">389456
----------------------
徽章(badge):
----------------------
表格(table):
table-responsive:表格自適應(聲明在表格父元素中),指如果頁面的寬度
小於表格本身的寬度,則父元素展示水平方向的滾動條;
table:表格的公共樣式;
table-bordered:邊框樣式;
table-condensed:緊湊行高;
table-striped:斑馬線;
table-hover:鼠標滑過行(tr),高亮顯示;
代碼演示:=>
Bootstrap
表格！
ID
用戶名
郵箱
操作菜單
1
張三丰
[email protected]
2
張敏
[email protected]
3
張翠山
[email protected]
----------------------
表單(form):
sr-only:隱藏元素,只在屏幕閱讀器顯示(screen reader only)
表單樣式:
form-inlink:內聯樣式
form-horizontal:水平表單
form-group:包裹單個表單元素
文子標題:label.control-label
表單元素:form-control
提示消息:span.help-block
代碼演示:=>
Bootstrap
表單樣式
形式一:默認表單樣式
用戶名:
用戶名必須填寫
密碼:
class="form-control">
密碼必須填寫
七天免密碼登錄(記住我)
形式二:內聯表單
用戶名:
密碼:
class="form-control" placeholder="請輸入密碼">
七天免密碼登錄(記住我)
形式三:水平表單樣式
用戶名:
class="form-control">
用戶名必須填寫
密碼:
class="form-control">
密碼必須填寫
七天免密碼登錄(記住我)
----------------------
圖標(glyphicon):
glyphicon 公共基礎樣式
glyphicon-{
user:用戶頭像
search:放大鏡
ok:對號
remove:叉號
....
}
官網:http://glyphicons.com/
------------------
警告框:
alert:公共樣式;
alert-[danger|info|success|warning]具體樣式
data-dismiss="alert":關閉菜單屬性
------------------
下拉菜單:
dropdown:外圍容器
data-toggle="dropdown":屬性選擇器
ul.dropdown-menu:下拉內容
:向下指向三角
dropdown-header:下拉菜單頭部
divider:分割線
------------------
摺疊插件:
菜單:
#內容id: 聲明觸發菜單操作的目標元素;
data-toggle="collapse":觸發菜單的屬性選擇器;
-------------------
手風琴(accordion):
面板組件+摺疊插件
代碼演示:=>
08_accordion
-------------------
導航條(navbar):
navbar: 公共樣式
navbar-[default|inverse]:具體樣式;
navbar-fixed-[top|bottom]:垂直定位;
navbar-[right|left]:水平定位;
navbar-header:漢堡包菜單(摺疊插件的觸發菜單)a.navbar-brand;
nav:->navbar-nav:下拉菜單樣式
代碼演示:=>
09_navbar
