<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- jquery库 --> <script src="http://code.jquery.com/jquery-1.8.3.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>
</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>
按钮、按钮组：
<a href="" class="btn btn-default">default</a> <a href="" class="btn btn-primary">primary</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>
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>
!!!常用bootstrap代码,布布扣,bubuko.com
原文：http://www.cnblogs.com/qq21270/p/3790635.html