bootstrap的概述與入門案例
Bootstrap簡介
來自Twitter,是目前最流行的前端框架
是基于HTML、CSS、Javascript的一個簡潔、靈活的開源框架,便于開發(fā)人員隨時上手
目前版本 V3
Bootstrap受歡迎的原因
快速制作響應(yīng)式的網(wǎng)頁來適配各種終端
開發(fā)簡單、方便
移動先行
代碼開源
代碼有良好的規(guī)范
Bootstrap的使用場景
新手入門
開發(fā)環(huán)境(webstorm)
引入Bootstrap框架文件
壓縮處理文件bootstrap.min.css,bootstrap.min.js
使用 Bootstrap 中文網(wǎng)提供的免費 CDN 加速服務(wù)
Bootstrap架構(gòu)
9.2.2.柵格系統(tǒng)布局網(wǎng)頁結(jié)構(gòu)
柵格系統(tǒng)
柵格系統(tǒng)是通過一系列的行(row)與列(column)的組合來創(chuàng)建頁面的布局,設(shè)置的內(nèi)容就可以放在這些創(chuàng)建好的布局中
實現(xiàn)原理
通過定義容器的大小,平分為12份
調(diào)整內(nèi)外邊距
結(jié)合媒體查詢
一行數(shù)據(jù)(row)必須包含在 .container中,以便為其賦予合適的對齊方式和內(nèi)邊距
柵格系統(tǒng)的使用
列組合
列偏移
列嵌套
列排序
9.2.3.CSS全局樣式
CSS全局樣式又稱為CSS布局
是Bootstrap三大核心內(nèi)容的基礎(chǔ),即基礎(chǔ)的布局語法
包括
基礎(chǔ)排版(Typography)
表單(Forms)
按鈕(Buttons)
圖片(Images)
… … 等
基礎(chǔ)排版
標題
頁面主體
強調(diào)文本
列表
表單:內(nèi)聯(lián)表單、橫向表單、驗證提示狀態(tài)、表單 控件尺寸
按鈕
響應(yīng)式圖片和3種不同圖片的形狀
評論列表