Boostrap學習--官網文檔

時間 2019-12-02

標籤 boostrap 學習文檔欄目 C&C++ 简体版

原文原文鏈接

下載編譯好的文件

快速開始:當即下載編譯好的版本吧，裏面已經包含了CSS、JS和圖片文件了，並且全部文件已經通過了壓縮處理。不過，文檔和源碼文件不包含哦。javascript

下載Bootstrapcss

下載源碼

從GitHub直接下載到的最新版的源碼包括CSS、JavaScript的源文件，以及一份文檔。html

下載Bootstrap源碼java

在下載的壓縮包中你能夠看到以下的文件結構和內容。全部文件按邏輯進行分類存儲，而且提供了編譯和壓縮兩個版本的文件。jquery

將下載的文件解壓縮以後就能夠看到以下的文件結構：git

  bootstrap/├── css/│├── bootstrap.css
  │├── bootstrap.min.css
  ├── js/│├── bootstrap.js
  │├── bootstrap.min.js
  └── img/├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

這就是Bootstrap的基本結構：編譯後的文件能夠快速應用於任何web項目。咱們提供了編譯版的CSS和JS文件 (bootstrap.*)，也同時提供了編譯並壓縮以後的CSS和JS文件 (bootstrap.min.*)。圖片文件是使用ImageOptim 工具進行壓縮的，這個工具是Mac平臺上用於壓縮PNG文件的一個app。github

請注意，全部的JavaScript插件都依賴jQuery庫。web

Bootstrap中的HTML、CSS和JS適用於各種設備, 不過它們能夠被歸納成幾個類別，請看本文檔頂部的導航條。bootstrap

文檔章節

腳手架

全局性的樣式文件，用於重置背景、連接樣式、柵格系統等，幷包含兩個簡單的佈局結構。app

基本CSS樣式

常見的HTML元素 -- 如排版、代碼、表格、表單、和按鈕的樣式。還包括 Glyphicons, 一個很是棒的圖標集。

組件

常見界面組件 -- 如標籤、pill、導航、警告、頁面標題的基本樣式。

JavaScript插件

和組件相似，這些Javascript插件用來實現提示(tooltip)、彈出框(popover)、模態對話框(modal)等具備交互性的組件。

組件列表

組件庫 和 JavaScript插件集 一同提供瞭如下組件元素。

按鈕組
按鈕下拉菜單
用於導航的標籤、pill、列表
導航條
Labels
Badges
Page headers and hero unit
縮略圖
警告對話框
進度條
模態對話框(Modals)
下拉菜單(Dropdowns)
Tooltips
Popovers
Accordion
Carousel
Typeahead

在後面的文檔中, 咱們會挨個詳細的介紹這些組件的細節。在此以前, 先來看看如何使用並定製它們。

爲了把注意力徹底放到使用Bootstrap上，咱們先作一點兒課前準備。爲了作到這一點，咱們將利用一個基本的HTML模板, 其中包括咱們在文件結構一章中提到的全部內容。

如今, 這裏展現一個典型的HTML文件：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<metaname="viewport"content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world!</h1>
<scriptsrc="http://code.jquery.com/jquery.js"></script>
</body>
</html>

爲了使其成爲一個Bootstrap模板, 須要包含相應的 CSS and JS 文件：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<scriptsrc="http://code.jquery.com/jquery.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

設置成功! 加入這兩個文件, 你就能夠開始用Bootstrap開發任何網站和應用程序了。

但願下面的幾個案例能引導你們在基礎模版的基礎上作發散性思惟。咱們鼓勵你們參考下面的案例觸類旁通，而不要僅僅是機械式的照抄。

相關文章

相關標籤/搜索

文檔向學習

Docker官方文檔

KAFKA官方文檔

Spark 官方文檔

Istio官方文檔

Redis官方文檔

AutoMapper官方文檔

網站品質教程

網站建設指南

網站主機教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<