国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

directory search
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類(lèi) Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁(yè) Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁(yè)面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁(yè)（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy） Bootstrap 過(guò)渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
characters

Bootstrap 環(huán)境安裝

Bootstrap 安裝是非常容易的。本章將講解如何下載并安裝 Bootstrap，討論 Bootstrap 文件結(jié)構(gòu)，并通過(guò)一個(gè)實(shí)例演示它的用法。

下載 Bootstrap

您可以從 Bootstrap中文網(wǎng) 上下載 Bootstrap 的最新版本。當(dāng)您點(diǎn)擊這個(gè)鏈接時(shí)，您將看到如下所示的網(wǎng)頁(yè)：

Bootstrap 下載

您會(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ú)立的功能開(kāi)發(fā)中，您不必每次都包含這些獨(dú)立的文件。

本教程編寫(xiě)時(shí)，使用的是最新版（Bootstrap 3）。

文件結(jié)構(gòu)

預(yù)編譯的 Bootstrap

當(dāng)您下載了 Bootstrap 的已編譯的版本，解壓縮 ZIP 文件，您將看到下面的文件/目錄結(jié)構(gòu)：

已編譯的 Bootstrap 文件結(jié)構(gòu)

如上圖所示，可以看到已編譯的 CSS 和 JS（bootstrap.*），以及已編譯壓縮的 CSS 和 JS（bootstrap.min.*）。同時(shí)也包含了 Glyphicons 的字體，這是一個(gè)可選的 Bootstrap 主題。

Bootstrap 源代碼

如果您下載了 Bootstrap 源代碼，那么文件結(jié)構(gòu)將如下所示：

Bootstrap 源代碼結(jié)構(gòu)

  • less/、js/ 和 fonts/ 下的文件分別是 Bootstrap CSS、JS 和圖標(biāo)字體的源代碼。
  • dist/ 文件夾包含了上面預(yù)編譯下載部分中所列的文件和文件夾。
  • docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文檔。

HTML 模板

一個(gè)使用了 Bootstrap 的基本的 HTML 模板如下所示：

<!DOCTYPE?html>
<html>
???<head>
??????<title>Bootstrap?模板</title>
??????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
??????<!--?引入?Bootstrap?-->
??????<link?>

??????<!--?HTML5?Shim?和?Respond.js?用于讓?IE8?支持?HTML5元素和媒體查詢(xún)?-->
??????<!--?注意：?如果通過(guò)?file://??引入?Respond.js?文件，則該文件無(wú)法起效果?-->
??????<!--[if?lt?IE?9]>
?????????<script?src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
?????????<script?src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
??????<![endif]-->
???</head>
???<body>
??????<h1>Hello,?world!</h1>

??????<!--?jQuery?(Bootstrap?的?JavaScript?插件需要引入?jQuery)?-->
??????<script?src="https://code.jquery.com/jquery.js"></script>
??????<!--?包括所有已編譯的插件?-->
??????<script?src="js/bootstrap.min.js"></script>
???</body>
</html>

在這里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于讓一個(gè)常規(guī)的 HTML 文件變?yōu)槭褂昧?Bootstrap 的模板。

有關(guān)上面代碼段中每個(gè)元素的細(xì)節(jié)將在 Bootstrap CSS 概覽 章節(jié)詳細(xì)講解。

實(shí)例

現(xiàn)在讓我們嘗試使用Bootstrap輸出"Hello, world!"：

<!DOCTYPE?html>
<html>
<head>
???<title>在線(xiàn)嘗試?Bootstrap?實(shí)例</title>
???<link?>
???<script?src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
???<script?src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

??????<h1>Hello,?world!</h1>

</body>
</html>

Bootstrap CDN推薦

本站實(shí)例采用的是百度的靜態(tài)資源庫(kù)(http://cdn.code.baidu.com/)上的Bootstrap資源。

百度的靜態(tài)資源庫(kù)的 CDN 服務(wù)，訪(fǎng)問(wèn)速度更快、加速效果更明顯、沒(méi)有速度和帶寬限制、永久免費(fèi),引入代碼如下：

<!--?新?Bootstrap?核心?CSS?文件?-->
<link?>

<!--?可選的Bootstrap主題文件（一般不使用）?-->
<script?src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

<!--?jQuery文件。務(wù)必在bootstrap.min.js?之前引入?-->
<script?src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

<!--?最新的?Bootstrap?核心?JavaScript?文件?-->
<script?src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Previous article： Next article：