Bootstrap-button

按钮(Buttons).Bootstrap提供多种样式的按钮,同样是通过CSS的类来控制,包括btn, btn-primary, btn-info,btn-success等不同颜色的按钮,亦可以简单通过.btn-large .btn-mini等CSS的class控制按钮大小,能够同时用在<a>,<button>,<input>标签上,非常简单易用。如图2-6所示,不同颜色的按钮:

图2-6 按钮(Buttons)

Html代码  收藏代码

  1. <table class="table table-bordered table-striped">  

  2.     <thead>  

  3.       <tr>  

  4.         <th>Button</th>  

  5.         <th>class=""</th>  

  6.         <th>Description</th>  

  7.       </tr>  

  8.     </thead>  

  9.     <tbody>  

  10.       <tr>  

  11.         <td><button class="btn" href="#">Default</button></td>  

  12.         <td><code>btn</code></td>  

  13.         <td>Standard gray button with gradient</td>  

  14.       </tr>  

  15.       <tr>  

  16.         <td><button class="btn btn-primary" href="#">Primary</button></td>  

  17.         <td><code>btn btn-primary</code></td>  

  18.         <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>  

  19.       </tr>  

  20.       <tr>  

  21.         <td><button class="btn btn-info" href="#">Info</button></td>  

  22.         <td><code>btn btn-info</code></td>  

  23.         <td>Used as an alternative to the default styles</td>  

  24.       </tr>  

  25.       <tr>  

  26.         <td><button class="btn btn-success" href="#">Success</button></td>  

  27.         <td><code>btn btn-success</code></td>  

  28.         <td>Indicates a successful or positive action</td>  

  29.       </tr>  

  30.       <tr>  

  31.         <td><button class="btn btn-warning" href="#">Warning</button></td>  

  32.         <td><code>btn btn-warning</code></td>  

  33.         <td>Indicates caution should be taken with this action</td>  

  34.       </tr>  

  35.       <tr>  

  36.         <td><button class="btn btn-danger" href="#">Danger</button></td>  

  37.         <td><code>btn btn-danger</code></td>  

  38.         <td>Indicates a dangerous or potentially negative action</td>  

  39.       </tr>  

  40.       <tr>  

  41.         <td><button class="btn btn-inverse" href="#">Inverse</button></td>  

  42.         <td><code>btn btn-inverse</code></td>  

  43.         <td>Alternate dark gray button, not tied to a semantic action or use</td>  

  44.       </tr>  

  45.     </tbody>  

  46.   </table>  

 


转载于:https://my.oschina.net/guomingliang/blog/268004

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值