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