21- Bootstrap概述

guardwhy發表於2021-01-03
boot

1- Bootstrap概述

1.1 什麼是Bootstrap

一個前端的框架，提高前端的開發效率，製作出更加專業，漂亮的頁面。

基於html、css、js技術，只要有這個基礎就可以使用Bootstrap。

​

bootstrap中文官網：http://www.bootcss.com

1.2 Bootstrap的優勢

自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動裝置優先的樣式。

Bootstrap支援所有的主流瀏覽器。如：Internet Explorer、 Firefox、 Opera、 Google Chrome、Safari。

只要具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。Bootstrap 的響應式 CSS 能夠自適應於桌上型電腦、平板電腦和手機。

​

1.3 響應式設計網頁

1.3.1 網頁的響應式設計

同一個網頁可以自適應不同裝置的螢幕寬度

1.3.1 電腦效果

​ 21- Bootstrap概述

1.3.2 移動端效果

​ 21- Bootstrap概述

1.4 響應式佈局特點

同一個網頁可以自適應不同的裝置寬度。

1.5 支援四類裝置

在bootstrap框架中有以下四種裝置，以解析度為標準來劃分。

類樣式以這些縮寫開頭

四類裝置縮寫
微型裝置xs
小型裝置sm
中型裝置md
大型裝置lg

2- Bootstrap目錄

2.1 Bootstrap內容

​

2.2 Bootstrap下載

https://github.com/twbs/bootstrap/releases，下載用於生產環境的Bootstrap。

​

2.3 目錄結構

​ 21- Bootstrap概述

2.4 目錄的作用

css：框架製作好的樣式。

js：框架中JS外掛，要用到jQuery框架。

font：字型圖示。

3- 建立Bootstrap的模板

3.1 建立步驟

  • 複製解壓出來的三個資料夾到專案中：css, js, fonts
  • 複製jquery框架：jquery-3.1.1.min.js複製到js目錄下
  • 複製："起步->基本模板"中程式碼到網頁，修改網頁的內容。

3.2 程式碼示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--網頁編碼的型別-->
  <meta charset="utf-8">
  <!--使用最新的支援H5瀏覽器核心來解析-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--
  視口：在瀏覽器中一個虛擬的網頁容器。引數：網頁的寬度設定為裝置的寬度 初始縮放比: 1:1
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
  <title>Bootstrap的模板</title>

  <!-- 匯入檔案：bootstrap.css -->
  <link href="../static/css/bootstrap.min.css" rel="stylesheet">

  <!-- 匯入jQuery檔案Bootstrap的所有JavaScript外掛都依賴 jQuery，所以必須放在前邊 -->
  <script src="../static/js/jquery-3.1.1.js"></script>

  <!-- 載入 Bootstrap的所有 JavaScript外掛-->
  <script src="../static/js/bootstrap.min.js"></script>
</head>
<body>
	<h3>世界你好！！！</h3>
</body>
</html>

相關文章