Bootstrap

Bootstrap是前端開發框架，特點有：

1. 響應式佈局，適應多平臺（柵格系統）；
2. 定義了許多全域性css樣式，使頁面好看。
3. 定義了許多元件，如：導航、下拉選單、分頁；

下載Bootstrap檔案，有三個資料夾js css fonts：

1. fonts是字型、圖示；
2. bootstrap.min.css是bootstrap.css的壓縮檔案

快速入門：

1. 在專案中複製Bootstrap的三個資料夾，並放入JQuery.js檔案。
2. 從官網複製Bootstrap頁面模板。
3. 從官網複製Bootstrap需要的元件。

響應式佈局

柵格系統：一行12個格子，可以指定不同平臺 佔用不同數量的格子。

步驟：

1. 定義容器：相當於table，容器有兩種
   • container：固定寬度，左右有留白
   • container-fluid：100%寬度
2. 定義行：相當於table的tr
3. 定義元素，指定不同裝置，所佔的格子的數量。
   • xs：手機 <768px
   • sm：平板 >=768px
   • md：普通電腦 >=992px
   • lg：大屏電腦 >=1200px

<div class="container">
	<div class="row">
		<div class="col-lg-4 col-sm-6">柵格1</div>
		<div class="col-lg-4 col-sm-6">柵格2</div>
		<div class="col-lg-4 col-sm-6 ">柵格3</div>
	</div>
</div>
 

全域性CSS樣式

1. 按鈕，主要是按鈕顏色好看了：

<button type="button" class="btn btn-primary">首選項</button>

2. 圖片可以隨著視窗縮放

<img src="img/banner_1.jpg" class="img-responsive">

元件

1. 導航條
2. 分頁條

從官網看

js外掛

• 輪播圖

從官網看