TITLE：BootStrap學習筆記
BootStrap入門
1.主要內容
BootStrap模板
<!DOCTYPE html>
<html lang="en">
<head>
<!--設置當前HTML文件的字符編碼-->
<!--compatible兼容的，設置瀏覽器的兼容模式版本（讓IE使用最新的渲染引擎工作）-->
<!--聲明當前網頁在移動端瀏覽器展示的相關設置-->
<!--
viewport表示用戶是否可以縮放頁面
width指定視區的邏輯寬度
device-width指定視區寬度應為設備的屏幕寬度
initial-scale指令用於設置Web頁面的初始化縮放比例
initial-scale-1則將顯示未經縮放的Web文檔
-->
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
<title>Bootstrap基本的HTML模板</title>
<!--引入Bootstrap核心樣式表(CSS)文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<!--引入html5shiv.min.js讓瀏覽器可以識別HTML5的新標簽-->
<!--引入respond.min.js讓低版本瀏覽器可以使用CSS3的媒體查詢-->
<!--[if It IE 9]>
<script src="html5shiv/html5shiv.min.js"></script>
<script src="Respond/respond.min.js"></script>
<![endif]-->
<!--自己寫的CSS樣式文件放head最下面-->
</head>
<body>
<div><h1>Hello,world!</h1></div>
<!-- Bootstrap的所有JS組件都是依賴jQuery的，所以必須放在前邊-->
<script src="js/jquery.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。-->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--自己寫的js文件放在body最下面-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap基本的HTML模板</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div><h1>Hello,world!</h1></div>
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
2.安裝和使用
參考API：http://v3.bootcss.com/css/
3.布局容器和柵格網格系統
// 做一個頁面最先要做一個布局
3.1.布局容器
1、.container 類用於固定寬度並支持響應式布局的容器
// 固定寬度，會有留白
<div class="container">
...
</div>
2、.container-fluid 類用於100% 寬度，占據全部視口（viewport）的容器
<div class="container-fluid">
...
</div>
3.2.柵格網格系統
BootStrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。柵格系統用於通過一系列的行（row）或列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。
網格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12份（也有平分成24份或32份，但12份是最常見的），再調整內外邊距，最后結合媒體查詢，就制作出來強大的響應式網格系統。BootStrapu框架中的網格系統就是將容器平分成12份。
注意：網格系統必須使用到CSS
container、row、xs（xsmall phones），sm（small tablets），md（middle desktops），lg（laege desktops），即
超小屏（自動），小屏（750px），中屏（970px）和大屏（1170px）
數據行（.row）必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內距（padding）。
在行（.row）中可以添加列（.column），只有列（column）才可以作為行容器（.row）的直接子元素，但列數之和不能超過平分的總列數，比如12。如果大於12，則自動換到下一行。
具體內容應當放置在列容器之內。
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
</div>
3.2.1.列組合
列總數不能超過12，大於12則自動換刀下一行
3.2.2.列偏移
3.2.3.列排序
改變列的方向，就是改變左右浮動
4.常用樣式
4.1.排版
4.1.1.標題
對h1~h6的標題效果進行覆蓋，提供勞務對應的類名，為非標題元素設置樣式
副標題 small標簽 或 .small類名
4.1.2.段落
4.1.3.強調
定義了一套類名，強調類名，強調類都是通過顏色來表示強調
.text-muted：提示，使用淺灰色
.text-primary：主要，使用藍色
.text-success：成功，使用淺綠色
.text-info：通知信息，使用淺藍色
.text-warning：警告，使用黃色
.text-danger：危險，使用褐色
4.1.4.對齊
通過定義四個類名來控制文本的對齊風格
.text-left：左對齊
.text-center：居中對齊
.text-right：右對齊
.text-justify：兩端對齊
4.2.代碼
4.3.表格
4.4.表單控件
什么是表單？
表單的主要功能是用來與用戶做交流的一個網頁控件，包括：文本輸入框、下拉選擇框、復選按鈕、文本域和按鈕等
4.4.1.文本框、下拉框與文本域
文本框
原生
<input type="text" />
BootStrap
form-control 表單元素的樣式
.input-lg .input.sm 表單控件的大小
<input type="text" class="form-control"/><!--但是會占一整行-->
<!--可行的是，-->
<div class="row">
<div class="col-md-3">
<input type="text" class="form-control"/>
</div>
</div>
下拉框
原生
<select>
<option>請選擇城市</option>
<option>上海</option>
<option>北京</option>
</select>
BootStrap
文本域
原生
<textarea></textarea>
BootStrap