響應式網頁、Bootstrap、全局CSS樣式

1 響應式網頁
- - 1.1 概述
  - 1.2 測試響應式網頁
  - 1.3 編寫響應式網頁
2 Bootstrap
- - 2.1 Bootstrap
  - - 2.1.1 Bootstrap定義
    - 2.1.2 目錄說明
    - 2.1.2 模闆
    - 2.1.3 相關技術
  - 2.3 bootstrap.css
  - - 2.3.1 CSS Reset
    - 2.3.2 box-sizing
3 全局CSS樣式
- - 3.1 全局CSS樣式
  - 3.2 栅格系統
  - - 3.2.1 概述
    - 3.2.2 栅格系統工作原理
    - 3.2.3 栅格布局
    - 3.2.3 彈性布局
  - 3.3 表單

1 響應式網頁

1.1 概述

智能的根據使用者行為或使用裝置進行相應布局。

響應式網頁定義

Responsive Web Design：響應式網頁設計，專為改進移動網際網路浏覽體驗提出的概念。

基本理念：集中建立頁面的圖檔和排版大小，智能地根據使用者行為和使用的裝置環境進行相應布局(自動更改布局、圖檔、文字效果)——一個頁面相容各種終端
響應式網頁構成

1）不能固定寬度，必須是流式網格布局(Fluid:流式、流動式、液态)；

2）可伸縮的圖檔和文字，随容器大小改變；

3）CSS3 Media Query能根據浏覽裝置的寬和高調用不同CSS

響應式布局網頁問題：代碼複雜度極大增加，隻适用于内容不太多的頁面(企業官網、門戶網站)

1.2 測試響應式網頁

浏覽器裝置模拟器

簡單友善；測試效果有限
第三方工具

無需添置太多真實裝置，測試友善；但測試效果有限，需進一步驗證；(phonegap，Android ADT，IOS Xcode，www.browserstack.com)
真實裝置.

測試效果真實可靠，但測試任務量較大

1.3 編寫響應式網頁

允許網頁寬度自動調整

在head标簽中聲明viewport元标簽
```
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 user-scalable=no">
</head>
           
```
viewport：元标簽(視口)，IOS最先引入，手機中顯示網頁内容的虛拟視窗的大小一般遠大于手機螢幕，HTML可以指定視口大小

width：視口的寬度，取值為數值或device-width；

initial-scale：初始縮放倍率

maximum-scale：允許縮放的最大倍率

minimum-scale：允許縮放的最小倍率

user-scalable：是否允許使用者手動縮放；1/0/yes/no

height：視口高度，一般不指定

IOS專用屬性：minimal-ui:ios ui設定在ios裝置上隐藏導航欄和位址欄

一般設定視口寬度為裝置寬度，不允許縮放
不使用絕對寬度

所有元素的寬不能指定固定值，必須使用相對寬度：width:60%或auto;
相對大小的字型

使用font-size:rem/em
流式布局

使用流式布局+彈性布局(float+flex)：布局各個區塊位置都是浮動的;搭配媒體查詢技術(CSS Media Query)：響應式網頁必備條件，可以自動根據目前浏覽器裝置的不同選擇執行部分CSS樣式
圖檔自适應

實作圖檔的自動縮放：img{max-width:100%;}或者根據用戶端螢幕大小加載不同尺寸的圖檔

選擇加載CSS

不推薦根據浏覽器不同加載不同CSS檔案：

<link rel="stylesheet" href="tinyScreen.css" target="_blank" rel="external nofollow"  media="screen and (max-device-width:400px)">
<link rel="stylesheet" href="smallScreen.css" target="_blank" rel="external nofollow"  media="screen and (min-width:400px) and (max-device-width:600px)">

CSS的@media規則

推薦根據媒體查詢不同螢幕寬度選擇執行CSS檔案中部分CSS規則

@media screen and (min-widht:768px) and (max-diwth:991px) {
   	選擇器樣式
   }

盒子模型計算方式box-sizing常使用border-box，是因為元素用比例占滿容器，計算友善

2 Bootstrap

2.1 Bootstrap

2.1.1 Bootstrap定義

簡潔、直覺、強悍的前端開發架構讓web開發變得迅速簡單

官網：htttp://getbootstrap.com

中文網站：http://www.bootcss.com

Bootstrap是最受歡迎的HTML、CSS和JS架構，用于開發響應式布局、移動裝置優先的WEB項目

Bootstrap提供Sass變量和大量mixin、響應式紮個系統、可擴充的預制元件、基于jQuery的強大插件系統

2.1.2 目錄說明

css目錄——用于存放Bootstrap架構使用的樣式檔案

bootstrap.css：架構的樣式檔案

bootstrap.min.css：架構的樣式壓縮檔案

bootstrap-grid.css：架構的栅格檔案

bootstrap-reboot.css：架構的引導檔案
js目錄——用于存放Bootstrap架構使用的核心javascript檔案

bootstrap.js：架構的核心javascript檔案

bootstrap.min.js：架構的核心javascript壓縮檔案

按順序導入4個檔案：bootstrap.css、jquery.min.js、popper.min.js、bootstrap.min.js

所有使用bootstrap的代碼都必須放在container類中

2.1.2 模闆

/*聲明*/
<!DOCTYPE html>
<html>
<head >
  /*中繼資料*/
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  /*樣式*/
  <link rel="stylesheet" href="../css/bootstrap.css" target="_blank" rel="external nofollow" />
  /*腳本*/
  <script src="../js/jquery.min.js"></script>
  <script src="../js/popper.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <title></title>
</head>
<body>
//容器
<div class="container">

</div>
</body>
</html>

2.1.3 相關技術

Bootstrap許多元件需要依賴JavaScript運作，即依賴jQuery、Popper.js以及開發的JavaScript插件：jquery.min.js檔案，popper.min.js檔案

2.3 bootstrap.css

按順序導入4個檔案：bootstrap.css-> jquery.min.js->popper.min.js->bootstrap.min.js

2.3.1 CSS Reset

有些HTML标簽在浏覽器有預設的樣式

-html、body、h#、p、ul、li、a等；

需要使用css代碼改寫浏覽器預設設定以保證相容性；

2.3.2 box-sizing

box-sizing用于設定元素的框模型(盒模型)的方式，取值：

content-box：預設取值，寬度和高度指元素的内容框；

border-box：寬度高度設定元素的内邊距+左右邊框+内容寬高

3 全局CSS樣式

3.1 全局CSS樣式

Bootstrap需要使用HTML5的元素和屬性；

<!DOCTYPE html>
<html ></html>

為了確定繪制和觸屏縮放，在<head>之中添加viewport中繼資料元素

布局容器

.container用來固定寬度并支援響應式布局的容器；

.container-fluid類用于100%寬度，占據全部視口(viewport)的容器
按鈕

按鈕顔色：

.btn-success；.btn-warning；.btn-danger；.btn-info；.btn-primary；.btn-secondary；.btn-dark；.btn-light；.btn-link

按鈕邊框顔色：

btn-outline-warning黃色邊框

btn-outline-danger紅色邊框

…

按鈕大小：

btn-lg

btn-sm

塊級按鈕：btn-block(獨占一行)
圖檔

rounded圓角圖檔；

rounded-circle橢圓圖檔；

img-thumbnail縮略圖；

img-fluid響應式圖檔，圖檔縮放，最大不超過原圖
文本

字型大小：h#;

對齊：text- * -left、text- * -center、text- * -right、text- * -justify、text- * -nowrap；*表示lg，sm等螢幕尺寸

斜體：font-italic

字型粗細：font-weight-bold

大小寫：text-lowercase、text-uppercase、text-capitalize(首字母大寫)

顔色：text-success、text-warning、text-error、text-info、text-primary
清單

無序清單ul和有序清單ol

.list-unstyled去除點點

.list-inline

.list-group定義清單組

.list-group-item定義清單項

.active激活狀态

.disabled禁用

list-group-item-danger清單項顔色(不列舉)
表格

基本表格.table

條紋狀表格.table-striped

帶邊框表格.table-bordered

滑鼠懸停.table-hover

響應式表格.table-responsive該屬性需要寫在table的父級元素中

背景色table-danger
輔助樣式

1）浮動

float- * -left / right，* 表示不同的螢幕xl/lg/md/sm；使用.clearfix解決高度坍塌問題

2）顯示/隐藏

.visible/.invisible

3）背景

.bg-success/warning/info/danger/error/primary

4）邊框border

.border-0去除邊框；

-top/right/bottom/left設定單邊；-success/warning…邊框顔色

5）圓角

.rounded/.rounded-0圓角和去除圓角；

.rounded-top/right/bottom/left改變兩個圓角

6）寬高

寬度.w- * ( * : 25/50/75/100 )百分比

高度.h- * ( * : 25/50/75/100 )

7）内外邊距

外邊距m-0~5，分别表示0.25/0.5/1/1.5/3rem；m-auto；單邊設定mt/mr/mb/ml-1

内邊距同外邊距，使用p代替m；

内外邊距響應式：m-*-n，m取值為m或者其單邊形式， *表示xl/lq/md/sm, n:0~5

8）居中mx-auto

3.2 栅格系統

3.2.1 概述

Bootstrap提供一套響應式、移動裝置優先的流式栅格系統，随着螢幕或視口(Viewport)的增加，系統自動分為最多12列，通過一系列行與列的組合來建立頁面布局

3.2.2 栅格系統工作原理

row必須包含在容器.container(固定寬度).container-fluid(100%寬度)内；row中包含一組column存内容，提供預定義的類，設定不同尺寸

col- * -1~12 不顯示：d- * -none同時往上相容，是以還要對更大螢幕的d- * -block

3.2.3 栅格布局

web頁面布局的三種方法：

布局方法	table布局	div+css布局	Bootstrap栅格布局
優點	簡單易控制	語義正确，渲染效率高	簡單易控制，語義正确，渲染效率高，支援響應式
缺點	語義錯誤，渲染效率低	控制麻煩	頁面非常複雜就不适合使用栅格

語義錯誤：table用來顯示資料而不是布局方式；

渲染效率：所有單元格内容全部加載完才顯示

栅格，每行12個單元格，元素在不同螢幕下占的格子數

**栅格布局最外層使用容器.container定寬容器或.container-fluid變寬容器；**容器中聲明.row每行平分12個單元格；行中聲明列.col(每列寬度占比n/12)

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

總結：針對不同螢幕下列的适應性問題

col-xl-* 隻能在xl(>=1200px)extra large螢幕下有效

col-lg-* 能在xl/lg(>=992px)large螢幕下有效

col-md-* 能在xl/lg/md(>=768px)medium螢幕下有效

col-sm-* 能在xl/lg/md/sm(>=576px)small螢幕下有效

col-xs-* 能在xl/lg/md/sm(<576px)extra small螢幕下有效

<h1>不同螢幕下不同的占比</h1>
<div class="row">
  <div class="col-lg-4 col-md-2 col-sm-12">第一列</div>
  <div class="col-lg-4 col-md-8 col-sm-12">第二列</div>
  <div class="col-lg-4 col-md-2 col-sm-12">第三列</div>
</div>

.col不設定列占比，自動處理布局，每個列寬度相等(底層計算自動配置設定，可以大于12)；

小分辨率往大分辨率相容，可以隻寫小螢幕

列偏移：使用列偏移指定列及其後的列向右偏移

offset-*-n，*表示螢幕像素類型，n表示1~11；底層原理通過添加margin-left實作偏移

mx- * -auto表示水準方向自動對齊

3.2.3 彈性布局

使用d-*-flex、d- * -inline-flex類建立彈性容器； *代表xl/lg/md/sm

水準方向

.flex- * -row設定彈性子元素水準顯示，預設效果；

.flex- * -row-reverse設定右對齊顯示；
垂直方向

.felx- * -column設定彈性子元素垂直方向顯示；

.flex- * -column-reverse翻轉子元素；
内容排列

.justify-content- * -value用于修改主軸對齊方式，value取值：

start預設

end

center

between

around
響應式flex類

根據不同裝置設定flex類進而實作頁面響應式布局：sm，md，lg或xl；

根據不同螢幕裝置建立彈性盒子容器：.d-sm/md/lg/xl-flex；

根據不同螢幕裝置在水準方向/垂直方向顯示彈性子元素：.flex-*-row/column

3.3 表單

方向排列：form标簽中引用class="form-inline/form-group"來控制方向；

文本元素input、textarea、select需要添加class="form-control"

垂直/基本表單：隻設定form-group則為添加下外邊距1rem；
隻設定form-inline則對應元素為彈性布局的容器，項目在交叉軸居中對齊；
内聯表單：form-inline設定成form-group的祖先元素，form-group把該類元素變為彈性布局的容器，預設橫向；且form内部所有項目也會同樣變成彈性容器
```
//内聯表單
<form class="form-inline">
	<div class="form-group">
	</div>
           
```

form-group + form-control堆疊，垂直方向排列，100%寬度

form-inline内聯表單水準排列

樣式：

form-control

form-check寫在單選按鈕/多選按鈕的父級容器，有相對定位

form-check-inline寫在單選/多選按鈕的父級容器中，自帶彈性布局，交叉軸垂直居中；

form-check-input 自帶絕對定位，需要與form-check/form-check-inline配合；

form-check-label底外邊距為0；

form-text 上外邊距0.25rem

預設栅格布局	水準表單
行	div.row	div.form-inline
列	div.col	div.col

Bootstrap_1.響應式網頁、Bootstrap、全局CSS樣式1 響應式網頁2 Bootstrap3 全局CSS樣式

響應式網頁、Bootstrap、全局CSS樣式

1 響應式網頁

1.1 概述

1.2 測試響應式網頁

1.3 編寫響應式網頁

2 Bootstrap

2.1 Bootstrap

2.1.1 Bootstrap定義

2.1.2 目錄說明

2.1.2 模闆

2.1.3 相關技術

2.3 bootstrap.css

2.3.1 CSS Reset

2.3.2 box-sizing

3 全局CSS樣式

3.1 全局CSS樣式

3.2 栅格系統

3.2.1 概述

3.2.2 栅格系統工作原理

3.2.3 栅格布局

3.2.3 彈性布局

3.3 表單

繼續閱讀

ElasticJob‐Lite：一次性排程

響應式前端架構Bootstrap系列（15）面闆

響應式前端架構Bootstrap系列（9）導覽列與導航欄

BootStrap響應式開發

關于禁用bootstrap響應式解決方法

bootstrap響應式嵌入元件

響應式前端架構Bootstrap系列（3）段落、文字相關

響應式前端架構Bootstrap系列（20）附加導航（Affix）插件

bootstrap(響應式，進度條，标題欄，字型圖示，分頁等等)

Bootstrap元件之進度條

Metronic V4.5.2 Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.5

django項目網易雲音樂

spring cloud在bootstrap.properties配置spring.profiles.active無效

Hplus架構動态添加頁籤功能(擴充)

AngularJS ng依賴注入的三種方式

【web素材】01-10款大氣的購物商城網站模闆