前端框架Bootstrap

一. 使用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標籤頁變成按鈕的樣子

6. fontawesome有不少圖標樣式

　　中文網：http://www.fontawesome.com.cn/faicons/

　　圖標下載後解壓下將css和font文件夾複製到pytcharm項目中，要用時導入css便可。

　　注意：將HTML和css及font都放在同一目錄下，

　　　　　導css文件固定格式：<link rel="stylesheet" href="css/font-awesome.css">

　　

7. sweetalert

　　7.1 打開網址：https://lipis.github.io/bootstrap-sweetalert/ 點擊Vew on GitHub

　　7.2 下載ZIP

　　7.3 下載完成後解壓

 　　下載文件，解壓後的文件複製至項目中（與HTML文件放在同一文件夾內），將dist文件夾的css和js導入便可

　　使用時如：swal('hello', 'how are you', 'info') //第三個參數有特殊做用，還有'success'和'warning'等
//（JS代碼alert改爲swal便可）

　　一些樣式該網站往下拉就有，能夠複製試試：https://lipis.github.io/bootstrap-sweetalert/

8. 詳盡見Bootstrap中文網

　https://v3.bootcss.com/