回形數格式方程的實現
1.概念
一個前端開發的框架，Bootstrap，來自Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於HTML、css、JavaScript的，它簡潔靈活，使得web開發更加快捷。
-
-
好處：
-
定義了很多的css樣式和js外掛。我們開發人員可以直接使用這些樣式和外掛得到豐富的頁面效果。
-
響應式佈局
-
同一套頁面可以相容不同解析度的裝置。
-
-
2.快速入門
-
下載Bootstrap：https://v3.bootcss.com/getting-started/#download
-
在專案中將這三個資料夾複製
-
建立html頁面，引入必要的資原始檔
<!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"> <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 --> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>你好，世界！</h1> </body> </html>
3.響應式佈局
-
同一套頁面可以相容不同解析度的裝置
-
實現：依賴於柵格系統：將一行平均分成12個格子，可以指定元素佔幾個格子
-
步驟：
-
定義容器。相當於之前的table
-
容器分類:
-
container: 兩邊有留白 超小螢幕100%
-
container-fluid: 100%寬度（任何裝置）
-
-
-
定義行。相當於之前的tr 樣式：row
-
定義元素。指定該元素在不同的裝置上，所佔的格子數目。 樣式：col-裝置代號-格子數目
-
xs：超小螢幕 手機 col-xs-12
-
sm: 小螢幕 平板電腦 col-sm-12
-
md: 中等螢幕 桌面顯示器 col-md-12
-
lg: 大螢幕 臺式顯示器 col-lg-12
-
-
-
注意：
-
一行中如果格子數目超出12，則超出部分自動換行
-
柵格類屬性可以向上相容。柵格類適用於與螢幕寬度大於或等於分界點大小的裝置
-
如果真實裝置寬度小於了設定柵格類屬性的裝置程式碼的最小值，會一個元素沾滿一整行。
-
<!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"> <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 --> <script src="js/bootstrap.min.js"></script> <style> .inner{ border: 1px solid red; } </style> </head> <body> <!--1.定義容器--> <div class="container"> <!--2.定義行--> <div class="row"> <!--3.定義元素 在大顯示器一行12個格子 在pad上一行6個格子 --> <!--<div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div>--> <div class="col-md-4 inner">柵格</div> <div class="col-md-4 inner">柵格</div> <div class="col-md-4 inner">柵格</div> <div class="col-md-1 inner">柵格</div> </div> </div> </body> </html>
4.CSS樣式和JS外掛
-
全域性的css樣式：
-
按鈕 : class = "btn btn-default"
-
圖片:
-
class = "img-responsive":圖片在任意尺寸都佔100%
-
圖片形狀
<img src="..." alt="..." class="img-rounded">方形 <img src="..." alt="..." class="img-circle">圓形 <img src="..." alt="..." class="img-thumbnail">橢圓
-
-
表格
-
table
-
table-bordered
-
table-hover
-
-
表單
-
-
元件：
-
導航條
-
分頁條
-
-
外掛：
-
輪播圖
-