bootstrap框架的使用介紹
一.什么是 Bootstrap 框架？
Bootstrap 框架是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。
二.怎么使用
先下載庫並安裝到環境中
注意：bootstrap框架動態效果是基於jQuery的 也就意味着你在使用bootstrap的時候要提前先導入jquery,可以提前在seetings中設置好默認
這是第一種將文件下載到本地中的方式，第二種可以直接從bootcdn中獲取鏈接
這樣就可以調用bootstrap里面的框架了
1、全局CSS樣式
1、布局容器
1、左右留白的頁面框架 container
<div class="container">
......
</div>
2、全部占滿瀏覽器窗口的容器框架 container-fluid
<div class="container-fluid">
......
</div>
2、柵格系統
在布局容器內創建頁面布局
1、先用row來划分行，一行默認是12份
2、再用col-**-數字，來划定份數
3、可以通過柵格系統控制在多種不同尺寸屏幕展示效果相同
手機：col-xs-數字
平板：col-sm-數字
電腦：col-md-數字
超大屏幕：col-lg-數字
各種類參數可以疊加使用
4、可以控制划分的份數左右移動用，col-md-offset-數字，從左往右移幾份
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">這是占了6個柵格，在中間</div>
<div class="col-md-6 ">這是占了6個柵格，在左邊</div>
<div class="col-md-4 col-sm-4 col-xs-4">占了4個柵格</div>
<div class="col-md-4 col-xs-4 col-md-offset-8 col-xs-offset-8">這是占了4個柵格，在右邊</div>
</div>
</div>
3、排版
設置副標題：small
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
4、對齊
左對齊：text-left
居中對齊：text-center
右對齊：text-right
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
5、改變大小寫
全部大寫：text-lowercase
全部小寫：text-uppercase
首字母大寫：text-capitalize
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
6、列表
無樣式列表 (大列表無樣式，小列表下有點序號)：list-style
<ul class="list-unstyled"> <li>...</li> </ul>
內聯列表（將所有元素放在一行）：list-inline
<ul class="list-inline"> <li>...</li> </ul>
7、用戶輸入
用<kbd>標簽標示用戶輸入的內容
<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
8、表格
基本帶邊框：table
條紋帶表格：table-striped
帶邊框表格：table-bordered
鼠標懸停：table-hover
設置顏色：active(懸停在單元格上的顏色)、success(淡綠色)、danger(淡紅色)、warning(淡黃色)、info(淡藍色)、primary(無色)
9、表單
所有的表單標簽一般設置設置form-control類
10、按鈕
可以為a、button、input標簽添加button類，btn btn-default
按鈕顏色：btn-default（默認樣式樣式）、btn-danger（紅色）、btn-primary（藍色）、btn-success（綠色）、btn-info（淡藍色）
按鈕尺寸：btn-lg（大按鈕）、btn-sm（小按鈕）、btn-xs（超小按鈕）
禁用按鈕：disabled='disabled'
<p> <button type="button" class="btn btn-danger btn-lg">（大按鈕）Large button</button> </p> <p> <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-primary btn-xs" disabled>禁用（超小尺寸）Extra small button</button> </p>
11、圖片
響應式圖片（讓圖片更好的縮放）：img-responsive
圖片形狀：img-rounded（方形）、img-circle（圓形）、img-thumbnail（四邊留白方形）
<img src="..." alt="..." class="img-responsive img-rounded"> <img src="..." alt="..." class="img-responsive img-circle"> <img src="..." alt="..." class="img-responsive img-thumbnail">
12、顏色
給文本加顏色
<p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p>
給背景加顏色
<p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p>
13、浮動
向左浮動：pull-left
向右浮動：pull-right
14、讓內容居中
center-block
2、組件
組件中包括圖標、下拉框、導航條、警告框、彈出框、分頁、進度條等等
圖標可在圖標庫中找到對應的圖標使用其代碼前需要先下載該庫到本地后導入，之后直接找到相應的圖標復制代碼就好，圖標庫fontawesome
3、JavaScript插件
JavaScript插件中包括js代碼樣式有：模態框、下拉菜單、滾動監聽、標簽頁、彈出框、警告框、按鈕等等
其中警告框、彈出框可以用 SweetAlert
具體使用方式可以在官網中查看
三.Font Awesome的使用介紹
font awesome是一套字體和圖表的擴建，當我們在用bootstrap發現圖表不夠用時可以使用這個
SweetAlert可以美化bootstrap的彈框，具有更多的風格並且與bootstrap完美兼容
導入到文件中即可
