亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

annuaire recherche
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例:堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例:手機(jī)、平板電腦、臺式電腦 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 多媒體對象(Media Object) Bootstrap 分頁 Bootstrap 徽章(Badges) Bootstrap 進(jìn)度條 Bootstrap 警告(Alerts) Bootstrap 列表組 Bootstrap 面板(Panels) Bootstrap 面包屑導(dǎo)航(Breadcrumbs) Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單(Dropdowns) Bootstrap 頁面標(biāo)題(Page Header) Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕(Button) Bootstrap 標(biāo)簽頁(Tab) Bootstrap 插件概覽 Bootstrap 彈出框(Popover) Bootstrap 附加導(dǎo)航(Affix) Bootstrap 滾動監(jiān)聽(Scrollspy) Bootstrap 過渡效果(Transition) Bootstrap 警告框(Alert) Bootstrap 輪播(Carousel) Bootstrap 模態(tài)框(Modal)插件 Bootstrap 提示工具(Tooltip) Bootstrap 下拉菜單(Dropdown) Bootstrap 折疊(Collapse) Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
personnages

Bootstrap 教程


什么是 Bootstrap?

Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

歷史

Bootstrap 是由 TwitterMark OttoJacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。

為什么使用 Bootstrap?

  • 移動設(shè)備優(yōu)先:自 Bootstrap 3 起,框架包含了貫穿于整個庫的移動設(shè)備優(yōu)先的樣式。
  • 瀏覽器支持:所有的主流瀏覽器都支持 Bootstrap。

    Internet ExplorerFirefoxOperaGoogle ChromeSafari

  • 容易上手:只要您具備 HTML 和 CSS 的基礎(chǔ)知識,您就可以開始學(xué)習(xí) Bootstrap。
  • 響應(yīng)式設(shè)計:Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺式機(jī)、平板電腦和手機(jī)。更多有關(guān)響應(yīng)式設(shè)計的內(nèi)容詳見 Bootstrap 響應(yīng)式設(shè)計

    響應(yīng)式設(shè)計

  • 它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案。
  • 它包含了功能強(qiáng)大的內(nèi)置組件,易于定制。
  • 它還提供了基于 Web 的定制。
  • 它是開源的。

Bootstrap 包的內(nèi)容

  • 基本結(jié)構(gòu):Bootstrap 提供了一個帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細(xì)講解。
  • CSS:Bootstrap 自帶以下特性:全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class,以及一個先進(jìn)的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細(xì)講解。
  • 組件:Bootstrap 包含了十幾個可重用的組件,用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。這將在 布局組件 部分詳細(xì)講解。
  • JavaScript 插件:Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件,也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細(xì)講解。
  • 定制:您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。

在線實(shí)例

本站的 Bootstrap 教程包含了上百個實(shí)例。

你可以使用我們的在線編輯器在線編輯代碼,并點(diǎn)擊運(yùn)行按鈕查看結(jié)果。

Bootstrap 實(shí)例

<div class="container">
? <div class="jumbotron">
??? <h1>我的第一個 Bootstrap 頁面</h1>
? ? <p>重置窗口大小,查看響應(yīng)式效果!</p>
? </div>
? <div class="row">
??? <div class="col-sm-4">
????? <h3>Column 1</h3>
????? <p>學(xué)的不僅是技術(shù),更是夢想!</p>
????? <p>再牛逼的夢想,也抵不住你傻逼似的堅持!</p>
??? </div>
??? <div class="col-sm-4">
????? <h3>Column 2</h3>
????? <p>學(xué)的不僅是技術(shù),更是夢想!</p>
????? <p>再牛逼的夢想,也抵不住你傻逼似的堅持!</p>
??? </div>
??? <div class="col-sm-4">
????? <h3>Column 3</h3>
????? <p>學(xué)的不僅是技術(shù),更是夢想!</p>
????? <p>再牛逼的夢想,也抵不住你傻逼似的堅持!</p>
??? </div>
? </div>
</div>
效果預(yù)覽 ?

更多實(shí)例

Bootstrap 實(shí)例2

<div class="container">
? <p>Create a responsive table with alternating cell background color:</p>
?
? <div class="table-responsive">
??? <table class="table table-striped table-bordered">
????? <thead>
??????? <tr>
????????? <th>#</th>
????????? <th>Name</th>
????????? <th>Street</th>
??????? </tr>
????? </thead>
????? <tbody>
??????? <tr>
????????? <td>1</td>
????????? <td>Anna Awesome</td>
????????? <td>Broome Street</td>
??????? </tr>
??????? <tr>
????????? <td>2</td>
????????? <td>Debbie Dallas</td>
????????? <td>Houston Street</td>
??????? </tr>
??????? <tr>
????????? <td>3</td>
????????? <td>John Doe</td>
????????? <td>Madison Street</td>
??????? </tr>
????? </tbody>
??? </table>
? </div>

</div>
效果預(yù)覽 ?

點(diǎn)擊 "嘗試一下" 按鈕查看它是如何工作的。

Article précédent: Article suivant: