module4-07-響應式佈局-Bootstrap

阿新 • • 發佈：2020-11-30

響應式佈局+Bootstrap

一、響應式佈局

就是使用媒體查詢針對不同寬度的裝置進行佈局和樣式的設定，從而適配不同裝置的目的

1.1 響應式佈局容器

響應式需要一個父級作為佈局容器，來配合子級元素來實現變化效果
原理就是在不同螢幕下，通過媒體查詢來改變這個佈局容器的大小，在改變裡面子元素的排列方式和大小，從而實現不同螢幕下，看到不同的頁面佈局和樣式變化

螢幕	寬度
超小螢幕（小於768px）	100%
小螢幕（大於768小於992px）	750px
中等螢幕（大於992px小於1200px）	970px
大螢幕（大於等於1200px）	1170px

二、Bootstrap

2.1 Bootstrap簡介

Bootstrap來自Twitter，是目前最受歡迎的前端框架，是基於HTML、 CSS和JAVASCRIPT的
中文官網：http://www.bootcss.com/
官網：http://getbootstrap.com/
可以直接套用官網上的預寫好的樣式放在自己的程式碼上面以使用
優點
- 標準化的html+css編碼規範
- 提供了一套簡潔、直觀、強悍的元件
- 有自己的生態圈，不斷的更新迭代
- 讓開發更簡單，提高了開發的效率
版本號代表：
- 2.x.x：停止維護，相容性好，程式碼不夠簡介，功能不夠完善
- 3.x.x：目前使用最多，穩定，放棄了IE6-IE7
  
  。對IE8支援但是頁面效果不好，偏向於開發響應式佈局、移動裝置優先的WEB專案
- 4.X.X：最新版，目前還不是很流行

2.2 Bootstrap使用

（1）使用四部曲

1. 建立檔案加結構 2. 建立html股價結構 3. 引入相關樣式檔案。4. 書寫內容
基本程式碼

<!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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支援 HTML5 元素和媒體查詢（media queries）功能 -->
  <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
  <h1>你好，世界！</h1>

  <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
  <!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
 </body>
</html>

（2）書寫內容

直接拿Bootstrap預先定義好的樣式來使用
修改Bootstrap原來的樣式，注意權重問題
學號Bootstrap的關鍵在於知道它定義了哪些樣式，以及這些樣式能實現什麼樣的效果

2.3 佈局容器

Bootstrap需要為頁面內容和柵格系統包裹一個.container容器，它提供了兩個作詞用處的類

（1）container類

響應式佈局的容器 固定寬度 左右會有15pxpadding
大屏（>=1200px）寬度定為1170px
中屏（>=992px）寬度定位970px
小屏（>=768px）寬度定為750px
超小屏（100%）

（2）container-fluid類

流式佈局容器 百分百寬度
佔據全部視口（viewport）的容器
適合於製作移動端頁面開發

2.4 柵格系統

（1）柵格系統介紹

將頁面佈局劃分為等寬的列，然後通過列數的定義來模組化頁面佈局
系統自動分為最多12列

（2）柵格系統使用方法

柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就可以放入這些建立好的佈局中

col必須巢狀在row內，row必須巢狀在container內
row可以去除父容器的15pxpadding的作用
xs，sm，md，lg
越大的就會也有小的特性
- 比如我設定sm的col但是lg也會有這些特性
設定col之後會有左右15px的padding
可以同時這是多個col
列巢狀：
- 在col中可以巢狀col，前者col會當作row使用
列偏移：
- col-md-offset: 可以向右側偏移。實際上是通過*選擇器為當前元素增加了左側的邊距（margin）
- 超過的話後面會調到後面
- 可以使用這個來使元素居中
列排序:
- col-md-push/pull-份數: 可以實現向左/右偏移, 但是佔原有位置,也可以覆蓋其它位置的