Bootstrap 教程


閱讀(4486.6k) 收藏 (604)

手冊(cè)簡(jiǎn)介

Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。

手冊(cè)說明

認(rèn)識(shí) Bootstrap:

在您學(xué)習(xí)完本教程后,您即可達(dá)到使用 Bootstrap 開發(fā) Web 項(xiàng)目的中等水平。建議您進(jìn)行Bootstrap實(shí)戰(zhàn)練習(xí)來鞏固您剛學(xué)到的新知識(shí)。

如果您覺得 Bootstrap 的學(xué)習(xí)難度較高,不易理解,建議您采用視頻教程進(jìn)行學(xué)習(xí):Bootstrap視頻課程

在您開始學(xué)習(xí)本教程之前需要先學(xué)習(xí)以下教程:

HTML 教程

CSS 教程

JavaScript 教程

1477045519425045


Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的,它在jQuery的基礎(chǔ)上進(jìn)行了更為個(gè)性化和人性化的完善,形成一套自己獨(dú)有的網(wǎng)站風(fēng)格,并兼容大部分jQuery插件。

Bootstrap 簡(jiǎn)潔靈活,使得 Web 開發(fā)更加快捷。其最大的優(yōu)勢(shì)是響應(yīng)式布局,使得開發(fā)者可以方便的讓網(wǎng)頁無論在臺(tái)式機(jī)、平板設(shè)備、手機(jī)上都獲得最佳的體驗(yàn)。

bootstrap教程結(jié)構(gòu)概述:

本教程共由5個(gè)章節(jié)構(gòu)成,詳細(xì)講述了 Bootstrap 的基礎(chǔ)使用方法并附帶了大量可在線試運(yùn)行的實(shí)例輔助您的學(xué)習(xí),讓您輕松掌握 Bootstrap。

本教程包含:

1、《bootstrap 簡(jiǎn)介

2、《Bootstrap CSS

3、《Bootstrap 布局組件

4、《Bootstrap 插件

5、《Bootstrap 相關(guān)內(nèi)容

bootstrap的發(fā)展:

2010年6月,為了提高內(nèi)部的協(xié)調(diào)性和工作效率,Twitter 公司的幾個(gè)前端開發(fā)人員自發(fā)成立了一個(gè)興趣小組,Bootstrap的構(gòu)想產(chǎn)生了。他們希望通過這個(gè)工具包提供一種精致的、經(jīng)典的、得到充分認(rèn)可的,且使用HTML、CSS和JavaScript構(gòu)建的組件,為用戶建立和創(chuàng)建靈活的設(shè)計(jì)和豐富的插件庫。

2011年8月,Twitter 將其開源,至今 Bootstrap 已發(fā)展到包括幾十個(gè)組件,并已成為最受歡迎的 Web 前端框架之一。Bootstrap 是最穩(wěn)定,響應(yīng)最好的框架之一。它被各種水平的開發(fā)者所喜愛,即使是一個(gè)只具備 HTML 和一些 CSS 基礎(chǔ)知識(shí)的初學(xué)者也能夠輕易地上手 Bootstrap。

在2015年8月下旬,Bootstrap 四周歲之際,Bootstrap 團(tuán)隊(duì)發(fā)布了 Bootstrap 4 alpha 版。

Bootstrap4 的的更新主要提升了以下幾個(gè)方面:

  • 從 Less 遷移到 Sass
  • 改進(jìn)網(wǎng)格系統(tǒng)
  • 缺省彈性框支持
  • Dropped wells, thumbnails, and panels for cards
  • 合并所有 HTML resets 到一個(gè)新的模塊中:Reboot
  • 全新自定義選項(xiàng)
  • 不再支持 IE8
  • 重寫所有的 JavaScript 插件
  • 改進(jìn)工具提示和 popovers 的自動(dòng)定位
  • 改進(jìn)文檔
  • 其他大量改進(jìn)

bootstrap的缺點(diǎn):

雖然 Bootstrap 自適應(yīng)效果很好,但是缺點(diǎn)是不方便修改樣式,對(duì)細(xì)節(jié)的不好把握,而且Bootstrap 是由 Twitter 的開發(fā)者開發(fā)來系統(tǒng)化他們網(wǎng)站應(yīng)用的樣式。當(dāng)你的網(wǎng)站應(yīng)用的樣式和他們不一樣,這意味著你不得不覆蓋掉他們的樣式來。大多數(shù)網(wǎng)站的樣式并不像 Twitter 那樣。因此,如果他們安裝 Bootstrap ,他們會(huì)覆蓋掉很多樣式。

bootstrap的安裝:

官網(wǎng)下載地址:http://getbootstrap.com/ 

中文網(wǎng)下載地址:http://www.bootcss.com/

如果您使用的是未編譯的源代碼,您需要編譯 LESS 文件來生成可重用的 CSS 文件。對(duì)于編譯 LESS 文件,Bootstrap 官方只支持 Recess,這是 Twitter 的基于 less.js 的 CSS 提示。

具體的安裝方法您可以按照本手冊(cè)中的《Bootstrap 環(huán)境安裝

除了本教程,您還可以在w3cschool上學(xué)習(xí):

Bootstrap 手冊(cè)

《Bootstrap4 教程》

要想更加全面的掌握 Bootstrap 框架技術(shù),你可以在本站學(xué)習(xí)湯小洋老師的《通俗易懂的Bootstrap視頻課程》!


w3cschool編程獅微信公眾號(hào)


在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)