Bootstrap 簡(jiǎn)介

什么是 Bootstrap？

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

Bootstrap 目前的最新版本是 Bootstrap4，利用我們提供的 Sass 變量和大量 mixin、響應(yīng)式柵格系統(tǒng)、可擴(kuò)展的預(yù)制組件、基于 jQuery 的強(qiáng)大的插件系統(tǒng)，能夠快速為你的想法開發(fā)出原型或者構(gòu)建整個(gè) app 。

歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。

為什么使用 Bootstrap？

  • 移動(dòng)設(shè)備優(yōu)先：自 Bootstrap 3 起，框架包含了貫穿于整個(gè)庫(kù)的移動(dòng)設(shè)備優(yōu)先的樣式。

  • 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。

    Internet Explorer Firefox Opera Google Chrome Safari

  • 容易上手：只要您具備 HTML 和 CSS 的基礎(chǔ)知識(shí)，您就可以開始學(xué)習(xí) Bootstrap。

  • 響應(yīng)式設(shè)計(jì)：Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)。

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

  • 它為開發(fā)人員創(chuàng)建接口提供了一個(gè)簡(jiǎn)潔統(tǒng)一的解決方案。

  • 它包含了功能強(qiáng)大的內(nèi)置組件，易于定制。

  • 它還提供了基于 Web 的定制。

  • 它是開源的。

Bootstrap 包的內(nèi)容

  • 基本結(jié)構(gòu)：Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細(xì)講解。

  • CSS：Bootstrap 自帶以下特性：全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class，以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細(xì)講解。

  • 組件：Bootstrap 包含了十幾個(gè)可重用的組件，用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。這將在 布局組件 部分詳細(xì)講解。

  • JavaScript 插件：Bootstrap 包含了十幾個(gè)自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個(gè)包含這些插件。這將在 Bootstrap 插件 部分詳細(xì)講解。

  • 定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來(lái)得到您自己的版本。

在線實(shí)例

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

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

Bootstrap 實(shí)例

<div class="container">
 <div class="jumbotron">
    <h1>我的第一個(gè) Bootstrap 頁(yè)面</h1>
    <p>重置窗口大小，查看響應(yīng)式效果！</p>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>學(xué)技術(shù)，從W3Cschool開始！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>學(xué)技術(shù)，從W3Cschool開始！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>學(xué)技術(shù)，從W3Cschool開始！</p>
    </div>
  </div>
</div>

嘗試一下 ?

更多實(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>

嘗試一下 ?


Bootstrap4 實(shí)例

Bootstrap4 實(shí)例

<div class="container">
 <div class="jumbotron">
    <h1>我的第一個(gè) Bootstrap 頁(yè)面</h1>
    <p>重置窗口大小，查看響應(yīng)式效果！</p>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>學(xué)技術(shù)，從W3Cschool開始！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>學(xué)技術(shù)，從W3Cschool開始！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>學(xué)技術(shù)，從W3Cschool開始！</p>
    </div>
  </div>
</div>

嘗試一下 ?



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