2021.7.8今日小結
今天繼續學習了Bootstrap 表格
利用table樣式類來定義基本表格樣式
table-striped增加一條斑馬線條紋。
table-bordered為表格的每個單元格新增邊框。
table-hover指標懸停在表格的某一行上時會出現淺灰色背景，即對懸停狀態給出響應。
Bootstrap為表格提供了五種狀態的樣式類，通過這些狀態類可以改變表格的行或單元格的背景顏色。
active:表示當前活動資訊，應用滑鼠懸停背景顏色。
info:表示普通訊息，應用背景為藍色。
success:表示一個成功的或積極的動作，應用背景為綠色。
warning:表示一個需要注意的警告，應用背景為黃色。
danger:表示一個危險的或潛在的負面動作，應用背景為紅色。
按鈕
btn:為按鈕新增基本樣式。
btn-default:預設/標準按鈕。
btn-primary:原始按鈕樣式。
btn-success:表示成功的動作。
btn-info:可用於要彈出資訊的按鈕。
btn-warning:表示需要謹慎操作的按鈕。
btn-danger:表示-個危險動作的按鈕操作。
btn-link:讓按鈕看起來像個連結(仍然保留按鈕行為)。
btn-lg:製作大按鈕。
btn-sm:製作小按鈕。
btn-xs:製作超小按鈕。
btn-block:塊級按鈕(拉伸至父元素100%的寬度)。
active:按鈕啟用狀態。當按鈕處於啟用狀態時，將呈現為被按壓的外觀(深色的背景、深色的邊框、陰影)。
disabled:按鈕禁用狀態。當按鈕處於禁用狀態時，顏色會變淡50%，失去按鈕行為。
圖片
img-rounded：新增border-radius:6px 來獲得圓角圖片
img-circle：新增border-radius：50% 來讓整個圖形變成圓形
img-thumbnail：新增一些內邊距和灰色的邊框
img-responsive：樣式類來讓圖片支援響應式設計
工具類
1、情景文字顏色
<p class="text-info">...</p>
<p class="text-danger">...</p>
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-warning">...</p>
2、情景背景顏色
<p class="bg-danger">...</p>
<p class="bg-info">...</p>
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-warning">...</p>
表單佈局
1、基本表單
fieldset、legend、label標籤
form-control樣式類：顯示的寬度會變成100%，並且placeholder屬性顏色都設定成#999999.
2、內聯表單
<body>
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="sr-only">名稱</label>
<input style="width: 200px" class="form-control" type="text" placeholder="請輸入使用者名稱">
</div>
</form>
</div>
</body>
3、水平表單
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="email" id="inputEmail3" class="form-control" placeholder="請輸入你的郵箱地址">
</div>
</div>
表單驗證樣式
1、顏色提示
has-warning警告狀態，黃色
has-error錯誤狀態，紅色
has-success成功狀態，綠色
2、圖示提示
has-feedback
form-control-feedback
3、文字提示
在input後面新增一個span標籤，即可實現文字提示
輸入框組
1.基本用法
要在輸人框的前面或後面新增內容，首先建立一個帶有"input-group"樣式類的<div>容器，然後在這個<div>容器中把要前置或後置的內容放到"input- group-addon"或"input-group-btn"的<span>標籤中，再把<span>標籤放到<input>元素前面或者後面。