博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap-button
阅读量:6487 次
发布时间:2019-06-23

本文共 1640 字,大约阅读时间需要 5 分钟。

hot3.png

按钮(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

你可能感兴趣的文章
产品规划,你通常规划多久的时间线?
查看>>
Android-MVP架构
查看>>
HTML5前端教程分享:CSS浏览器常见兼容问题
查看>>
Material Design之AppBarLayout
查看>>
一服多开
查看>>
从CVS迁移到SVN
查看>>
总部与前线
查看>>
微软推出Windows 10专业教育版:Cortana没了
查看>>
TensorFlow教程之API DOC 6.1.2Class tensorflow::EnvWrapper
查看>>
多目标跟踪突破:上交大&中兴 MOT Challenge 测评获第一
查看>>
控制ASP.NET Web API 调用频率
查看>>
系统诊断小技巧(7):利用Iptables进行排查和诊断的简易方案
查看>>
IPv6的渗透率比人们想象的要快速?
查看>>
针对Windows零日漏洞,微软是不是太过“无作为”了?
查看>>
推特解散商业团队 终止开发“Buy”按钮
查看>>
英特尔SSD:17年将专注于3D NAND和PCIe
查看>>
python (3):wxPython打包app,报错
查看>>
给网站更换服务器需要注意什么?
查看>>
成长型企业ERP系统实施的八大准则
查看>>
nginx重启脚本
查看>>