03-----Bootstrap的介紹
一、Bootstrap的介紹
凡是使用過Bootstrap的開發者，都不在乎做這麽兩件事情：復制and粘貼。哈哈~，是的使用Bootstrap非常簡單，但是在復制粘貼之前，需要先對Bootstrap的用法一一熟悉之後我們才開始幹活！
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、javascript 的，它簡潔靈活，使得 Web 開發更加快捷。
它用於開發響應式布局、移動設備優先的 WEB 項目
二、Bootstrap的下載
2.1使用Bootstrap第一步，先將生成環境的Bootstrap下載下來。然後將下載，然後引入到自己建好的當前目錄中
2.2點到起步中的基本模板
將看到的整段代碼復制粘貼到建好的index.html文件中
官網明確表示：
使用此給出的這份超級簡單的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 重置樣式庫。
布局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。註意，由於 padding 等屬性的原因，這兩種 容器類不能互相嵌套。
.container 類用於固定寬度並支持響應式布局的容器。
<div class="container"> ... </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一樣的方式，給它相應的樣式
03-----Bootstrap的介紹