bootstrap(6)

1輸入框組

  • input-group:只能用于文本框<input>脉让,不能用于<select>和<textarea>。
  • input-group-addon:用于在<input>前后添加額外元素奈附,賦給一個(gè)<span>元素即可刁赦,注意:將input-group-addon和<input>元素包在input-group之中娶聘。
  • input-group-lg 和 input-group-sm可以改變輸入框組的尺寸。
  • input-group-btn:可以作為額外的元素的按鈕甚脉,應(yīng)該是作為<button>的父元素丸升。
Paste_Image.png
Paste_Image.png

2標(biāo)簽頁(yè)組

  • nav:標(biāo)簽頁(yè)的基類
  • nav-tabs:是標(biāo)簽頁(yè)的樣式
  • active:是標(biāo)簽頁(yè)的狀態(tài)類(當(dāng)前樣式)
  • nav-pills:膠囊式標(biāo)簽頁(yè)
  • nav-stacked :膠囊式標(biāo)簽頁(yè)堆放排列(垂直排列)
Paste_Image.png
Paste_Image.png

3路徑導(dǎo)航

  • breadcrumb 賦給ol、ul可以實(shí)現(xiàn)面包屑效果
  • active 賦給當(dāng)前欄目牺氨,當(dāng)前欄目不加鏈接
Paste_Image.png
Paste_Image.png

4縮略圖

  • thumbnail:賦給a元素狡耻,可以實(shí)現(xiàn)縮略圖樣式
  • caption:可以實(shí)現(xiàn)縮略圖標(biāo)題及描述
Paste_Image.png
Paste_Image.png

5分頁(yè)

.pagination:賦給ul元素可以實(shí)現(xiàn)分頁(yè)
.&laquo:上一頁(yè)
.&raquo:下一頁(yè)
.disabled:禁用狀態(tài)
.active:激活狀態(tài)
.pagination-lg:分頁(yè)大尺寸
.pagination-sm:分頁(yè)小尺寸
.pager:可以實(shí)現(xiàn)翻頁(yè)效果,上一頁(yè)猴凹、下一頁(yè)效果夷狰。

Paste_Image.png
Paste_Image.png

6導(dǎo)航欄

  • navbar:導(dǎo)航欄的基類,用于<nav>元素
  • navbar-default:導(dǎo)航欄默認(rèn)樣式精堕,用于<nav>元素
  • container:是<nav>的子元素孵淘,導(dǎo)航欄內(nèi)容都放入其中
  • navbar-header:導(dǎo)航欄頭部樣式
  • navbar-brand:設(shè)置品牌圖標(biāo)樣式
  • collapse:是折疊導(dǎo)航欄的樣式的基類
  • nav-collapse:是折疊導(dǎo)航欄樣式
  • nav:是導(dǎo)航欄的鏈接基類
  • navbar-nav:是導(dǎo)航欄的鏈接樣式
  • navbar-form:導(dǎo)航欄表單,可以使表單元素排在同一行
  • navbar-left 或 navbar-right:組件排列歹篓。導(dǎo)航鏈接瘫证、表單,按鈕或文本對(duì)齊
  • navbar-btn:對(duì)于不在<form>中的<button>元素庄撮,實(shí)現(xiàn)垂直對(duì)齊
  • navbar-text:對(duì)于導(dǎo)航欄的普通文本有了行距和顏色背捌,通常用于<p>元素
  • navbar-fixed-top:導(dǎo)航欄固定在頂部,用于<nav>元素洞斯,需要為<body>設(shè)置padding-top:70px
  • navbar-fixed-bottom:導(dǎo)航欄固定在底部毡庆,用于<nav>元素,需要為<body>設(shè)置padding-bottom:70px
  • navbar-static-top:導(dǎo)航欄靜止在頂部烙如,用于<nav>元素么抗,會(huì)隨著滾動(dòng)條移動(dòng)而消失
  • navbar-inverse:可以實(shí)現(xiàn)反色導(dǎo)航欄,用于<nav>元素
Paste_Image.png
Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末亚铁,一起剝皮案震驚了整個(gè)濱河市蝇刀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌徘溢,老刑警劉巖吞琐,帶你破解...
    沈念sama閱讀 221,430評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異然爆,居然都是意外死亡站粟,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門曾雕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來奴烙,“玉大人,你說我怎么就攤上這事「孜郑” “怎么了恰起?”我有些...
    開封第一講書人閱讀 167,834評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)趾牧。 經(jīng)常有香客問我检盼,道長(zhǎng),這世上最難降的妖魔是什么翘单? 我笑而不...
    開封第一講書人閱讀 59,543評(píng)論 1 296
  • 正文 為了忘掉前任吨枉,我火速辦了婚禮,結(jié)果婚禮上哄芜,老公的妹妹穿的比我還像新娘貌亭。我一直安慰自己,他們只是感情好认臊,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,547評(píng)論 6 397
  • 文/花漫 我一把揭開白布圃庭。 她就那樣靜靜地躺著,像睡著了一般失晴。 火紅的嫁衣襯著肌膚如雪剧腻。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,196評(píng)論 1 308
  • 那天涂屁,我揣著相機(jī)與錄音书在,去河邊找鬼。 笑死拆又,一個(gè)胖子當(dāng)著我的面吹牛儒旬,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播帖族,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼栈源,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了竖般?” 一聲冷哼從身側(cè)響起凉翻,我...
    開封第一講書人閱讀 39,671評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎捻激,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體前计,經(jīng)...
    沈念sama閱讀 46,221評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡胞谭,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,303評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了男杈。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丈屹。...
    茶點(diǎn)故事閱讀 40,444評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出旺垒,到底是詐尸還是另有隱情彩库,我是刑警寧澤,帶...
    沈念sama閱讀 36,134評(píng)論 5 350
  • 正文 年R本政府宣布先蒋,位于F島的核電站骇钦,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏竞漾。R本人自食惡果不足惜眯搭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,810評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望业岁。 院中可真熱鬧鳞仙,春花似錦、人聲如沸笔时。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)允耿。三九已至借笙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間右犹,已是汗流浹背提澎。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留念链,地道東北人盼忌。 一個(gè)月前我還...
    沈念sama閱讀 48,837評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像掂墓,于是被迫代替她去往敵國(guó)和親谦纱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,455評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 第5章 菜單君编、按鈕及導(dǎo)航 一跨嘉、下拉菜單 小伙伴們注意,在Bootstrap框架中的下拉菜單組件是一個(gè)獨(dú)立的組件吃嘿,根...
    凜0_0閱讀 4,983評(píng)論 0 66
  • bootstrap CSS# 一祠乃、容器.container 包裹其他元素div.row 必須放在.conta...
    貞貞姐閱讀 938評(píng)論 0 14
  • CSS全局樣式 概覽 移動(dòng)設(shè)備優(yōu)先 布局容器 1、container類用于固定寬度并支持響應(yīng)式布局的容器 2兑燥、co...
    VEN_64d6閱讀 1,404評(píng)論 0 1
  • 原文出處 http://blog.poetries.top/2016/11/19/bootstrap-review...
    程序員poetry閱讀 7,087評(píng)論 0 42
  • 本篇文章學(xué)習(xí)一些bootstrap3的一些基本元素的簡(jiǎn)單樣式亮瓷,這些基本元素為按鈕,文本降瞳,表格嘱支,表單和背景等蚓胸,一樣一...
    elkelk閱讀 1,253評(píng)論 0 1