bootstrap，目前市面上最受欢迎HTML、CSS、JavaScript框架，用于开发响应式布局、移动设备优先的 WEB 项目。
从今天起，我们就开始整理bootstrap的相关技能点。
1
什么是 Bootstrap呢？
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目【官方定义】。
2
为什么使用 Bootstrap？
- 容易上手：
只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。 - 响应式设计：
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
更多有关响应式设计的内容详见 Bootstrap 响应式设计
当然官方文档里面还有其他的，我觉得最重要的莫属这两点了。
4
下面先看两个简单的bootstrap的实例
实例一：
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>我的第一个 Bootstrap 页面</h1> <p>重置窗口大小，查看响应式效果！</p> </div> <div class="row"> <div class="col-sm-4"> <h3>第一列</h3> <p>学的不仅是技术，更是梦想！</p> <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p> </div> <div class="col-sm-4"> <h3>第二列</h3> <p>学的不仅是技术，更是梦想！</p> <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p> </div> <div class="col-sm-4"> <h3>第三列</h3> <p>学的不仅是技术，更是梦想！</p> <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p> </div> </div> </div> </body> </html>
下面是运行结果：
电脑端：
手机端：
实例二：
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <!-- 包含头部信息用于适应不同设备 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 包含 bootstrap 样式表 --> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>表格</h2> <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</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> <h2>图像</h2> <p>创建项应式图片(将扩展到父元素)。另外：图片以椭圆型展示：</p> <img src="/upload/images/201509/40d5e05de34.gif" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236"> <h2>图标</h2> <p>插入图标:</p> <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p> <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p> <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p> <p>打印图标: <span class="glyphicon glyphicon-print"></span></p> <p>下载图标：<span class="glyphicon glyphicon-download"></span></p> </div> <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 --> <!-- 可选: 包含 jQuery 库 --> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 可选: 合并了 Bootstrap JavaScript 插件 --> <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
运行结果：
