image.png
一敢茁、按鈕
image.png
按鈕類
.btn是用戶操作的入口元素宅荤，不同的顏色代表不同的情境含義
顏色在屏幕閱讀器上不可見，所以建議同時使用.sr-only來添加輔助說明
承載標簽可以是<a class="btn">瑞驱、<button>、<input type="button">清女、<input type="submit">
input標簽在一些瀏覽器上高度的兼容性不是很好钱烟，建議使用button標簽來創(chuàng)建按鈕。
1嫡丙、7種外觀
- 默認是灰色圓角背景拴袭，a連接就是藍色文本。
-
.btn-default, 白底黑邊框曙博。 -
.btn-primary拥刻，藍底白字, 主色。 -
.btn-success, 綠底白字, 表示成功父泳。 -
.btn-info, 淺藍底白字, 表示說明般哼。 -
.btn-warning, 橙底白字，表示警告惠窄。 -
.btn-danger, 紅底白字蒸眠，表示危險、錯誤杆融。 -
.btn-link楞卡， 表現(xiàn)為藍色文本鏈接。
2、4級按鈕大小
默認是普通大小蒋腮。
-
.btn-lg, 最大淘捡。 -
.btn-sm, 小按鈕。 -
.btn-xs, 超小按鈕池摧。
3焦除、塊級按鈕
-
.btn-block, 填滿父容器， 一般在移動端使用作彤。
4膘魄、按鈕狀態(tài)
-
.active, 激活狀態(tài)，相當于按下時的外觀宦棺。 -
.disabled, 禁用狀態(tài)瓣距，灰化黔帕，一般用在a標簽上代咸，因為 a標簽沒有 disabled 屬性。 -
disabled屬性成黄， 禁用狀態(tài)呐芥，在IE瀏覽器中可能有不可修改的自帶樣式。
<a>鏈接做為按鈕呈現(xiàn)時奋岁，它原有的跳轉(zhuǎn)功能并不能徹底的屏蔽思瘟，建議使用javascript:void(0)來規(guī)避這種需求。
二闻伶、圖片修飾
image.png
圖片的修飾主要是自適應(yīng)大小與邊框裁剪滨攻。
1、響應(yīng)父級寬度
實際上是控制圖片最大寬度不會超過父元素蓝翰，使用了 max-width: 100%, 它本身也會塊級化 display: block, 高度自動光绕。
-
.img-responsive, 如果寬度小于父元素，想要居中的話畜份，可以使用.center-block類诞帐，不能使用text-center, 因為它已經(jīng)塊級化了。 - 鑒于有時候圖片會過小爆雹，導(dǎo)致圖片不能填滿父元素停蕉，當有需求圖片始終要填滿父元素時，可以自定義一個
.img-fluid來實現(xiàn)钙态，不過高度會高低不齊慧起。
.img-fluid{
width: 100%;
}
- 對于圖片填滿父元素的一些需求，可以考慮轉(zhuǎn)換為背景或者使用
object-fit
2册倒、邊框裁剪
-
.img-rounded, 裁剪為圓角蚓挤。 -
.img-circle, 剪裁為圓形，如果不是正方形圖片會顯示為橢圓。 -
.img-thumbnail, 縮略圖模式屈尼，添加了淺邊框册着、小圓角、內(nèi)邊距脾歧。
