@Author：Runsen
@Date：2019/05/26

@updated Date：2020/05/30

作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。

文章目錄

• Bootstrap
• 為什么要用 Bootstrap？
• Bootstrap教程
• Bootstrap 庫的下載
• 示例
• 引入文件
• 柵格布局
• Bootstrap 搭建項目
• • 1、工程文件的目錄結構
  • 2、下載并引入 Bootstrap 庫文件
  • 3、字符集、Viewport設置、瀏覽器兼容模式
  • 4、favicon（站點圖標）
  • 5、引入相應的第三方文件
  • 6、默認字體
  • 7、完成頁面空結構
• 相關資源

Bootstrap

• 基于HTML，CSS，JS的簡潔靈活的流行前端框架及交互組件集
• 為快速WEB開發提供了一套前端工具包，包括布局、網格、表格、按鈕、表單、導航、提示等等
• 它的最新版本是 4.3，有不少網站還在用 3.x

為什么要用 Bootstrap？

• Twitter 出品，大廠開源產品 Github
• 基于 Less，豐富的 Mixin
• Responsive 的柵格系統（Grid），移動設備優先
• 豐富的組件（HTML和JS）
• 插件（比如 icon font – Font Awesome）

Bootstrap教程

• 菜鳥教程
• 官方教程

Bootstrap 庫的下載

進入中文官網，下載 用于生產環境的 Bootstrap，下載的目錄如下：

PS：dist表示編譯之后的文件，這在庫文件中是很常見的。

因為 。

下面的是css和js的文件夾的內容

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js/├── bootstrap.bundle.js├── bootstrap.bundle.js.map├── bootstrap.bundle.min.js├── bootstrap.bundle.min.js.map├── bootstrap.js├── bootstrap.js.map├── bootstrap.min.js└── bootstrap.min.js.map

示例

很多時候，見到的像這樣的class，比如bg-light，前面bg代表background背景的意思，指的是light線色的背景。

因此Bootstrap中的CSS都是屬性的縮寫，再比如在標簽meta，其實是媒體文件的意思。但是需要用在移動端，加一個，content = width=device-width, initial-scale=1.0屬性，其實就是大家看視頻的時候都是全屏的

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• Width=device-width => 表示頁面寬度是設備屏幕的寬度；確保網頁能被不同屏幕分辨率的設備正確呈現；
• user-scalable=no => 是否可以調整縮放比例(yes/no)；
• initial-scale=1.0 => 表示初始的縮放比例 ，以 1:1 的比例呈現，不會有任何的縮放；minimum-scale=0.5：最小允許的縮放比例；
• maximum-scale=2.0：最大允許的縮放比例；

如果maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓您的網站看上去更像原生應用的感覺。
這樣設置后，圖片或元素也設置style=”width:100%”，那么圖片看起來也是全屏的了。

引入文件

bootstrap.js依賴jQuery，所以要先引用jquery.js 然后引用bootstrap.js

<!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css"><!-- jQuery文件 --> <script src="/scripts/jquery.min.js"></script> <!-- Popper文件 --> <script src="/scripts/popper.min.js"></script> <!-- Bootstrap 核心 JavaScript 文件 --> <script src="/scripts/bootstrap.min.js"></script>

柵格布局

<div class="container"><div class="row"><div class="col-md-8"></div><div class="col-md-4"></div></div><div class="row"><div class="col-md-8 col-sm-6 col-lg-4"></div></div> </div>

柵格布局就是一個container的class。在下篇主要介紹。

Bootstrap 搭建項目

1、工程文件的目錄結構

├─ Demo ·························· 項目所在目錄 └─┬─ /css/ ······················· 我們自己的CSS文件├─ /font/ ······················ 使用到的字體文件├─ /img/ ······················· 使用到的圖片文件├─ /js/ ························ 自己寫的JS腳步├─ /lib/ ······················· 從第三方下載回來的庫【只用不改】├─ /favicon.ico ················ 站點圖標└─ /index.html ················· 入口文件

2、下載并引入 Bootstrap 庫文件

見上一段的講解。引入之后，如果需要引入 html5shiv、respond、jQuery 這三個庫文件，就放在lib文件夾中。

• html5shiv：讓瀏覽器可以識別 HTML5 的新標簽。如header、footer、section等。
• respond.js：讓低版本瀏覽器可以使用 CSS3 的媒體查詢。

另外，我們還需要引入下面這個庫：

• jQuery：Bootstrap框架中的所有 JS 組件都依賴于 jQuery 實現。

我們可以把上面這三個庫文件拷貝到 lib 文件夾中（注意引用的路徑要寫正確）。

3、字符集、Viewport設置、瀏覽器兼容模式

我們將 Bootstrap 的基礎模板代碼 copy到項目的index.html中，這其中就包括最前面的三個meta標簽：

<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->

4、favicon（站點圖標）

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

5、引入相應的第三方文件

<!-- 引入 Bootstrap 的核心樣式文件（必須） --><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"><!-- 引入我們自己寫的 css 樣式文件--><link rel="stylesheet" href="css/my.css">...<script src="lib/jquery/jquery.js"></script><script src="lib/bootstrap/js/bootstrap.js"></script><script src="js/my.js"></script>

注意，先引入第三方的文件，再引入我們自己寫的文件。

6、默認字體

在我們默認的樣式表中將默認字體設置為：

body{font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif; }

7、完成頁面空結構

先劃分好頁面中的大容器，然后在具體看每一個容器中單獨的情況。

完整代碼如下：

<!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, user-scalable=no"><title>我的網站</title><!--建議：第三方引用的css庫放在上面，我們自己寫的文件，都放在下面--><!-- 引入 Bootstrap 的核心樣式文件（必須） --><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"><!-- 引入我們自己寫的 css 樣式文件--><link rel="stylesheet" href="css/main.css"><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><!--[if lt IE 9]><script src="lib/html5shiv/html5shiv.min.js"></script><script src="lib/respond/respond.min.js"></script><![endif]--> </head><body> <!-- 頭部區域 --> <header id="header"> </header> <!-- /頭部區域 --><!-- 廣告輪播 --> <section id="main_ad"></section> <!-- /廣告輪播 --><!-- 特色介紹 --> <section></section> <!-- /特色介紹 --><!-- 立即預約 --> <section></section> <!-- /立即預約 --><!-- 產品推薦 --> <section></section> <!-- /產品推薦 --><!-- 新聞列表 --> <section></section> <!-- /新聞列表 --><!-- 合作伙伴 --> <section></section> <!-- /合作伙伴 --><!-- 腳注區域 --> <footer></footer> <!-- /腳注區域 --><script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> </body></html>

相關資源

• Bootswatch - 免費的 Bootstrap 主題包
• Font Awesome, the iconic font and CSS toolkit
• BootCDN 開源項目免費 CDN 服務
• Bootstrap快速入門 - 云+社區 - 騰訊云
• Buttons - 一個高度可定制的按鈕（button） CSS 樣式庫。

總結

以上是生活随笔為你收集整理的十八、前端必学Bootstrap美化（上篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

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