Bootstrap是Twitter推出的一個(gè)開源的用于前端開發(fā)的工具包。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā),是一個(gè)CSS/HTML框架。
bootstrap如何使用
Bootstrap中內(nèi)置了一套響應(yīng)式的, 移動(dòng)優(yōu)先的流式柵格系統(tǒng), 隨著不同的設(shè)備, 不同的平臺. 或者窗口大小(viewport), 根據(jù)他們的不同系統(tǒng)會自動(dòng)的分成12份. 也就是說, 柵格系統(tǒng)是通過一系列的行和列來組成我們需要的頁面, 然后把你需要的內(nèi)容放在這些的布局中.在使用柵格系統(tǒng)的時(shí)候, 需要注意的是: 需要在使用.row(行的意思)的外層使用 .container 為的是, 在賦值時(shí)給出合適的排列(aligment)和內(nèi)補(bǔ)(padding).
舉個(gè)例子: 一行 其中包含3個(gè)內(nèi)容 分別占屏幕的25%, 50%, 25%. 我們要在超小屏幕設(shè)備-手機(jī)上使用. 那么就要寫成12的3, 6, 3. 具體代碼看圖片, 這里的效果圖, 為了效果加上了一個(gè)well的class. 只是為了演示效果, 能夠看清除.
為了有一個(gè)很好的學(xué)習(xí)東西, 讓你看一下表格的創(chuàng)建. 就是這么的簡單, 只需要在table上, 填寫一個(gè)class為.table的樣式即可生成一個(gè)很好很實(shí)用的表格. 其實(shí), 這些都是別人提前建立好的頁面顯示效果, 就是不用自己再去寫一些簡單的css效果. 多練. 多使用它就屬于你.
在給出一個(gè)只有簡單的帶有導(dǎo)航欄的頁面. 該頁面, 理解透了, 這個(gè)東西你就算學(xué)會了, 剩下的就是用什么查一下文檔就拿來用了,
- PC官方版
- 安卓官方手機(jī)版
- IOS官方手機(jī)版