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