bootstrap的概述與入門案例

bootstrap概述與入門案例

Bootstrap簡介

來自Twitter,是目前最流行的前端框架

基于HTML、CSS、Javascript的一個簡潔、靈活的開源框架,便于開發(fā)人員隨時上手

目前版本 V3

Bootstrap受歡迎的原因


快速制作響應(yīng)式的網(wǎng)頁來適配各種終端

開發(fā)簡單、方便

移動先行

代碼開源

代碼有良好的規(guī)范


Bootstrap的使用場景

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)的使用

列組合

列偏移

列嵌套

列排序

響應(yīng)式柵格


bootstrap的概述與入門案例

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種不同圖片的形狀