bootstrap 按钮

按钮

默认按钮

任何赋予.btn类的页面元素都会显示按钮样式。不过，通常是用于更好的表现<a> 和 <button> 页面元素。

按钮class=""描述
btn 带渐变的标准灰色按钮
btn btn-primary 提供额外的视觉感, 可在一系列的按钮中指出主要操作
btn btn-info 默认样式的替代样式
btn btn-success 表示成功或积极的动作
btn btn-warning 提醒应该谨慎采取这个动作
btn btn-danger 表示这个动作危险或存在危险
btn btn-inverse 备用的暗灰色按钮，不依赖于语义和用途
btn btn-link 简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为

浏览器兼容性

IE9 不支持圆角的背景渐变，所以我们干脆移除了。 IE9 jankifies 禁用了button元素， 显示文本为灰色并带有很垃圾的阴影，这个我们实在无法修复。

按钮大小

想使用更大或更小的按钮吗？添加.btn-large、.btn-small 或 .btn-mini即可改变按钮大小。

 

 

 

 

  1. <p>
  2. <button class="btn btn-large btn-primary" type="button">Large button</button>
  3. <button class="btn btn-large" type="button">Large button</button>
  4. </p>
  5. <p>
  6. <button class="btn btn-primary" type="button">Default button</button>
  7. <button class="btn" type="button">Default button</button>
  8. </p>
  9. <p>
  10. <button class="btn btn-small btn-primary" type="button">Small button</button>
  11. <button class="btn btn-small" type="button">Small button</button>
  12. </p>
  13. <p>
  14. <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  15. <button class="btn btn-mini" type="button">Mini button</button>
  16. </p>

通过添加.btn-block类，可使按钮变为块级元素，同时会填充整个父级元素。

  1. <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
  2. <button class="btn btn-large btn-block" type="button">Block level button</button>

禁用状态

颜色淡出50%，让按钮看起来无法点击。

链接元素

给<a>元素添加.disabled类。

Primary link Link

  1. <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
  2. <a href="#" class="btn btn-large disabled">Link</a>

注意！ 我们将.disabled作为一个工具类，和常见的.active类一样，因此无需添加前缀。另外，这个类只是为了美观，你必须自己写JavaScript代码来禁止链接的行为。

按钮元素

给<button>添加disabled属性。

 

  1. <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
  2. <button type="button" class="btn btn-large" disabled>Button</button>

一个类支持多种标签

可以给<a>、<button>或<input>元素添加.btn类。

Link   
  1. <a class="btn" href="">Link</a>
  2. <button class="btn" type="submit">Button</button>
  3. <input class="btn" type="button" value="Input">
  4. <input class="btn" type="submit" value="Submit">

最佳实践是，根据使用环境，尝试找到一个合适的元素，以确保渲染的效果在各个浏览器保存基本一致。如果你正使用着一个input，那么你的按钮可使用 <input type="submit">。

https://v2.bootcss.com/base-css.html#buttons

posted @ 2019-10-09 09:49  韩梦芫  阅读(534)  评论(0)    收藏  举报