2018-11-07 11:23:12 qq_33368846 阅读数 1022

 

在线编辑:

http://www.runoob.com/try/try.php?filename=bootstrap-button-example

 

在线图标颜色参数快速获取(点击按钮获取htme代码):

http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

 

图标插件(若没有喜欢的按钮图标,则用这个去找):

http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

2018-03-07 09:58:54 ixygj197875 阅读数 9531

对于链接,只要添加 .disabled 类,就可以实现颜色变浅、褪掉渐变的效果,并让按钮看起来无法点击。当鼠标移动按钮上时,按钮的样式不再发生变化。如:

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

效果如图 3‑59所示:

Bootstrap禁用按钮式链接图3-59 Bootstrap禁用按钮式链接

需要注意的是,.disabled 类只能禁用CSS交互行为,而无法禁用按钮的默认行为。要禁用按钮的默认行为,还需要借助JavaScript脚本。

HTML表单控件包含一个 disabled 属性,也可以为按钮添加 disabled 属性来禁用按钮,就用不着 JavaScript 脚本了。Bootstrap中,包含 disabled 属性,跟包含 .disabled 类,具有相同的样式效果。如:

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

效果如图 3‑60所示:

Bootstrap禁用按钮图3-60 Bootstrap禁用按钮

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

2019-05-08 13:57:14 ixygj197875 阅读数 164

按钮的外观

Bootstrap中,使用 .btn 类来定义默认的按钮样式。默认按钮是灰色背景,并带有圆角。除 .btn 类之外,Bootstrap还为按钮提供了一组情景类,这些情景类通过为按钮设置不同的背景颜色,来表示不同的含义。见下表:

使用上表所列出的情景类,可以快速创建一个带有预定义样式的按钮。如:


 
  1. <button type="button" class="btn btn-default">Default</button>
  2. <button type="button" class="btn btn-primary">Primary</button>
  3. <button type="button" class="btn btn-success">Success</button>
  4. <button type="button" class="btn btn-info">Info</button>
  5. <button type="button" class="btn btn-warning">Warning</button>
  6. <button type="button" class="btn btn-danger">Danger</button>
  7. <button type="button" class="btn btn-link">Link</button>

效果如图 2‑72所示:

按钮的外观

图2-72 按钮的外观

需要注意的是,为按钮添加不同的颜色,只是一种视觉上的信息表达方式,但是,对于使用辅助技术(如,屏幕阅读器)的用户来说,颜色是不可见的。因此,应该确保通过颜色表达的信息能够通过内容自身(如,按钮上的文字)或者其他方式(如,通过.sr-only类隐藏的额外文本)表达出来。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

2019-05-08 13:56:29 ixygj197875 阅读数 58

支持的元素

Bootstrap中,为 <a><button><input> 元素添加按钮相关的类,就可以让它使用Bootstrap提供的按钮样式,并拥有按钮的外观。如: 

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

效果如图 2‑71所示:

按钮

图2-71 按钮

需要注意的是,如果<a>元素被作为按钮使用,并用于在当前页面触发某些功能,而不是用于链接到其他页面或链接当前页面的其他部分,请务必为它设置role="button"属性。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

2019-05-08 13:57:48 ixygj197875 阅读数 468

按钮的尺寸

需要让按钮具有不同尺寸吗?Bootstrap为按钮提供了 3 个尺寸类,可以获得不同尺寸的按钮。如果希望比默认按钮大一些,使用 .btn-lg 类;如果希望比默认按钮小一些,使用 .btn-sm.btn-xs 类。如:


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

效果如图 2‑73所示:

按钮的尺寸

图2-73 按钮的尺寸

如果想创建一个“块级”按钮,也没问题。只需给按钮添加.btn-block类,就可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。如:


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

效果如图 2‑74所示:

块级按钮

图2-74 块级按钮

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

Bootstrap 按钮的外观

阅读数 1573

Bootstrap按钮的状态

阅读数 174

Bootstrap 按钮组

阅读数 1016

Bootstrap-查询按钮和重置按钮

博文 来自: jrrfgj
没有更多推荐了,返回首页