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

@updated Date：2020/05/30

作者介紹：Runsen目前大三下學(xué)期，專業(yè)化學(xué)工程與工藝，大學(xué)沉迷日語，Python， Java和一系列數(shù)據(jù)分析軟件。導(dǎo)致翹課嚴(yán)重，專業(yè)排名中下。.在大學(xué)60%的時(shí)間，都在CSDN。

文章目錄

• Bootstrap
• 為什么要用 Bootstrap？
• Bootstrap教程
• Bootstrap 庫的下載
• 示例
• 引入文件
• 柵格布局
• Bootstrap 搭建項(xiàng)目
• • 1、工程文件的目錄結(jié)構(gòu)
  • 2、下載并引入 Bootstrap 庫文件
  • 3、字符集、Viewport設(shè)置、瀏覽器兼容模式
  • 4、favicon（站點(diǎn)圖標(biāo)）
  • 5、引入相應(yīng)的第三方文件
  • 6、默認(rèn)字體
  • 7、完成頁面空結(jié)構(gòu)
• 相關(guān)資源

Bootstrap

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

為什么要用 Bootstrap？

• Twitter 出品，大廠開源產(chǎn)品 Github
• 基于 Less，豐富的 Mixin
• Responsive 的柵格系統(tǒng)（Grid），移動(dòng)設(shè)備優(yōu)先
• 豐富的組件（HTML和JS）
• 插件（比如 icon font – Font Awesome）

Bootstrap教程

• 菜鳥教程
• 官方教程

Bootstrap 庫的下載

進(jìn)入中文官網(wǎng)，下載 用于生產(chǎn)環(huán)境的 Bootstrap，下載的目錄如下：

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

因?yàn)?。

下面的是css和js的文件夾的內(nèi)容

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

示例

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

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

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

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

如果maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能后，用戶只能滾動(dòng)屏幕，就能讓您的網(wǎng)站看上去更像原生應(yīng)用的感覺。
這樣設(shè)置后，圖片或元素也設(shè)置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>

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

Bootstrap 搭建項(xiàng)目

1、工程文件的目錄結(jié)構(gòu)

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

2、下載并引入 Bootstrap 庫文件

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

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

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

• jQuery：Bootstrap框架中的所有 JS 組件都依賴于 jQuery 實(shí)現(xiàn)。

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

3、字符集、Viewport設(shè)置、瀏覽器兼容模式

我們將 Bootstrap 的基礎(chǔ)模板代碼 copy到項(xiàng)目的index.html中，這其中就包括最前面的三個(gè)meta標(biāo)簽：

<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個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->

4、favicon（站點(diǎn)圖標(biāo)）

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

5、引入相應(yīng)的第三方文件

<!-- 引入 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、默認(rèn)字體

在我們默認(rèn)的樣式表中將默認(rèn)字體設(shè)置為：

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

7、完成頁面空結(jié)構(gòu)

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

完整代碼如下：

<!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>我的網(wǎng)站</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> <!-- 頭部區(qū)域 --> <header id="header"> </header> <!-- /頭部區(qū)域 --><!-- 廣告輪播 --> <section id="main_ad"></section> <!-- /廣告輪播 --><!-- 特色介紹 --> <section></section> <!-- /特色介紹 --><!-- 立即預(yù)約 --> <section></section> <!-- /立即預(yù)約 --><!-- 產(chǎn)品推薦 --> <section></section> <!-- /產(chǎn)品推薦 --><!-- 新聞列表 --> <section></section> <!-- /新聞列表 --><!-- 合作伙伴 --> <section></section> <!-- /合作伙伴 --><!-- 腳注區(qū)域 --> <footer></footer> <!-- /腳注區(qū)域 --><script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> </body></html>

相關(guān)資源

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。