1、Bootstrap的介紹
凡是使用過Bootstrap的開發者，都不在意作這麼兩件事情：複製and粘貼。哈哈~，是的使用Bootstrap很是簡單，可是在複製粘貼以前，須要先對Bootstrap的用法一一熟悉以後咱們纔開始幹活！javascript
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、javascript 的，它簡潔靈活，使得 Web 開發更加快捷。css
它用於開發響應式佈局、移動設備優先的 WEB 項目html
2、Bootstrap的下載
2.1使用Bootstrap第一步，先將生成環境的Bootstrap下載下來。而後將下載，而後引入到本身建好的當前目錄中前端
2.2點到起步中的基本模板java
將看到的整段代碼複製粘貼到建好的index.html文件中bootstrap
官網明確表示： 使用此給出的這份超級簡單的HTML模板，或者修改這些實例。咱們強烈建議你對這些實例按照本身的需求進行修改，而不要簡單的複製、粘貼
Bootstrap支持移動設備優先
也就是說使用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">
Bootstrap重置樣式
爲了加強跨瀏覽器表現的一致性，咱們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。echarts
佈局容器
Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套。框架
.container 類用於固定寬度並支持響應式佈局的容器。
<div class="container"> ... </div>
.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。
<div class="container-fluid"> ... </div>
柵格系統
柵格系統的鼻祖是 https://960.gs/.
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列
柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。下面就介紹一下 Bootstrap 柵格系統的工做原理：
柵格參數
使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在 」 .row 內。
一些常使用網站
阿里巴巴圖標庫網站：
若是想作圖表，那能夠去官網：http://echarts.baidu.com/或者https://chartjs.bootcss.com/
PS:仍是那句話，使用Bootstrap很是簡單，根據項目的需求適當去官網複製粘貼，而後根據需求更改本身的內容，若是想修改本身的樣式，能夠添加類，按照以前我們學習css同樣的方式，給它相應的樣式