Bootstrap 教程

什么是 Bootstrap?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

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

为什么使用 Bootstrap?

  • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
  • 浏览器支持:所有的主流浏览器都支持 Bootstrap。

  • 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
  • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见

    Bootstrap 实例

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 实例</title>
    <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    <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>
    </body>
    </html>