Bootstrap第一章

一、響應式web設計技術棧

和html5+css3互相配合與支持的：

html5+css3 基本網頁設計

html5中的viewport 提供可以配置視口的屬性

css3媒體查詢 識別媒體類型，特征（屏幕寬度，像素比等）

流式布局 可以根據瀏覽器的寬度和屏幕的大小自動調整效果

響應式柵格系統 依賴于媒體查詢，根據不同的屏幕大小調整布局

流式圖片 隨流式布局進行相應縮放

二、目錄結構

1.編譯版

- css - js - bootstrap.* 是預編譯文件 - bootstrap.min.* 是編譯且壓縮后的文件

2.源碼版

- dist：編譯版bootstrap4.4.1 - docs：開發文檔 - examples：例子 - scss：css源碼 - js：JavaScript源碼

3.安裝bootstrap

- jquery.js：jquery庫基礎文件 - popper.js：bootstrap插件依賴的文件 - bootstrap.js：bootstrap的jQuery插件源文件 - 注意：一定要把jQuery.js和popper.js在bootstrap.min.js之前引入

4.視口

viewport：提供可以配置視口的屬性

視口的概念針對移動端瀏覽器，分為兩種視口，一種是可見視口即設備大小，另一種是視窗視口即網頁寬度。

html5中，標簽可以用于配置視口屬性。

<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximun-scale=1.0"> <!--user-scalable=no 用于設置用戶是否可以縮放，默認為yes--> <!--width=device-width 用于設置視窗視口的寬度，這里表示與可見視口寬度相同--> <!--initial-scale=1.0 用于設置初始縮放比例，取值為0~10.0--> <!--maximun-scale=1.0 用于設置最大縮放比例，取值為0~10.0-->

5.標簽

<meta name="keywords" content="北大青鳥，IT培訓"> <meta name="description" content="北大青鳥是國內最大的IT培訓..."> <meta>標簽 keywords 搜索關鍵字 description 內容描述

總結

以上是生活随笔為你收集整理的Bootstrap第一章初识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。