首页 > 代码库 > !!!常用bootstrap代码

!!!常用bootstrap代码

2024-07-08 10:34:16   229人阅读

<!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>&nbsp;</td></tr></table><table class="table table-striped"><tr><th>表头</th><th>表头</th></tr><tr><td>table-striped</td><td>&nbsp;</td></tr></table><table class="table table-bordered"><tr><th>表头</th><th>表头</th></tr><tr><td>table-bordered</td><td>&nbsp;</td></tr></table><table class="table table-condensed"><tr><th>表头</th><th>表头</th></tr><tr><td>table-condensed</td><td>&nbsp;</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>

 


联系
我们