一. 使用Bootstrap的准備

　　因為Bootstrap是基於JQuery的，所以導入Bootstrap前一定要先導入JQuery。

　　這里先用cdn的方式導入JQuery（用cdn要保證你有網，不然就沒用了）。

　　注意：無論用框架還是什么，都盡量先別用最新版的，因為最新版的Bug要是碰到了就很倒霉，舊版本相對來說比較穩定，我們不做第一個吃螃蟹的人。

1. 用cdn導入JQuery

　　1.1 打開BootCDN官網：https://www.bootcdn.cn/

　　1.2 點擊JQuery

　　1.3 選擇壓縮的版本，點擊復制標簽

　　1.4 打開pycharm的設置

　　1.5 修改創建HTML文件的模板，讓每次創建的HTML都自己用cdn導入JQuery

2. 關於Bootstrap代碼無提示的解決方式

　　沒有提示是因為瀏覽器沒有加載過Bootstrap。

1. 下載3.X版本-用於生產環境的Bootstrap（）
2. 解壓后css文件夾中只留一個bootstrap.min.css文件，其他全刪掉（min代表是壓縮的） 3. js文件夾中只留bootstrap.min.js文件，其他全刪掉 4. 將整個解壓的包復制到pycharm項目中 5. 用link和script標簽導入包中的css和js

　　這樣操作過之后，用cdn導入的都會有代碼提示了。

　 2.1 進入Bootstrap中文網：http://www.bootcss.com/

　　2.2 點擊中文文檔3

　　2.3 點擊下載

　　2.4 下載用於生產環境的Bootstrap

　　2.5 解壓后css文件夾中只留一個bootstrap.min.css文件，其他全刪掉（min代表是壓縮的）

　　2.6 js文件夾中只留bootstrap.min.js文件，其他全刪掉

　　2.7 將這個文件夾放入我們pycharm創建的項目中，需要使用的HTML文件中導入js和css即可。

注意：上面將js和css文件夾中刪除掉其他Js和css文件是為了方便，不然代碼提示的時候會有一堆提示。

　　　這樣操作之后按照cdn導入Bootstrap的方式就能正常提示代碼了。

3. 用cdn導入Bootstrap

　　3.1 打開BootCDN官網：https://www.bootcdn.cn/

　　3.2 點擊Bootstrap

　　3.3 找到3.x版本的Bootstrap（為什么不用新版本的理由同上，這里使用3.4.1版本），還是用壓縮版本

　　3.4 同導入JQuery的1.4步驟與1.5，不過這兩個標簽一定不能放在JQuery標簽前面。

二. Bootstrap的使用

1. 布局容器

<div class = 'container'></div>  //頁面兩邊留白，微博也是這種樣式
    <div class = 'container-fluid'></div>  //全屏，鋪滿瀏覽器
    //用bootstrap一定要先寫一個布局容器（上面兩個選一個，內容全寫在上面的div里面）
    
    <div class = 'container'>
        <div class = 'row'>  //一行，默認等分為12塊
            <div class = 'col-md-3'></div>  //col-md-占的塊數
            <div class = 'col-md-3'></div>
            <div class = 'col-md-3'></div>
            <div class = 'col-md-3'></div>  //每一列里面也默認分為12塊，也可以在里面用col-md-占的塊數
            <div class = 'col-md-3'></div>  //再加上3后超過12，會跑到下一行
        </div>
    </div>
    //如果想實現響應式布局，<div class = 'col-md-3 col-xs-3'></div>，col-xs-塊數（在手機上會使用該方式）

2. 列偏移

//類繼承加一個col-md-offset-移動的塊數
    <div class = 'col-md-3 col-md-offset-3'></div>
    
    //移到最右邊（默認左邊，內部用的是float）
    <div class = 'col-md-3 pull-right'></div>

3. 表格（與表單、導航條都是重點）

<table class='table table-hover table-bordered table-striped'>
        <thead>
            <tr>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

4. 帶框的都繼承類form-control，一鍵美顏

5. button按鈕的樣式

<button class = 'btn btn-success'>綠色</button>
<button class = 'btn btn-info'>青色</button>
<button class = 'btn btn-warning'>橙色</button>
<button class = 'btn btn-danger'>紅色</button>
<button class = 'btn btn-primary'>藍色</button>
<a href='' class = 'btn btn-success'>  //a標簽頁變成按鈕的樣子