前端框架Bootstrap的使用

2018-3-12 seo達人

1. 下載Bootstrap

下載地址：https://v3.bootcss.com/
進入后下載這個標題的Bootstrap
這里寫圖片描述
下載完成后，將所需的css,js復制到工程中即可

2. 拷貝官方的模塊文件

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
    

        
            1
        

        
            2
        

        
            3
        

        
            4
        

        
            5
        

        
            6
        

        
            7
        

        
            8
        

        
            9
        

        
            10
        

        
            11
        

        
            12
        

        
            13
        

        
            14
        

        
            15
        

        
            16
        

        
            17
        

        
            18

3. 頁面添加組件

下面一個按鈕為例：
- 喜歡的樣式

<button type="button" class="btn btn-primary">（首選項）Primary</button>
    

        
            1

這里寫圖片描述

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    

        
            1
        

        
            2
        

        
            3
        

        
            4
        

        
            5

這里寫圖片描述
然后將二者結合即可：

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>
    

        
            1
        

        
            2
        

        
            3
        

        
            4
        

        
            5

- 最后的結果如下：

Left Middle Right

這里寫圖片描述

至此你就可以簡單的用前端框架做出美觀的界面了！

藍藍設計( m.jjddy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

前端框架Bootstrap的使用

1. 下載Bootstrap

2. 拷貝官方的模塊文件

3. 頁面添加組件

至此你就可以簡單的用前端框架做出美觀的界面了！

分類

日歷

鏈接

個人資料

存檔