1. 程式人生 > >Bootstrap 3 主要css樣式(class)一覽

Bootstrap 3 主要css樣式(class)一覽

排版

.container//一個容器,寬度為“12”
.container-fluid//充滿視窗的容器
.row//行
.col-xs-*//寬度為*的列(手機螢幕)
.col-sm-*//寬度為*的列(平板螢幕)
.col-md-*//寬度為*的列(中等螢幕)
.col-lg-*//寬度為*的列(大螢幕)
.col-md-offset-*//列向右側偏移*
.col-md-push-3//列向下便偏移*

文字

//標籤
<h1> <h2> <h3> <h4> <h5> <h6>
.lead//突出顯示
.mark//高亮
.del//刪除線
.s//無用文字(刪除線)
.ins//插入文字(下劃線)
.u//下劃線
.small//小號文字
.strong//加粗
.em//斜體
.text-left//左對齊
.text-center//居中
.text-right//右對齊
.text-justify//充滿行
.text-nowrap//不換行
.text-lowercase//全小寫
.text-uppercase//全大寫
.text-capitalize//首字母大寫
.abbr//帶有解釋的縮略語
<address>//地址格式
<blockquote>//引用樣式
<footer>//引用來源
.blockquote-reverse//右對齊的引用格式
<ul><li>..</li>..</ul>//帶點符號的無序列表
<ol><li>..</li>..</ol>//帶數字符號的有序列表
.list-unstyled//無樣式列表
.list-inline//行內列表
<dl><dt>..</dt><dd></dd>..</dl>//描述列表
.dl-horizontal//同行描述列表
<code>//小程式碼塊
<pre>//大程式碼塊
<var>//數學變數
<samp>//結果

樣式

<table> .table //表格
.table-striped//表格斑馬條紋樣式
.table-bordered//表格邊框樣式
.table-hover//表格懸停樣式
.table-condensed//表格緊縮
.active//表格活動樣式
.success//表格積極樣式
.info//表格提示樣式
.warning//表格表格警告樣式
.danger//表格危險樣式
.form-group//表單樣式
<select>下拉列表樣式
.readonly//只讀狀態
.btn//按鈕
.btn-default//預設按鈕樣式
.btn-primary//首選按鈕樣式
.btn-success//成功按鈕樣式
.btn-info//資訊按鈕樣式
.btn-warning//警告按鈕樣式
.btn-danger//危險按鈕樣式
.btn-link//連結按鈕樣式
.btn-lg//大按鈕樣式
.btn-sm//小按鈕樣式
.btn-xs//超小按鈕樣式
.btn-block//塊級按鈕
.active//已啟用按鈕
.img-rounded//圓角圖片
.img-circle//圓圖片
.img-thumbnail//帶框圖片