Bootstrap 全局CSS样式: 按钮类的使用

简介: Bootstrap 框架

作者: WangMin
格言: 努力做好自己喜欢的每一件事

1.png

可作为按钮使用的标签或元素

<a><button><input>元素添加按钮类(button class)都可使用 Bootstrap 提供的样式。

<a href="" class="btn btn-default" role="button">link 链接</a>
<button class="btn btn-default" type="submit">button 按钮</button>
<input type="button" class="btn btn-default" value="input">
<input type="submit" class="btn btn-default" value="submit">

1.png

注意
(1)虽然按钮类可以应用到<a><button>元素上,但是,导航和导航条组件只支持<button>元素。
(2)如果<a>元素被作为按钮使用, 并用于在当前页面触发某些功能,而不是用于链接其他页面或链接当前页面中的其他部分,那么,必须给 a 标签添加role="button"属性。


预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

<button type="button" class="btn btn-default">默认样式</button>
<button type="button" class="btn btn-primary">首选项</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">一般信息</button>
<button type="button" class="btn btn-warning">警告样式</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">link 链接</button>

2.png


尺寸

如果需要不同尺寸的按钮,使用.btn-lg.btn-sm.btn-xs就可以获得不同尺寸的按钮。

<p>
    <button type="button" class="btn btn-primary btn-lg">(首选项)大按钮</button>
    <button type="button" class="btn btn-default btn-lg">(默认样式)大按钮</button>
</p>
<p>
    <button type="button" class="btn btn-primary">(首选项)默认尺寸1</button>
    <button type="button" class="btn btn-default">(默认样式)默认尺寸2</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">(首选项)小按钮</button>
    <button type="button" class="btn btn-default btn-sm">(默认样式)小按钮</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">(首选项)超小按钮</button>
    <button type="button" class="btn btn-default btn-xs">(默认样式)超小按钮</button>
</p>

3.png

通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。


激活状态

当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于<button>元素,是通过:active状态实现的。对于<a>元素,是通过.active类实现的。
1. button 元素
由于:active是伪状态,按下就会处于激活状态,但是如果需要让 button呈现出同样外观的时候可以添加.active类。

<button type="button" class="btn btn-primary btn-lg active">primary button</button>

激活后的状态 :
4.png

2. 链接(<a>)元素
可以为基于<a>元素创建的按钮添加.active类。

<a href="javascript:;" class="btn btn-primary btn-lg active" role="button">primary button</a>

激活后的状态 :
5.png


禁用状态

通过为按钮的背景设置opacity属性就可以呈现出无法点击的效果。
1. button 元素
<button>元素添加disabled属性,让按钮表现出禁用状态。

<button type="button" class="btn btn-primary btn-lg active" disabled="disabled">primary button</button>

6.png

注意:跨浏览器兼容性。如果为<button>元素添加disabled属性,Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有阴影,
目前还没有解决办法。
7.png

2. 链接(<a>)元素
<a>元素创建的按钮添加.disabled类。

<a href="javascript:;" class="btn btn-primary btn-lg active disabled" role="button">primary button</a>

8.png

注意:a 标签的链接的原始功能不受影响,如果不需要链接功能,建议通过 JavaScript 代码来禁止链接的原始功能。


就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
5天前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
6 0
|
9天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
12天前
|
前端开发
css html 渐变按钮
css html 渐变按钮
|
17天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
25 1
|
25天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
28 1
|
1月前
|
前端开发
particlesJS使用简介,CSS字体样式值
particlesJS使用简介,CSS字体样式值
|
1月前
|
前端开发
CSS优先级:如何解决样式冲突?
CSS优先级:如何解决样式冲突?
|
1月前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
32 1
|
1月前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
24 1
|
1月前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
16 0