什么是Bootstrap?
Bootstrap是一種標(biāo)準(zhǔn)化的響應(yīng)式頁(yè)面的解決方案,包含js,css的大型框架,采用的了媒體查詢的方式,主要通過(guò)設(shè)置css,和html的手段來(lái)制定頁(yè)面總體結(jié)構(gòu)在不同設(shè)備端的不同表現(xiàn),個(gè)人覺(jué)得這是一種''制式''化的做法,這樣的好處就是適合多人協(xié)作,減少開發(fā)周期,使得模板易制定,其最主要的核心思想展現(xiàn)在"柵格系統(tǒng)"上.
(Ps.對(duì)我提到的名詞不太理解的同學(xué)可以看我的專題文章補(bǔ)補(bǔ))
1,響應(yīng)式布局
環(huán)境配置
Bootstrap中文網(wǎng)
下載位置:http://v3.bootcss.com/getting-started/#download
注意下載:
下載.png
由于Bootstrap的源碼中,css文件采用的是less的寫入方式,因此需要預(yù)編譯才可以轉(zhuǎn)化為css,為了方便這里就推薦下載第一個(gè);
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery-3.1.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
記得下載jquery喲.
Bootstrap必須依賴jquery
Bootstrap與jquery.jpg
柵格系統(tǒng)
了解Bootstrap就先要了解其核心思想:"柵格系統(tǒng)",個(gè)人覺(jué)得你也可以將''柵格系統(tǒng)''看做"表格系統(tǒng)",因?yàn)樗扇×?em>行和列這樣的布局方式,
先看圖!
柵格系統(tǒng)的基本設(shè)定:
柵格系統(tǒng).PNG
柵格系統(tǒng)以''行''和''列''為單位,每一行最多12列最小是1列,行的寬度是由列寬撐開的,這里的列代表了你的div(或其他標(biāo)簽)的寬度,(Ps.這里你只要知道,一行可容納12列就好,而高度是由內(nèi)容撐開的,不必理會(huì))
列規(guī)則表.PNG
在看表的時(shí)候你一定感覺(jué)千萬(wàn)個(gè)wc,這是啥?
如果你沒(méi)有覺(jué)得wc,那么大神請(qǐng)移步,這是一個(gè)入門篇...
首先看表頭,它標(biāo)注了媒體查詢的最小寬度,其次留意class前綴一旦超過(guò)最小寬度就會(huì)觸發(fā),并到下一個(gè)設(shè)備的狀態(tài),可以先記住幾個(gè)簡(jiǎn)單的規(guī)則,幫助你理解表頭內(nèi)容,我們可以這樣理解:
在設(shè)備號(hào)非觸發(fā)狀態(tài)下都是獨(dú)占寬度的,一旦觸發(fā)就會(huì)保持所設(shè)置的寬度;
還不明白請(qǐng)看代碼:
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<--class="col-md-6"這是"中型設(shè)備臺(tái)式電腦"的設(shè)備號(hào),以及所占的列數(shù)-->
<--當(dāng)觸發(fā)md時(shí)將會(huì)為其設(shè)置跨6列的寬度,即全屏寬度的一半-->
<div class="col-md-6"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<--這是填充文檔-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
</div>
</div>
我們根據(jù)表格知道中型電腦的設(shè)備的屏幕是大于992px的,因此做出測(cè)試,紅色塊中是此時(shí)設(shè)備的寬,代碼也貼出
$(window).resize(function(){
let bodyW = $('body').width();
$('#windowWidth').html(bodyW);
})
</script> ```
當(dāng)我們的設(shè)備寬小于992px時(shí):**不會(huì)觸發(fā)col-md-6**
如果你注意到了兩邊的空白,請(qǐng)看表中的最**大容器寬度**
并且在未觸發(fā)的情況下,是默認(rèn)居中的
直到我們的設(shè)備寬度大于等于992px時(shí):才會(huì)觸發(fā)col-md-6:
當(dāng)然也包括了大型臺(tái)式機(jī)的屏設(shè)備寬度:
now!你已經(jīng)掌握了Bootstrap核心思想:''柵格系統(tǒng)''的基本概念了,Bootstrap的布局基本就基于''柵格系統(tǒng)'',當(dāng)然要學(xué)習(xí)的東西還很多,畢竟制式化的框架,要記的東西也比較多,但是把規(guī)則搞懂,萬(wàn)變不離其宗嘛,Bootstrap入門文章還會(huì)繼續(xù)更新**當(dāng)然如果這篇文章有幫到你,請(qǐng)不吝點(diǎn)贊,歡迎留言交流:)**