Bootstrap 3 简介 - Bootstrap 3 基础教程

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架

为什么使用 Bootstrap ？

移动设备优先 ：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式
浏览器支持 ：所有的主流浏览器都支持 Bootstrap
容易上手 ：只要具备 HTML 和 CSS 的基础知识，就可以开始学习 Bootstrap
响应式设计 ：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机

更多有关响应式设计的内容详见 Bootstrap 响应式设计
它为开发人员创建接口提供了一个简洁统一的解决方案
它包含了功能强大的内置组件，易于定制
它还提供了基于 Web 的定制
它是开源的

在线范例

你可以使用我们的在线编辑器在线编辑代码，并点击运行按钮查看结果

<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>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>当你想要表现什么的时候，请转发，否则，请评论</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>当你想要表现什么的时候，请转发，否则，请评论</p>
    </div>
  </div>
</div>

运行范例 »

范例 2

<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>

运行范例 »