bootstrap經常使用樣式整理

柵欄模式
container 把頁面切換成12格 xs sm md 分別用於 手機 平板 pc
文字效果
<u>下劃線</u> <del>刪除</del> <s> 中劃線</s>
段落效果
class ='text-lowercase'小寫 class ='text-uppercase'小寫 class='text-capitalized' 首字母大寫
對齊方式
class='text-left'左對齊 class='text-right'右對齊 class='text-center'中間對齊 class='text-justify'倆側對齊 class='text-nowrap'不換行api

代碼解析
<blockquote></blockquote>
引用
<cite></cite>
表格
普通表格
class='table'
條紋表格
class = 'table-striped'
帶邊框表格
class='table-bordered'
鼠標響應表格
class = 'table-hovered'
緊縮表格
class = 'table-condensed' ide

響應式
<div class="table-responsive"><table></table></div>spa

表單
小塊使用 class = 'form-group' 節點使用 class='form-control'
內聯表單
和表格的響應式同樣須要在外層加一個class = 'form-inline'的父級層
水平排列表單
內容和輸入框水平擺放,須要用到柵欄 父層div class='form-horizontal' 內部label col-md-3 input col-md-9code

input設置orm

禁用input
readOnly disabled
額外圖標
<div class='input-group'><span class='input-group-addon'>額外圖標</span></div>
button樣式
class = 'btn btn-default'無色 primary 深藍 success 綠色 ....和table同樣
注:a標籤一樣能夠假裝成button 可是diabled屬性須要寫在 class中 圖片

圖片
響應式圖片
class='img-responsive'
圓角圖片
class='img-rounded'
圓形圖片
class='img-circle'
帶框圖片
class='img-thumbnail'ip

顏色
表格tr/td顏色
class='active' hover顏色 success 綠色 info 藍色 warning 黃色 danger 紅色
button顏色
class = 'btn btn-default'無色 primary 深藍 success 綠色 ....和table同樣
文字顏色
class='text-success'....等
背景顏色
class='bg-success'ci

快速浮動
pull-left/pull-right
清除浮動
clearfix
顯示隱藏
class='show'/'hide'input

相關文章
相關標籤/搜索