bootstrap的概述與入門案例

Bootstrap簡介

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

是基于HTML、CSS、Javascript的一個簡潔、靈活的開源框架，便于開發人員隨時上手

目前版本 V3

Bootstrap受歡迎的原因

快速制作響應式的網頁來適配各種終端

開發簡單、方便

移動先行

代碼開源

代碼有良好的規范

Bootstrap的使用場景

新手入門

開發環境（webstorm）

引入Bootstrap框架文件

壓縮處理文件bootstrap.min.css，bootstrap.min.js

使用 Bootstrap 中文網提供的免費 CDN 加速服務

Bootstrap架構

9.2.2.柵格系統布局網頁結構

柵格系統

柵格系統是通過一系列的行（row）與列（column）的組合來創建頁面的布局，設置的內容就可以放在這些創建好的布局中

實現原理

通過定義容器的大小，平分為12份

調整內外邊距

結合媒體查詢

一行數據（row）必須包含在 .container中，以便為其賦予合適的對齊方式和內邊距

柵格系統的使用

列組合

列偏移

列嵌套

列排序

響應式柵格

9.2.3.CSS全局樣式

CSS全局樣式又稱為CSS布局

是Bootstrap三大核心內容的基礎，即基礎的布局語法

包括

基礎排版（Typography）

表單（Forms）

按鈕（Buttons）

圖片（Images）

… … 等

基礎排版

標題

頁面主體

強調文本

列表

表單：內聯表單、橫向表單、驗證提示狀態、表單     控件尺寸

按鈕

響應式圖片和3種不同圖片的形狀