Bootstrap概述和使用

1.Bootstrap概述

1.1Bootstrap簡介

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。它是一個 CSS/HTML 框架。Bootstrap 提供了優雅的 HTML 和 CSS規範。Bootstrap 一經推出後頗受歡迎，一直是 GitHub 上的熱門開源項目。
bootstrap 中文官網：https://www.bootcss.com/

1.2 Bootstrap的作用

用於前端的開發，提⾼高開發前端效率，降低難度
基於技術HTML、CSS、JavaScript

1.3 Bootstrap的優勢

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，⽤用於開發響應式佈局、移動設備優先的 WEB 項目。

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

2. 容易易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
3. 移動設備優先：自Bootstrap3起，框架包含了了貫穿於整個庫的移動設備優先的樣式。
4. 響應式設計：Bootstrap 的響應式 CSS 能夠自適應於臺式機、平板電腦和手機。

2.Bootstrap的使用

2.1 Bootstrap下載

下載地址：http://www.bootcss.com，下載用於生產環境的 Bootstrap即可

2.2 Bootstrap包含的內容

2.3 Bootstrap的目錄結構

壓縮版與標準版的區別：

2.4 創建Bootstrap模板

2.4.1 模板文件創建步驟

將 bootstrap 中解壓出來的三個文件夾：css、js、fonts 複製到工程中。
將 jquery-3.2.1.min.js 複製到 js 文件夾下
創建一個HTML 文件，將"起步->基本模板"中的代碼複製到 HTML 中。
只需要創建一次，以後可以直接複製這個模板來使用

2.4.2 模板文件解釋

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--使用最新的瀏覽器器內核來解析當前的 HTML5 頁面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--視口：指定網頁打開時默認的寬度，初始縮放比是 1：1。視口其實就是一個網頁的容
器-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述 3 個 meta 標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>標題</title>
<!-- 1. 導入 bootstrap 的全局樣式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--2. 導入 jquery 框架 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 3. 導入 bootstrap 的 js 插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap概述和使用