第二百三十一節，Bootstrap 介紹

時間 2019-11-18

標籤二百三十一 bootstrap 介紹欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap 介紹css

學習要點： html

　　1.Bootstrap 概述 前端

　　2.Bootstrap 特色 jquery

　　3.Bootstrap 結構 npm

　　4.建立第一個頁面 bootstrap

　　5.學習的各項準備瀏覽器

本節課咱們主要了解一下 Boostrap 歷史、特色、用途，以及爲何選擇 Boostrap 來開發咱們的 Web 項目。服務器

一．Bootstrap 概述框架

　　Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術工程師研發的一個基於 HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優美，可用於快速、簡單地構建基於 PC 及移動端設備的 Web 頁面需求。svg

　　2010 年 6 月，Twitter 內部的工程師爲了解決前端開發任務中的協做統一問題。經歷各類方案後，Bootstrap 最終被肯定下來，並於 2011 年 8 月發佈。通過很長時間的迭代升級，由最初的 CSS 驅動項目發展成爲內置不少 JavaScript 插件和圖標的多功能 Web 前端的開源框架。

　　Bootstrap 最爲重要的部分就是它的響應式佈局，經過這種佈局能夠兼容 PC 端、PAD 以及手機移動端的頁面訪問。

Bootstrap 下載及演示：

國內文檔翻譯官網：http://www.bootcss.com

二．Bootstrap 特色

Bootstrap 很是流行，得益於它很是實用的功能和特色。主要核心功能特色以下：

(1).跨設備、跨瀏覽器能夠兼容全部現代瀏覽器，包括比較詬病的 IE七、8。固然，本課程再也不考慮 IE9 如下瀏覽器。

(2).響應式佈局不但能夠支持 PC 端的各類分辨率的顯示，還支持移動端 PAD、手機等屏幕的響應式切換顯示。

(3).提供的全面的組件 Bootstrap 提供了實用性很強的組件，包括：導航、標籤、工具條、按鈕等一系列組件，方便開發者調用。

(4).內置 jQuery 插件 Bootstrap 提供了不少實用性的 jquery 插件，這些插件方便開發者實現 Web 中各類常規特效。

(5).支持 HTML五、CSS3 HTML5 語義化標籤和 CSS3 屬性，都獲得很好的支持。

(6).支持 LESS 動態樣式 LESS 使用變量、嵌套、操做混合編碼，編寫更快、更靈活的 CSS。它和 Bootstrap 能很好的配合開發。

三．Bootstrap 結構

首先，想要了解 Boostrap 的文檔結構，須要在官網先把它下載到本地。Bootstrap 下載地址以下： Bootstrap 下載地址：http://v3.bootcss.com/ (選擇生產環境便可，v3.3.4)

解壓後，目錄呈現這樣的結構：

bootstrap/

├── css/

│　　├── bootstrap.css　　　　　　　　　　　　css樣式文件

│ 　 ├── bootstrap.css.map　　　　　　　　　 css映射文件

│ 　 ├── bootstrap.min.css　　　　　　　　　 css壓縮樣式文件

│ 　 ├── bootstrap-theme.css　　　　　　　　主題樣式文件

│ 　 ├── bootstrap-theme.css.map　　　　　主題映射文件

│ 　 └── bootstrap-theme.min.css　　　　　主題壓縮樣式文件

├── js/

│ 　 ├── bootstrap.js　　　　　　　　　　　　 js文件

│ 　 ├── bootstrap.min.js　　　　　　　　　　 js壓縮文件

│　　└──npm.js　　　　　　　　　　　　　　　　服務器端引入js文件

└── fonts/　　　　　　　　　　　　　　　　　　跨平臺字體文件

　　 ├── glyphicons-halflings-regular.eot

　　 ├── glyphicons-halflings-regular.svg

　　 ├── glyphicons-halflings-regular.ttf

　　 ├── glyphicons-halflings-regular.woff

　　 └── glyphicons-halflings-regular.woff2

主要分爲三大核心目錄：css(樣式)、js(腳本)、fonts(字體)。

1.css 目錄中有四個 css 後綴的文件，其中包含 min 字樣的，是壓縮版本，通常使用這個；不包含的屬於沒有壓縮的，能夠學習瞭解 css 代碼的文件；而 map 後綴的文件則是 css 源碼映射表，在一些特定的瀏覽器工具中使用。

2.js 目錄包含兩個文件，是未壓縮和壓縮的 js 文件。

3.fonts 目錄包含了不一樣後綴的字體文件。

四．建立第一個頁面

咱們建立一個 HTML5 的頁面，而且將 Bootstrap 的核心文件引入，而後測試是否正常顯示。

html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 介紹</title>
    <!--引入bootstrap樣式文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

<!--建立一個按鈕，執行兩個class樣式-->
<button class="btn btn-info">Bootstrap</button>

<!--引入jquery文件-->
<script src="jquery/jquery.min.js"></script>
<!--引入bootstrap裏的js-->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>