前端框架Bootstrap--輔助類和響應式工具

Paste_Image.png
一笛厦、輔助類

Bootstrap在布局方面提供了一些細小的輔助樣式赁还,用于文字顏色以及背景色的設置旨枯、顯示關閉圖標等等趟佃。

  1. 情景文本顏色
    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>

例子

Paste_Image.png

引入bootstrap樣式前

Paste_Image.png

引入bootstrap樣式后

Paste_Image.png
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>

例子

Paste_Image.png

引入bootstrap樣式前

Paste_Image.png

引入bootstrap樣式后

Paste_Image.png
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>
例子

Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png

//超小屏幕激活顯示
<div class=”visible-xs-block a”>Bootstrap</div>

//超小屏幕激活隱藏
<div class=”hidden-xs a”>Bootstrap</div>
注:對于顯示的內容,有三種變體域滥,分別為:block纵柿、inline-block、inline

例子
大屏幕時結果:

Paste_Image.png

超小屏幕時結果:

Paste_Image.png

本文作者lilyping
越努力启绰,越幸運
原文鏈接:http://www.reibang.com/u/3908e601f4ec
微信公眾號:BestLilyPing
github:https://github.com/lilyping
Demos源碼地址:https://github.com/lilyping

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末昂儒,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子委可,更是在濱河造成了極大的恐慌渊跋,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件着倾,死亡現場離奇詭異拾酝,居然都是意外死亡,警方通過查閱死者的電腦和手機卡者,發(fā)現死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門微宝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人虎眨,你說我怎么就攤上這事∠庹” “怎么了嗽桩?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長凄敢。 經常有香客問我碌冶,道長,這世上最難降的妖魔是什么涝缝? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任扑庞,我火速辦了婚禮,結果婚禮上拒逮,老公的妹妹穿的比我還像新娘罐氨。我一直安慰自己,他們只是感情好滩援,可當我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布栅隐。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪租悄。 梳的紋絲不亂的頭發(fā)上谨究,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天,我揣著相機與錄音泣棋,去河邊找鬼胶哲。 笑死,一個胖子當著我的面吹牛潭辈,可吹牛的內容都是我干的鸯屿。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼萎胰,長吁一口氣:“原來是場噩夢啊……” “哼碾盟!你這毒婦竟也來了?” 一聲冷哼從身側響起技竟,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤冰肴,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后榔组,有當地人在樹林里發(fā)現了一具尸體熙尉,經...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年搓扯,在試婚紗的時候發(fā)現自己被綠了检痰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡锨推,死狀恐怖铅歼,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情换可,我是刑警寧澤椎椰,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站沾鳄,受9級特大地震影響慨飘,放射性物質發(fā)生泄漏。R本人自食惡果不足惜译荞,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一瓤的、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吞歼,春花似錦圈膏、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽桥帆。三九已至,卻和暖如春慎皱,著一層夾襖步出監(jiān)牢的瞬間老虫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工茫多, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留祈匙,地道東北人。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓天揖,卻偏偏與公主長得像夺欲,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子今膊,可洞房花燭夜當晚...
    茶點故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內容

  • 一些阅、響應式網頁 一個頁面,可以根據瀏覽設備的不同斑唬,以及特性的不同市埋,而自動改變布局、大小等 響應式網頁的三個特征1)...
    掙脫吧小白閱讀 851評論 0 3
  • 一.文本1)對齊方式text-left 文本左對齊 =======> text-align:...
    lovelydong閱讀 2,326評論 0 7
  • 一恕刘、響應式網頁 一個頁面缤谎,可以根據瀏覽設備的不同,以及特性的不同褐着,而自動改變布局坷澡、大小等 響應式網頁的三個特征 1...
    云音流閱讀 2,806評論 0 2
  • 人生就是一個試錯的過程,你選擇不去選擇含蓉、隨波逐流频敛,你不會錯,但也只能平庸馅扣。你一旦去主動選擇斟赚,你就要做好承擔出錯的準...
    更好的Anne閱讀 385評論 0 0
  • 因為你我的青春與世界溫暖相擁
    爽朗的記憶歸零閱讀 110評論 0 1