BootStrap4 基礎(chǔ)模版

新建 HTML 頁(yè)面侣诺,復(fù)制下方代碼粘入

BootStrap4 基礎(chǔ)模版
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" >
  <title>Hello, world!</title>
</head>

<body>

<div class="container">
  <div class="row">

    <h1>添加上你的代碼</h1>

  </div>
</div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(e){

});
</script>
</html>

實(shí)例精選

很多很多的現(xiàn)成的例子:http://v3.bootcss.com/getting-started/#examples

表格

<div class="container">
  <table class="table table-striped">
    <tr><th>序號(hào)</th><th>姓名</th><th>年齡</th></tr>
    <tr><td>888</td><td>張三</td><td>1000</td></tr>
  </table>
</div>

加上table基礎(chǔ)樣式之后才會(huì)附加表格樣式

表格樣式
屬性 作用
table 基礎(chǔ)樣式
table-striped 條紋狀 表格
table-bordered 帶邊框的表格
table-hover 鼠標(biāo)懸停
table-condensed 緊縮表格
狀態(tài)類
屬性 描述 作用
active 活動(dòng)灰 鼠標(biāo)懸停在行或單元格上時(shí)所設(shè)置的顏色
success 成功綠 標(biāo)識(shí)成功或積極的動(dòng)作
info 提示藍(lán) 標(biāo)識(shí)普通的提示信息或動(dòng)作
warning 警告黃 標(biāo)識(shí)警告或需要用戶注意
danger 危險(xiǎn)紅 標(biāo)識(shí)危險(xiǎn)或潛在的帶來(lái)負(fù)面影響的動(dòng)作
響應(yīng)式表格

將任何 .table 元素包裹在 .table-responsive 元素內(nèi)益楼,即可創(chuàng)建響應(yīng)式表格,其會(huì)在小屏幕設(shè)備上(小于768px)水平滾動(dòng)寻行。當(dāng)屏幕大于 768px 寬度時(shí)霍掺,水平滾動(dòng)條消失。

按鈕

按鈕樣式可以添加給a標(biāo)簽拌蜘,但是避免使用除botton之外的其他標(biāo)簽杆烁,不同設(shè)備兼容性方面可能會(huì)出現(xiàn)問(wèn)題

<div class="container">
  <button type="button" class="btn btn-danger">按鈕</button>
</div>
預(yù)定義樣式

btn-default 默認(rèn)樣式 白
btn-primary 首選項(xiàng) 紫
btn-success 成功 綠
btn-info 一般信息 藍(lán)
btn-warning 警告 橙
btn-danger 危險(xiǎn) 紅
btn-link 鏈接 藍(lán)字下劃線

尺寸

btn-lg 大按鈕
btn-default 默認(rèn)尺寸
btn-sm 小按鈕
btn-xs 超小尺寸

<a href="" class="btn btn-default btn-lg" role="button">default</a>

通過(guò)給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度,而且按鈕也變?yōu)榱藟K級(jí)(block)元素简卧。

激活狀態(tài)
<button type="button" class="btn btn-primary btn-lg **active**">Primary button</button>
<a href="#" class="btn btn-primary btn-lg **active**" role="button">Primary link</a>
禁用狀態(tài)
<button type="button" class="btn btn-lg btn-primary" **disabled**>Primary button</button>

圖片

為圖片添加** .img-responsive **類可以讓圖片支持響應(yīng)式布局店展。
如果需要讓使用了 .img-responsive 類的圖片水平居中月褥,請(qǐng)使用 .center-block 類,不要用 .text-center。

圖片形狀
<img src="girl.jpg" class="img-rounded">
<img src="girl.jpg" class="img-circle">
<img src="girl.jpg" class="img-thumbnail">
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市掏呼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖绰播,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異尚困,居然都是意外死亡蠢箩,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)事甜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)谬泌,“玉大人,你說(shuō)我怎么就攤上這事逻谦≌剖担” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵邦马,是天一觀的道長(zhǎng)贱鼻。 經(jīng)常有香客問(wèn)我,道長(zhǎng)滋将,這世上最難降的妖魔是什么邻悬? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮随闽,結(jié)果婚禮上父丰,老公的妹妹穿的比我還像新娘。我一直安慰自己掘宪,他們只是感情好蛾扇,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著添诉,像睡著了一般屁桑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上栏赴,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天蘑斧,我揣著相機(jī)與錄音,去河邊找鬼须眷。 笑死竖瘾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的花颗。 我是一名探鬼主播捕传,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼扩劝!你這毒婦竟也來(lái)了庸论?” 一聲冷哼從身側(cè)響起职辅,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎聂示,沒(méi)想到半個(gè)月后域携,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡鱼喉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年秀鞭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扛禽。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡锋边,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出编曼,到底是詐尸還是另有隱情豆巨,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布灵巧,位于F島的核電站搀矫,受9級(jí)特大地震影響抹沪,放射性物質(zhì)發(fā)生泄漏刻肄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一融欧、第九天 我趴在偏房一處隱蔽的房頂上張望敏弃。 院中可真熱鬧,春花似錦噪馏、人聲如沸麦到。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)瓶颠。三九已至,卻和暖如春刺桃,著一層夾襖步出監(jiān)牢的瞬間粹淋,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工瑟慈, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留桃移,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓葛碧,卻偏偏與公主長(zhǎng)得像借杰,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子进泼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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

  • 引入方式 前端項(xiàng)目基于jquery去構(gòu)建:可以直接引入cdn庫(kù)蔗衡,bootstrap4.css纤虽、jquery.js、...
    ibob2012閱讀 3,225評(píng)論 0 1
  • 一.文本1)對(duì)齊方式text-left 文本左對(duì)齊 =======> text-align:...
    lovelydong閱讀 2,368評(píng)論 0 7
  • 一绞惦、入門(mén)準(zhǔn)備 二廓推、整體架構(gòu) A.整體架構(gòu) 1.CSS12柵格系統(tǒng):以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布已有以...
    ZyBlog閱讀 1,066評(píng)論 0 1
  • CSS全局樣式 概覽 移動(dòng)設(shè)備優(yōu)先 布局容器 1、container類用于固定寬度并支持響應(yīng)式布局的容器 2翩隧、co...
    VEN_64d6閱讀 1,405評(píng)論 0 1
  • 日復(fù)一日 每一天都是同樣的 說(shuō) 每天過(guò)著一樣的日子堆生,一天和一輩子沒(méi)有區(qū)別专缠,你的一生無(wú)從消遣 ,你的回憶變得刻薄 同...
    爾朵記閱讀 190評(píng)論 0 0