Bootstrap
1. 概念：
一個前端開發的框架，Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。
Bootstrap 是基於 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。
框架:
一個半成品軟件，開發人員可以在框架基礎上，在進行開發，簡化編碼。
好處：
1. 定義了很多的css樣式和js插件。我們開發人員直接可以使用這些樣式和插件得到豐富的頁面效果。
2. 響應式佈局。同一套頁面可以兼容不同分辨率的設備。
2. 快速入門
A.步驟
1. 下載Bootstrap
2. 在項目中將這三個文件夾複製
3. 創建html頁面，引入必要的資源文件
B.案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
響應式佈局
1、概述
A.含義
同一套頁面可以兼容不同分辨率的設備。
B.實現
依賴於柵格系統：將一行平均分成12個格子，可以指定元素佔幾個格子
2、步驟：
A.定義容器。相當於之前的table、
容器分類：
1. container：兩邊留白
2. container-fluid：每一種設備都是100%寬度
B.定義行。
相當於之前的tr 樣式：row
C. 定義元素。
指定該元素在不同的設備上，所佔的格子數目。樣式：col-設備代號-格子數目
設備代號：
1. xs：超小屏幕 手機 (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面顯示器 (≥992px)
4. lg：大屏幕 大桌面顯示器 (≥1200px)
D.注意：
1. 一行中如果格子數目超過12，則超出部分自動換行。
2. 柵格類屬性可以向上兼容。柵格類適用於與屏幕寬度大於或等於分界點大小的設備。
3. 如果真實設備寬度小於了設置柵格類屬性的設備代碼的最小值，會一個元素沾滿一整行。
BootStrap的常用樣式組件插件
1、柵格系統(體現出"響應式佈局")
A.將屏幕劃分成爲12個格子.
B.操作步驟
a.樣式"理解成爲table" .container (兩端留白) 或者 .container-fluid (寬度全屏)
b.樣式"理解成爲tr" .row
c.樣式"理解成爲td" .col-尺寸-佔格數目
C.尺寸的大小: (順序"英文字母順序lmsx")
a. lg 超大屏幕尺寸(超大)
b. md 中等屏幕尺寸(大)
c. sm 平板屏幕尺寸(中等)
d. xs 手機屏幕尺寸(小)
D.注意事項
a.設置的"佔格數目"超過12會前面的獨佔一行,後面的自動換一行
b.設置的"尺寸"大於設備的尺寸,會獨佔一行
c.設置的"尺寸"小於設備的尺寸,會向上兼容,也具備上面的效果.
E.列偏移
a.語法
col-尺寸-offset-佔格數目
b.含義
在原始的柵格當中,佔據幾個空白格子
2、按鈕樣式設置
A.位置
文檔: 全局CSS樣式 -> 按鈕
B.設置
<button type="button" class="btn btn-default">（默認樣式）Default</button>
<button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button>
3、圖片樣式設置
A.位置
文檔: 全局CSS樣式 -> 圖片
B.設置
<img src="..." alt="..." class="img-rounded"> <!-- 圓角矩形 -->
<img src="..." alt="..." class="img-circle"> <!-- 橢圓 -->
<img src="..." alt="..." class="img-thumbnail"> <!-- 相框 -->
4、表格
A.位置
文檔: 全局CSS樣式 -> 表格
B.設置
<table class="table table-hover"> <!-- 鼠標懸浮 -->
<table class="table table-bordered"> <!-- 帶有邊框 -->
<table class="table table-striped"> <!-- 條紋表格 -->
5、表單
A.位置
文檔: 全局CSS樣式 -> 表單
B.設置
水平表單
6、導航條
A.位置
文檔: 組件 -> 導航條
B.設置
<nav class="navbar navbar-inverse"> <!-- 反色設置"黑色" -->
7、分頁條
A.位置
文檔: 組件 -> 分頁
8、輪播圖
A.位置
文檔: JavaScript插件 -> Carousel
B.設置
data-interval="3000" <!-- 設置時間差 每隔多長時間替換一次 -->
旅遊網案例（圖片路徑自己修改）
Bootstrap HelloWorld
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="js/bootstrap.min.js"></script>
<style>
.paddtop{
padding-top: 10px;
}
.search-btn{
float: left;
border:1px solid #ffc900;
width: 90px;
height: 35px;
background-color:#ffc900 ;
text-align: center;
line-height: 35px;
margin-top: 15px;
}
.search-input{
float: left;
border:2px solid #ffc900;
width: 400px;
height: 35px;
padding-left: 5px;
margin-top: 15px;
}
.jx{
border-bottom: 2px solid #ffc900;
padding: 5px;
}
.company{
height: 40px;
background-color: #ffc900;
text-align: center;
line-height:40px ;
font-size: 8px;
}
</style>
![]()
旅遊精選
<div class="row paddtop">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
<div class="row jx">
<img src="img/icon_6.jpg">
<span>國內遊</span>
</div>
<div class="row paddtop">
<div class="col-md-4">
<img src="img/guonei_1.jpg">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節預售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
</div>
</div>
旅遊精選