Bootstrap 简介

什么是 Bootstrap?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端结构。Bootstrap 是根据 HTML、CSS、JAVASCRIPT 的。

前史

Bootstrap 是由 TwitterMark OttoJacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

为什么运用 Bootstrap?

  • 移动设备优先:自 Bootstrap 3 起,结构包括了贯穿于整个库的移动设备优先的款式。
  • 浏览器支撑:一切的干流浏览器都支撑 Bootstrap。

    Internet Explorer Firefox Opera Google Chrome Safari

  • 简单上手:只需您具有 HTML 和 CSS 的基础常识,您就能够开端学习 Bootstrap。
  • 呼应式规划:Bootstrap 的呼应式 CSS 能够自适应于台式机、平板manbet和手机。更多有关呼应式规划的内容详见 Bootstrap 呼应式规划

    呼应式规划

  • 它为开发人员创立接口供给了一个简练一致的解决方案。
  • 它包括了功能强大的内置组件,易于定制。
  • 它还供给了根据 Web 的定制。
  • 它是开源的。

Bootstrap 包的内容

  • 根本结构:Bootstrap 供给了一个带有网格体系、链接款式、布景的根本结构。这将在 Bootstrap 根本结构 部分具体解说。
  • CSS:Bootstrap 自带以下特性:大局的 CSS 设置、界说根本的 HTML 元素款式、可扩展的 class,以及一个先进的网格体系。这将在 Bootstrap CSS 部分具体解说。
  • 组件:Bootstrap 包括了十几个可重用的组件,用于创立图画、下拉菜单、导航、正告框、弹出框等等。这将在 布局组件 部分具体解说。
  • JavaScript 插件:Bootstrap 包括了十几个自界说的 jQuery 插件。您能够直接包括一切的插件,也能够逐一包括这些插件。这将在 Bootstrap 插件 部分具体解说。

  • 定制:您能够定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版别。


在线实例

本站的 Bootstrap 教程包括了上百个实例。

你能够运用咱们的在线修改器在线修改代码,并点击运转按钮检查成果。

Bootstrap 实例

<div class="container">
  <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置窗口巨细,检查呼应式作用!</p>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>学习使人前进!</p>
      <p>骄傲使人落后!</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>学习使人前进!</p>
      <p>骄傲使人落后!</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>学习使人前进!</p>
      <p>骄傲使人落后!</p>
    </div>
  </div>
</div>

测验一下 »


更多实例

Bootstrap 实例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>

测验一下 »

点击 "测验一下" 按钮检查它是怎么作业的。