排版
概觀 (Overview)
.container 自適應寬度
.container-fluid 流動寬度

網格系統
.row 橫列
.offset-*-* 偏移(一個元素只有套用一個偏移,若在單一直欄加入2個以上偏移設定,會自動選擇最小的那個)
網格系統裝置寬度
col-xs-* < 576px
col-sm-* >= 576px < 768px
col-md-* >= 768px < 900px
col-lg-* >= 900px < 1200px
col-xl-* >= 1200px



內容
重置 (Reboot)
其他元素
<address> 地址
<abbr> 行內元素

文字排版
標題
<h1>~<h6> 可用h1~h6的標籤
.h1~.h6 當你想匹配某一標題的字體樣式,但不能直接使用 HTML 元素時,也可使用類別
自定義標題
<small>少2級的標題文本,顏色較淡
引用
blockquote標籤+.blockquote類別
<blockquote class="blockquote">
引用來源
<footer class="blockquote-footer">,並將來源名稱包在<cite>中

程式碼
行內程式碼
<code> 須注意避開 HTML 括號
多行程式碼
<pre> 建立預先格式化的文字,請注意避開任何括號,以正確設定區塊影響範圍。
若加上.pre-scrollable類別,當原始碼片段達到350px以上,便會顯示出卷軸
使用者輸入
<kbd> 顯示鍵盤按鍵的元素

圖片
.img-fluid 響應式圖片(較前的版本為.img-responsive)

表格 (Tables)
.table 表格樣式
.table-dark 深色背景淺色文本
.table-striped 條紋行
.table-bordered 帶框表格
.table-borderless 無框表格
.table-hover hover狀態
.table-responsive{-sm|-md|-lg|-xl} 響應式表格



元件
廣告大屏幕
.jumbotron 擴張填滿整個試圖寬度來展示部分內容
.jumbotron-fluid讓廣告屏占滿螢幕寬度、不帶有圓角

按鈕
.btn
當在用於觸發頁面內功能(例如折疊內容)的a元素上使用按鈕時,而不是連結到新頁面或當前頁面中的部分,這些連結應該被賦予 role="button" 適當地傳達他們的目的到螢幕閱讀器等輔助性技術。

按鈕顏色
.btn-light 白底黑字
.btn-secondary 灰底白字
.btn-primary 靛底白字(豪華)
.btn-success 綠底白字(成功)
.btn-info 藍底白字(資訊)
.btn-warning 橘底白字(警告)
.btn-danger 紅底白字(危險)
.btn-link 白底藍字(連結)
.btn-dark 黑底白字

外框按鈕
.btn-outline-primary
.btn-outline-secondary
.btn-outline-success
.btn-outline-danger
.btn-outline-warning
.btn-outline-info
.btn-outline-light
.btn-outline-dark

按鈕大小
.btn-lg 大
.btn-sm 小
.btn-xs 更小



通用類別
文字 (Text)
文字對齊
.text-left 靠左
.text-center 置中
.text-right 靠右
.text-justify 左右對齊

文字大小寫
.text-lowercase 小寫
.text-uppercase 大寫
.text-capitalize 字首大寫

字體粗細和斜體
.font-weight-bold
.font-weight-bolder
.font-weight-normal
.font-weight-light
.font-weight-lighter
.font-italic

媒體物件
媒體列表
.list-unstyled 移除任何瀏覽器預設清單樣式
.list-inline-item 在li設置並排顯示(前版本為在ul設置.list-inline)

顏色
背景色
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

文字顏色
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50

浮動 (Float)
float-left
float-right
float-none
float-*-right響應式

arrow
arrow
    文章標籤
    bootstrap
    全站熱搜

    浣熊 發表在 痞客邦 留言(0) 人氣()