時(shí)間:2019-08-17 16:29:01 作者:無(wú)名 瀏覽量:37
Bootstrap教程
大家好,隨著人們對(duì)生活的質(zhì)量要求越來(lái)越高,電腦已經(jīng)成為人們生活和工作中的必需品,電腦是有很多軟件系統(tǒng)程序組成,如果想要學(xué)好電腦,我們必須對(duì)這些軟件系統(tǒng)程序有所了解,今天小編就帶領(lǐng)大家學(xué)習(xí)Bootstrap。
什么是 Bootstrap?
Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。
為什么使用 Bootstrap?
移動(dòng)設(shè)備優(yōu)先:自 Bootstrap 3 起,框架包含了貫穿于整個(gè)庫(kù)的移動(dòng)設(shè)備優(yōu)先的樣式。
瀏覽器支持:所有的主流瀏覽器都支持 Bootstrap。
容易上手:只要您具備 HTML 和 CSS 的基礎(chǔ)知識(shí),您就可以開始學(xué)習(xí) Bootstrap。
響應(yīng)式設(shè)計(jì):Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)。更多有關(guān)響應(yīng)式設(shè)計(jì)的內(nèi)容詳見 Bootstrap 響應(yīng)式設(shè)計(jì)。
Bootstrap教程圖1
它為開發(fā)人員創(chuàng)建接口提供了一個(gè)簡(jiǎn)潔統(tǒng)一的解決方案。
它包含了功能強(qiáng)大的內(nèi)置組件,易于定制。
它還提供了基于 Web 的定制。
它是開源的。
Bootstrap 包的內(nèi)容
基本結(jié)構(gòu):Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細(xì)講解。
CSS:Bootstrap 自帶以下特性:全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class,以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細(xì)講解。
組件:Bootstrap 包含了十幾個(gè)可重用的組件,用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。這將在 布局組件 部分詳細(xì)講解。
JavaScript 插件:Bootstrap 包含了十幾個(gè)自定義的 jQuery 插件。您可以直接包含所有的插件,也可以逐個(gè)包含這些插件。這將在 Bootstrap 插件 部分詳細(xì)講解。
定制:您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來(lái)得到您自己的版本。
在線實(shí)例
本站的 Bootstrap 教程包含了上百個(gè)實(shí)例。
你可以使用我們的在線編輯器在線編輯代碼,并點(diǎn)擊運(yùn)行按鈕查看結(jié)果。
Bootstrap教程圖2
更多實(shí)例
Bootstrap教程圖3
點(diǎn)擊嘗試一下按鈕查看它是如何工作的。
Bootstrap 環(huán)境安裝
Bootstrap 安裝是非常容易的。本章將講解如何下載并安裝 Bootstrap,討論 Bootstrap 文件結(jié)構(gòu),并通過(guò)一個(gè)實(shí)例演示它的用法。
下載 Bootstrap
您可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。當(dāng)您點(diǎn)擊這個(gè)鏈接時(shí),您將看到如下所示的網(wǎng)頁(yè):
Bootstrap教程圖4
您會(huì)看到兩個(gè)按鈕:
Download Bootstrap:下載 Bootstrap。點(diǎn)擊該按鈕,您可以下載 Bootstrap CSS、JavaScript 和字體的預(yù)編譯的壓縮版本。不包含文檔和最初的源代碼文件。
Download Source:下載源代碼。點(diǎn)擊該按鈕,您可以直接從 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代碼。
如果您使用的是未編譯的源代碼,您需要編譯 LESS 文件來(lái)生成可重用的 CSS 文件。對(duì)于編譯 LESS 文件,Bootstrap 官方只支持 Recess,這是 Twitter 的基于 less.js 的 CSS 提示。
為了更好的了解和更方便的使用,我們將在本教程中使用 Bootstrap 的預(yù)編譯版本。
由于文件是被編譯過(guò)和壓縮過(guò)的,在獨(dú)立的功能開發(fā)中,您不必每次都包含這些獨(dú)立的文件。