http://v3.bootcss.com/components/ 组件
http://v3.bootcss.com/customize/ bootstrap定制 http://v3.bootcss.com/css/ bootstrap全局样式
http://www.bootcss.com/p/layoutit/ Bootstrap可视化布局 LayoutIt!
http://www.bootcss.com/p/bootstrap-form-builder/ Bootstrap Form Builder 在线表单构造器
http://www.ziqiangxuetang.com/bootstrap/bootstrap-tutorial.html 教程
http://expo.bootcss.com/ 优站精选 2015-11-30
http://www.cssmoban.com/tags.asp?page=3&n=Bootstrap 网上的一些模板 2015-11-30
http://www.hello-code.com/blog/Bootstrap/201602/5890.html Bootstrap教程- Table 表格行实现多行同时拖拽效果（稍后阅读） 2016-2-23
http://bbs.csdn.net/topics/391915765 整理了一下bootstrap整体构架图 2016-3-16
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- jquery库 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- bootstrap库 --> <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6">sss</div> <div class="col-md-6">sss</div> </div> </div> </body> </html>
布局：
.col-xs- .col-sm- .col-md- .col-lg- <div class="container"> <div class="row"> <div class="col-md-6">sss</div> <div class="col-md-6">sss</div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-3 col-md-offset-3">sss</div> <div class="col-md-3">sss</div> </div> </div>
列表：
<ul class="list-unstyled"> <li>列表1111111</li> <li>列表1111111</li> </ul> <ul class="list-inline"> <li>列表2222222</li> <li>列表2222222</li> </ul> <dl class="dl-horizontal"> <dt>列表33333</dt> <dd>列表33333</dd> </dl>
TABLE：
<table class="table"><tr><th>表头</th><th>表头</th></tr><tr><td>table</td><td> </td></tr></table> <table class="table table-striped"><tr><th>表头</th><th>表头</th></tr><tr><td>table-striped</td><td> </td></tr></table> <table class="table table-bordered"><tr><th>表头</th><th>表头</th></tr><tr><td>table-bordered</td><td> </td></tr></table> <table class="table table-condensed"><tr><th>表头</th><th>表头</th></tr><tr><td>table-condensed</td><td> </td></tr></table> <div class="table-responsive"> <table class="table"><tr><td>啊啊啊</td></tr></table> </div>
这是一个不依赖bootstrap的<TABLE>： 2016-6-2
<style type="text/css"> .table1 td{border:1px solid #ececec;padding:5px;vertical-align:top;} .table1 {border-collapse:collapse;border-spacing:0;} </style> <table class="table1"> <tr><td>aa</td><td>aa</td><td>aa</td></tr> <tr><td>aa</td><td>aa</td><td>aa</td></tr> </table>
按钮、按钮组：
<a href="" class="btn btn-primary">primary</a> <a href="" class="btn btn-default">default</a> <a href="" class="btn btn-success">success</a> <a href="" class="btn btn-info">info</a> <a href="" class="btn btn-warning">warning</a> <a href="" class="btn btn-danger">danger</a> <hr> <a href="" class="btn btn-lg btn-primary">大按钮</a> <a href="" class="btn btn-lg btn-default">大按钮</a> <a href="" class="btn btn-primary">普通按钮</a> <a href="" class="btn btn-default">普通按钮</a> <a href="" class="btn btn-sm btn-primary">小按钮</a> <a href="" class="btn btn-sm btn-default">小按钮</a> <a href="" class="btn btn-xs btn-primary">超小型按钮</a> <a href="" class="btn btn-xs btn-default">超小型按钮</a>
btn-group-lg , btn-group-sm , btn-group-xs <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button> </div>
<div class="btn-group-vertical"> <button type="button" class="btn btn-default">上</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">下</button> </div>
<div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown111111</a></li> <li><a href="#">Dropdown222222</a></li> </ul> </div> </div>
表单、输入框：
<div class="input-group"> <span class="input-group-addon">姓名</span> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group"> <span class="input-group-addon">性别</span> <span class="form-control"> <input type="radio" name="sex">男 <input type="radio" name="sex">女 </span> </div>
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"><input type="radio" name="sex" value="男">男</label> <label class="btn btn-primary"><input type="radio" name="sex" value="女">女</label> </div>
<form class="form-inline"> <!-- 在同一行内 --> <input type="text" name="abc" value="" class="form-control"> <input type="submit" value="提交" class="btn btn-primary"> </form>
<!-- 内联表单 --> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="email22">Email</label> <input type="email" class="form-control" id="email22" placeholder="Enter email"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form>
<!-- 水平排列的表单 --> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="email33" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email33" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form>
搜索框：
<div class="input-group" style="200px;margin:0 auto;"> <input type="text" class="form-control" placeholder="手机..." maxlength="11" > <div class="input-group-btn"> <button type="submit" class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span> </button> </div> </div>
正文导航按钮：
<div class="btn-group buttons"> <a class="btn btn-primary" href="add.html"><span class="glyphicon glyphicon-plus"></span>添加</a> <a class="btn btn-default" href="list.html"><span class="glyphicon glyphicon-align-justify"></span>列表</a> </div>
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
http://www.bootcss.com/p/bootstrap-datetimepicker/ Bootstrap日期时间选择器 DateTime Picker http://www.58img.com/framework/813
http://www.bootcss.com/p/bootstrap-wysiwyg/ 为Bootstrap定制的微型所见即所得（What you see is what you get）富文本编辑器
阅读
http://www.58img.com/framework/1229 Bootstrap,Foundation,Pure优劣对比总结！