明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

Bootstrap是什么，有什么特點(diǎn)？

發(fā)表時(shí)間：2023-08-31 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本章給大家介紹Bootstrap是什么，有什么特點(diǎn)？讓大家對(duì)Bootstrap框架有一個(gè)初步的認(rèn)識(shí)。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。一．Bootstrap 概述Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術(shù)工程師研發(fā)的一個(gè)基于HTML、CS...
本章給大家介紹Bootstrap是什么，有什么特點(diǎn)？讓大家對(duì)Bootstrap框架有一個(gè)初步的認(rèn)識(shí)。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

一．Bootstrap 概述
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術(shù)工程師研發(fā)的一個(gè)基于
HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優(yōu)美，可用于快速、簡單地
構(gòu)建基于 PC 及移動(dòng)端設(shè)備的 Web 頁面需求。
2010 年 6 月，Twitter 內(nèi)部的工程師為了解決前端開發(fā)任務(wù)中的協(xié)作統(tǒng)一問題。經(jīng)歷
各種方案后，Bootstrap 最終被確定下來，并于 2011 年 8 月發(fā)布。經(jīng)過很長時(shí)間的迭代升
級(jí)，由最初的 CSS 驅(qū)動(dòng)項(xiàng)目發(fā)展成為內(nèi)置很多 JavaScript 插件和圖標(biāo)的多功能 Web 前端
的開源框架。
Bootstrap 最為重要的部分就是它的響應(yīng)式布局，通過這種布局可以兼容 PC 端、PAD
以及手機(jī)移動(dòng)端的頁面訪問。
Bootstrap 下載及演示：
國內(nèi)文檔翻譯官網(wǎng)：http://www.bootcss.com

二．Bootstrap 特點(diǎn)
Bootstrap 非常流行，得益于它非常實(shí)用的功能和特點(diǎn)。主要核心功能特點(diǎn)如下：
(1).跨設(shè)備、跨瀏覽器
可以兼容所有現(xiàn)代瀏覽器，包括比較詬病的 IE7、8。當(dāng)然，本課程不再考慮 IE9 以下
瀏覽器。
(2).響應(yīng)式布局
不但可以支持 PC 端的各種分辨率的顯示，還支持移動(dòng)端 PAD、手機(jī)等屏幕的響應(yīng)式切
換顯示。
(3).提供的全面的組件
Bootstrap 提供了實(shí)用性很強(qiáng)的組件，包括：導(dǎo)航、標(biāo)簽、工具條、按鈕等一系列組
件，方便開發(fā)者調(diào)用。
(4).內(nèi)置 jQuery 插件
Bootstrap 提供了很多實(shí)用性的 jquery 插件，這些插件方便開發(fā)者實(shí)現(xiàn) Web 中各種
常規(guī)特效。
(5).支持 HTML5、CSS3
HTML5 語義化標(biāo)簽和 CSS3 屬性，都得到很好的支持。
(6).支持 LESS 動(dòng)態(tài)樣式
LESS 使用變量、嵌套、操作混合編碼，編寫更快、更靈活的 CSS。它和 Bootstrap 能
很好的配合開發(fā)。

三．Bootstrap 結(jié)構(gòu)

首先，想要了解 Boostrap 的文檔結(jié)構(gòu)，需要在官網(wǎng)先把它下載到本地。Bootstrap
下載地址如下：
Bootstrap 下載地址：http://v3.bootcss.com/ (選擇生產(chǎn)環(huán)境即可，v3.3.4)
解壓后，目錄呈現(xiàn)這樣的結(jié)構(gòu)：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.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 目錄中有四個(gè) css 后綴的文件，其中包含 min 字樣的，是壓縮版本，一般使用
這個(gè)；不包含的屬于沒有壓縮的，可以學(xué)習(xí)了解 css 代碼的文件；而 map 后綴的文件則是
css 源碼映射表，在一些特定的瀏覽器工具中使用。
2.js 目錄包含兩個(gè)文件，是未壓縮和壓縮的 js 文件。
3.fonts 目錄包含了不同后綴的字體文件。

創(chuàng)建第一個(gè)bootstrap頁面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>bootstrap初體驗(yàn)</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    </head>
    <body>
        <button class="btn btn-default">bootstrap初體驗(yàn)之按鈕</button>
    </body>
</html>

Bootstrap 將全局 font-size 設(shè)置為 14px，line-height 行高設(shè)置為 1.428(即20px)；<p>段落元素被設(shè)置等于 1/2 行高(即 10px)；顏色被設(shè)置為#333。

以上就是Bootstrap是什么，有什么特點(diǎn)？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。