App下載

Bootstrap框架如何用呢？快速上手

猿友 2021-01-18 10:51:11 瀏覽數(shù) (3663)
反饋

什么是 Bootstrap？

Bootstrap 是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。由 Twitter 的 Mark Otto 和 Jacob Thornton 合作開(kāi)發(fā)的一套 HTML、CSS 和 JS 框架。Bootstrap 是基于 HTML5 和 CSS3 開(kāi)發(fā)的，它在 jQuery 的基礎(chǔ)上進(jìn)行了更為個(gè)性化和人性化的完善，形成一套自己獨(dú)有的網(wǎng)站風(fēng)格，并兼容大部分 jQuery 插件。用過(guò) HTML5 和 CSS3 的人都知道，現(xiàn)在一些高大上的網(wǎng)站都少不了 html5 和 css3。而B(niǎo)ootstrap 正式基于這些設(shè)計(jì)出來(lái)的，它為我們封裝好了現(xiàn)成的 CSS 樣式合集。供咱們直接引用。 初次接觸，大家可以把它理解為一推 css 樣式合集即可。

Bootstrap 有什么“過(guò)人之處”？

Bootstrap 內(nèi)置樣式非常漂亮，而且夠用。與其把網(wǎng)站搞得花里胡哨，不如一切從簡(jiǎn)。Bootstrap 在 reset 瀏覽器樣式之余，又添加了類 Twitter 的頁(yè)面元素，咱們要做的只是使用，肆無(wú)忌憚地、放心地用，不用琢磨這個(gè)行高、計(jì)算那個(gè)寬度、讓不小心忘記定義的頁(yè)面元素尷尬地顯示在頁(yè)面上。因?yàn)檫@些Twitter 已經(jīng)為咱們考慮設(shè)計(jì)好了， 而且出自 Twitter 之手，畢竟經(jīng)受了億萬(wàn)用戶的考驗(yàn)，外加 Twitter 強(qiáng)大的設(shè)計(jì)團(tuán)隊(duì)的支持，更讓這套框架顯得與眾不同。

當(dāng)然 Bootstrap 的好處不止如此，不然 Bootstrap 也不會(huì)一經(jīng)發(fā)布，就迅速紅遍大江南北。

  • 移動(dòng)設(shè)備優(yōu)先：自 Bootstrap 3 起，框架包含了貫穿于整個(gè)庫(kù)的移動(dòng)設(shè)備優(yōu)先的樣式。
  • 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。
  • 容易上手：只要具備 HTML 和 CSS 的基礎(chǔ)知識(shí)，就可以開(kāi)始學(xué)習(xí) Bootstrap。下面會(huì)給出具體了例子，演示如何快速使用Bootstrap。
  • 響應(yīng)式設(shè)計(jì)：Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)。
  • 最主要的一點(diǎn)原因，它不僅好，而且是開(kāi)源的。

（關(guān)于響應(yīng)式設(shè)計(jì)這塊是咱們web開(kāi)發(fā)者將來(lái)所必所面對(duì)的，因?yàn)殡S著各種移動(dòng)設(shè)備的不斷發(fā)展，手機(jī)平板的盛行。這些移動(dòng)設(shè)備大有成為主流之勢(shì)。所以咱們必須要跟上潮流，搞好PC網(wǎng)站的同時(shí)也必須要考慮讓網(wǎng)站適應(yīng)其他終端。 ）

Bootstrap的簡(jiǎn)單使用

這一部分主要說(shuō)明一下 Bootstrap 的環(huán)境安裝，文件結(jié)構(gòu)，并且通過(guò)一個(gè) demo 演示如何使用 Bootstrap。

首先下載 Bootstrap 的最新版本： http://v3.bootcss.com/getting-started/#download Bootstrap 提供了兩種形式的壓縮包，在下載下來(lái)的壓縮包內(nèi)可以看到以下目錄和文件，這些文件按照類別放到了不同的目錄內(nèi)，并且提供了壓縮與未壓縮兩種版本。 下載壓縮包之后，將其解壓縮到任意目錄即可看到以下（壓縮版的）目錄結(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

上面展示的就是 Bootstrap 的基本文件結(jié)構(gòu)：這里提供了編譯好的 CSS 和 JS (bootstrap.) 文件，還有經(jīng)過(guò)壓縮的 CSS 和 JS (bootstrap.min.) 文件。同時(shí)還提供了 CSS 源碼映射表(bootstrap.*.map) ，可以在某些瀏覽器的開(kāi)發(fā)工具中使用。同時(shí)還包含了來(lái)自 Glyphicons 的圖標(biāo)字體，在附帶的 Bootstrap 主題中使用到了這些圖標(biāo)。

關(guān)于壓縮版和未經(jīng)壓縮版，使用的時(shí)候引用其中一個(gè)即可。

Demo

下面是使用了 Bootstrap 的 html 代碼，給按鈕添加了一些 Bootstrap 樣式。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 按鈕選項(xiàng)</title>
<!-- 添加對(duì)Bootstrap的引用 -->
   <link  rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
?
<!-- 標(biāo)準(zhǔn)的按鈕 -->
<button type="button" class="btn btn-default">默認(rèn)按鈕</button>
?
<!-- 提供額外的視覺(jué)效果，標(biāo)識(shí)一組按鈕中的原始動(dòng)作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
?
<!-- 表示一個(gè)成功的或積極的動(dòng)作 -->
<button type="button" class="btn btn-success">成功按鈕</button>
?
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
?
<!-- 表示應(yīng)謹(jǐn)慎采取的動(dòng)作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
?
<!-- 表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作 -->
<button type="button" class="btn btn-danger">危險(xiǎn)按鈕</button>
?
<!-- 并不強(qiáng)調(diào)是一個(gè)按鈕，看起來(lái)像一個(gè)鏈接，但同時(shí)保持按鈕的行為 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>
?
</body>
</html>

演示效果：

 1610934807(1)

可以看到上面的 html 代碼中沒(méi)有寫任何其他的 css 代碼，完全是引用 Bootstrap 的按鈕樣式。其中關(guān)鍵代碼部分： class=”btn btn-default” btn：繼承圓角灰色按鈕的默認(rèn)外觀。 btn-default 是默認(rèn)/標(biāo)準(zhǔn)按鈕的樣式。 要想更換其他的樣式就更好其他的類即可，比如 btn-danger 是危險(xiǎn)按鈕。這些樣式都在 bootstrap.min.css 文件中寫好的一些樣式，大家可以打開(kāi)文件瀏覽一下。

就這樣在不知不覺(jué)中就完成了對(duì) Bootstrap 的使用，其他控件也都是不同的一些 class。在使用的時(shí)候注意經(jīng)常查看官方文檔，收獲會(huì)很多。

另外，在引用 Bootstrap 的時(shí)候還需要特別注意一點(diǎn)：那就是 jquery.min.js 和 bootstrap.min.js 文件的引用順序， 因?yàn)?Bootstrap 的所有 JavaScript 插件都依賴 jQuery，因此 jQuery 必須在 Bootstrap 之前引入。

關(guān)于 Bootstrap 的介紹先說(shuō)這么多，我也是第一次接觸到這個(gè)框架。但是通過(guò)這一個(gè)月的學(xué)習(xí)和使用情況來(lái)看，這套框架的確是有許許多多的優(yōu)點(diǎn)，上手快、大大提高網(wǎng)頁(yè)前段的設(shè)計(jì)效率、和質(zhì)量等等。能夠幫助我們以最短的時(shí)間搭建出一個(gè)高大上的網(wǎng)站。


CSS

0 人點(diǎn)贊