前端（六）Bootstrap----（一）
目錄
a.HTML5 文檔類型 b.移動設備優先 c.排版與連接 d.佈局容器 e.柵格系統
6.1下載Bootstrap
步驟如下：
簡單解釋文件含義：
6.2基本模版
一個最簡單的 Bootstrap 頁面
<!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 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
6.3全局CSS樣式
a.HTML5 文檔類型
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
b.移動設備優先
Bootstrap是移動設備優先。
爲了確保適當的繪製和觸屏縮放，需要在 <head> 之中添加 viewport 元數據標籤。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移動設備瀏覽器上，通過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
c.排版與連接
normalize.css 爲了增強跨瀏覽器表現的一致性，否則我們需要手動設置padding，margin等初始條件。
下載地址：http://necolas.github.io/normalize.css/ 或 https://www.bootcdn.cn/normalize/
d.佈局容器
Bootstrap 需要爲頁面內容和柵格系統包裹一個 .contaniner 容器。
.container 類用於固定寬度並支持響應式佈局的容器。
<div class="container">
...
</div>
container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。
<div class="container-fluid">
...
</div>
e.柵格系統
簡介：
0. 包含在container裏面
1. 每一行（row）均分成12列（column）(col-x-y）（column必須放在row中)
2. 每一個標籤可以自定義佔的列數（col-x-y）
示例：
//pc端 佔1列 10列 1列 移動端 各佔4列
<div class="container">
<div class="row">
<div class="col-md-1 col-xs-4">佔1列</div>
<div class="col-md-10 col-xs-4">佔10列</div>
<div class="col-md-1 col-xs-4">佔1列</div>
</div>
</div>
水平排列：
參數：
媒體查詢：
/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，因爲這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */
/* 小屏幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }
我們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小範圍的屏幕大小之內。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
示例：
//顯示器的寬度小於400px,由紅變綠
<!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">
<title>媒體查詢</title>
<style>
.c {
height: 100px;
width: 100px;
}
.c1 {
background-color: red;
}
/*當打開網頁的設備是一個顯示器設備，並且顯示器的寬度小於400px時，使用下面的樣式*/
@media screen and (max-width: 400px) {
.c1 {
background-color: green;
}
}
</style>
</head>
<body>
<div class="c c1"></div>
</body>
<html>
響應式列重疊：
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example.</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example.</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>
列偏移：
使用 .col-md-offset-* 類可以將列向右側偏移。例如，.col-md-offset-4 類將 .col-md-4元素向右側偏移了4個列（column）的寬度。
示例：
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
嵌套列：
爲了使用內置的柵格系統將內容再次嵌套，可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12。
示例：
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
列排序：
通過使用 .col-md-push-*（向右） 和 .col-md-pull-*（向左） 類就可以很容易的改變列（column）的順序。
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
Less mixin 和變量：
a:變量
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
b:mixin
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
示例：
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>