一笛厦、輔助類
Bootstrap在布局方面提供了一些細小的輔助樣式赁还,用于文字顏色以及背景色的設置旨枯、顯示關閉圖標等等趟佃。
- 情景文本顏色
text-muted 柔和灰
text-primary 主要藍
text-success 成功綠
text-info 信息藍
text-warning 警告黃
text-danger 危險紅
//各種色調的字體
<p class=”text-muted”>Bootstrap視頻教程</p>
<p class=”text-primary”>Bootstrap視頻教程</p>
<p class=”text-success”>Bootstrap視頻教程</p>
<p class=”text-info”>Bootstrap視頻教程</p>
<p class=”text-warning”>Bootstrap視頻教程</p>
<p class=”text-danger”>Bootstrap視頻教程</p>
例子
引入bootstrap樣式前
引入bootstrap樣式后
2.情景背景色
bg-primary 主要藍
bg-success 成功綠
bg-info 信息藍
bg-warning 警告黃
bg-danger 危險紅
//各種色調的字體
<p class=”bg-primary”>Bootstrap視頻教程</p>
<p class=”bg-success”>Bootstrap視頻教程</p>
<p class=”bg-info”>Bootstrap視頻教程</p>
<p class=”bg-warning”>Bootstrap視頻教程</p>
<p class=”bg-danger”>Bootstrap視頻教程</p>
例子
引入bootstrap樣式前
引入bootstrap樣式后
3.關閉按鈕
<button type=”button” class=”close”>×</button>
4.三角符號
<span class=”caret”></span>
5.快速浮動
<div class=”pull-left”>左邊</div>
<div class=”pull-right”>右邊</div>
注:這個浮動其實就是float,只不過使用了友多!important加強了優(yōu)先級牲平。
6.塊級居中
<div class=”center-block”>居中</div>
注:這個div可以放在需要清理浮動區(qū)塊的前面即可
8.顯示和隱藏
<div class=”show”>show</div>
<div class=”hidden”>hidden</div>
例子
//超小屏幕激活顯示
<div class=”visible-xs-block a”>Bootstrap</div>
//超小屏幕激活隱藏
<div class=”hidden-xs a”>Bootstrap</div>
注:對于顯示的內容,有三種變體域滥,分別為:block纵柿、inline-block、inline
例子
大屏幕時結果:
超小屏幕時結果:
本文作者lilyping
越努力启绰,越幸運
原文鏈接:http://www.reibang.com/u/3908e601f4ec
微信公眾號:BestLilyPing
github:https://github.com/lilyping
Demos源碼地址:https://github.com/lilyping