2021/6/11 Bootstarp v3 淺記
阿新 • • 發佈：2021-06-11
'''
佈局容器
.container 2-8-2 佈局，取其中8
.container-fluid 全域性佔滿空間
柵格系統
.row 將塊級標籤劃分12等份
.col-xs/sm/md/lg-n 設定本標籤佔據份數
.col-xs/sm/md/lg-offset-n 設定從左向右移動的份數，後面無用份數被填充
.col-xs/sm/md/lg-push-n 重新排版，設定距離左側的份數
.col-xs/sm/md/lg-pull-n 重新排版，設定距離右側的份數
xs/sm/md/lg 分別對應手機/平板/中等顯示器/大顯示器
排版
標題
.h1~h6 <h1~h6> 為行內元素新增.h1~h6可以作為標題使用
.small <small> 當存在標題標籤內部，作為副標題使用
頁面主題
<body>
<p>
均在原基礎上進行些微樣式調整
<p class="lead"> 文字突出
字型
<mark> .mark 高亮
<strong> 加粗
<em>/<cite>/<var> 斜體
<ins> 下劃線
<del> 刪除線
<small> 小文字字型
文字對齊
.text-left/justify/nowrap/right/center
文字左/左/左/右/居中對齊
文字大小寫
.text-lowercase/uppercase/capitalize
文字全小寫/大寫/每個單詞首字母大寫
文字顏色
.text-muted/primary/success/info/warning/danger
文字灰色/藍色/綠色/藍色/黃色/紅色
文字替換圖片
.text-hide 使用 .text-hide 類或對應的 mixin 可以用來將元素的文字內容替換為一張背景圖。
縮略語
<abbr title="滑鼠懸浮文字" class="initialism">
縮略語即文字字型下面出現下劃虛線，懸浮文字則出現title提示資訊
.initialism 用於設定縮略語字型略小
地址
<address>
引用
<blockquote> 任何HTML程式碼被包裹在blockquote中都會變現引用樣式
<footer> 文字前面出現一條中劃線（——xxx）
程式碼
<code> 用於包裹程式碼，呈現：文字紅色、背景淡紅
<kdb> 用於包裹使用者輸入，呈現：文字色白，背景純黑
<pre> 用於包括程式碼塊
.pre-scrollable 設定 max-height 為 350px ，並在垂直方向展示滾動條。
<var> 用於包裹變數，斜體
<samp> 用於包裹程式輸出內容
表格
基本樣式
.table 表格基本樣式，增加少量padding和水平方向的表格分隔線
.table-striped 為`<tbody>`內每一行增加斑馬條紋樣式，一淺一深
.table-bordered 為表格中每個單元格增加邊框
.table-hover 增加`<tbody>`中的每一行的滑鼠懸停狀態
.table-condensed 表格每個單元格的padding減半
狀態樣式
.active 暗灰色
.success 淡綠色
.info 淡藍色
.warning 淡黃色
.danger 淡紅色
響應式表格
.table-responsive <768PX 出現水平滾動條 >768PX 水平滾動條消失
表單
基本樣式
.form-inline form表單內所有元素均設為行內元素，存在於一行中，寬度最好>768PX，否則摺疊
.form-horizontal form表單內可以使用柵格系統進行佈局，form-group代表row
.form-group form-group內form子標籤得到相應的佈局
.form-group-lg 為 .form-horizontal 包裹的 label 元素和表單控制元件設定尺寸為大
.form-group-sm 為 .form-horizontal 包裹的 label 元素和表單控制元件設定尺寸為小
.form-control 設定該類的form子標籤，則寬度被設為100%
.sr-only 設定label標籤隱藏
.control-label 設定在form-horizontal內的label標籤排版靠右
文字域textarea
rows="行數" 設定textarea文字域可以顯示的行數
單選、多選框radio、checkbox
.disabled 禁止選項框選擇，不修改選項框樣式
disabled 禁止選項框選擇，修改選項框顏色暗淡
.radio 設定選項框單選為塊級標籤
.radio-inline 設定選項框單選為行內標籤
.checkbox 設定選項框多選為塊級標籤
.checkbox-inline 設定選項框多選為行內標籤
下拉選單select
對於標記了 multiple 屬性的 `<select> `控制元件來說，預設顯示多選項。
label
靜態控制元件
form-control-static 為 `<p> `元素新增 .form-control-static可以實現純文字與label放置同一行。
input
input預設存在焦點樣式
disabled input禁止（ps: .disabled對text、password等無用）
readonly input只讀
input尺寸控制
input-lg 大
input-sm 小
col-lg/sm-n 設定寬度
help-text
為input框下方增加一行幫助文字
<span class="help-block"></span>
校驗狀態
存在以下標籤內部的 .control-label、.form-control、.help-block 子標籤，都會被改變樣式
.has-success 淡綠色
.has-warning 淡黃色
.has-error 淡紅色
反饋圖示
反饋圖示（feedback icon）只能使用在文字輸入框`<input class="form-control">` 元素上。
.has-feedback 設定允許子類存在反饋圖示
<span class="glyphicon
glyphicon-ok/glyphicon-warning-sign/glyphicon-remove
form-control-feedback
"></span>
按鈕
a role="button"
btn
.close
btn-default
btn-success
btn-info
btn-warning
btn-danger
btn-primary
btn-link
btn-lg/sm/xs
btn-block
disabled
輔助類
情景文字顏色
text-muted/success/info/primary/warning/danger
灰色、綠、藍、深藍、黃、紅
情景背景顏色
bg-success/info/primary/warning/danger
關閉按鈕
×
三角符號
.caret
快速浮動
pull-left
pull-right
內容塊居中
center-block
取消浮動
clearfix
顯示、隱藏內容
show
hidden
sr-only sr-only-focusable
text-hide
響應式工具
針對性顯示
.visible-xs/sm/md/lg-*
*: block/inline/inline-block
針對性遮蔽
.hidden-xs/sm/md/lg
visible-print-*
*: block/inline/inline-block
hidden-print
'''