詳解Bootstrap使用基礎(chǔ)教程

2024-05-06 15:45:30

字體：大中小

供稿：網(wǎng)友

Bootstrap是用于快速開發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架，Bootstrap基于HTML、CSS、JavaScript而建成，那么讓錯(cuò)新技術(shù)頻道小編來給大家說說詳解Bootstrap使用基礎(chǔ)教程吧。

一：Bootstrap簡(jiǎn)介

　　Boostrap是一個(gè)非常受歡迎的前端開發(fā)框架，該框架極大的提高前端團(tuán)隊(duì)的開發(fā)效率。 Bootstrap對(duì)常見的CSS布局組件和JavaScript插件進(jìn)行了完整的封裝，使開發(fā)人員可以輕松使用。使用Bootstrap可以快速制作精美的響應(yīng)式頁面，并且兼容移動(dòng)端。

二：Bootstrap特性

　　提供一套完整的CSS插件豐富的預(yù)定義樣式表一組基于jQuery的JS插件表靈活的響應(yīng)式刪格系統(tǒng) 移動(dòng)先行基于Less和Sass開發(fā)。

三：使用Bootstrap

　1.　第一步：

　　到http://www.bootcss.com/下載最新的bootstrap。解壓后有三個(gè)文件夾，分別放置css，js和字體。 CSS和JavaScript文件分別有一個(gè)壓縮版，可以根據(jù)需要選擇一個(gè)版本。開發(fā)時(shí)使用未壓縮版，在發(fā)布時(shí)使用壓縮版本。

　2.固定模板代碼展示

你好，世界！

3.基本用法：

　　3.1整體框架-12柵格系統(tǒng)

　　bootstrap的核心是12柵格系統(tǒng)。 12柵格系統(tǒng)就是把網(wǎng)頁的內(nèi)容區(qū)域按照寬度平分為12份，網(wǎng)頁開發(fā)人員可以自由按份組合，方便網(wǎng)頁的布局，使排版看起來整齊規(guī)范。

　　bootstarp提供了一個(gè)名為container的樣式容器 .container是一個(gè)自動(dòng)居中，高度自適應(yīng)的樣式。用.container作為網(wǎng)頁內(nèi)容最外層的div樣式，可以輕松的實(shí)現(xiàn)12柵格的網(wǎng)頁布局。并且，這種12柵格系統(tǒng)是根據(jù)屏幕大小自適應(yīng)的，.container會(huì)自動(dòng)根據(jù)屏幕大小調(diào)整總寬度和柵格的平均寬度。

　　col-lg-n 最大列寬95px 在>=1200px像素的情況下將.container12等分每份寬度95px 其余情況寬度為100%

　　col-md-n 最大寬度78px; 在>=992px像素的情況下將.container12等分其余情況100%

　　col-sm-n 最大列寬60px 在>=768px像素的情況下將.container12等分其余情況100%

　　col-xs-n 列寬根據(jù)視口大小12等分在任何尺寸的屏幕下都將.container 12等分

　　3.2基礎(chǔ)樣式

　　　　（1）Bootstrap的h1-h6樣式取消了加粗，重新定義了上下外邊距 h1-h3 margin-top:20px; margin-bottom-10px; H3-h6 margin-top:10px; margin-bottom-10px;

　　　（2）定義了4個(gè)對(duì)齊方式的樣式，分別是.text-left, .text-center, .text-right,.text-justify .text-justify 英文字母的兩端對(duì)齊

　　　　（3）Bootstrap提供了五種默認(rèn)的顏色樣式，-primary 重點(diǎn)藍(lán)， -success成功綠，-info信息藍(lán) -warning 警告橙，-danger危險(xiǎn)紅

　　3.3btn組件+btn-group　　