码迷,mamicode.com
首页 > 其他好文 > 详细

!!!常用bootstrap代码

时间:2014-06-18 19:21:25      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   http   ext   

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

 

!!!常用bootstrap代码,布布扣,bubuko.com

!!!常用bootstrap代码

标签:style   class   blog   code   http   ext   

原文地址:http://www.cnblogs.com/qq21270/p/3790635.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!