Bootstrap 3 简介

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

为什么使用 Bootstrap ?

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

    更多有关响应式设计的内容详见 Bootstrap 响应式设计

  5. 它为开发人员创建接口提供了一个简洁统一的解决方案

  6. 它包含了功能强大的内置组件,易于定制
  7. 它还提供了基于 Web 的定制
  8. 它是开源的

在线范例

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

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

运行范例 »

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.