bootstrap注意事项(六)按钮
2015-08-21 21:03
537 查看
1.预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<!-- 标准的按钮 --><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">链接按钮</button>
</body>
</html>
![](http://images0.cnblogs.com/blog2015/790611/201508/212049477858586.png)
2.尺寸
需要让按钮具有不同尺寸吗?使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<p><button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">(块级元素)Block level button</button>
</body>
</html>
![](http://images0.cnblogs.com/blog2015/790611/201508/212054500504896.png)
3.激活状态
当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 <button> 元素,是通过 :active 状态实现的。对于 <a> 元素,是通过 .active 类实现的。然而,你还可以将.active 应用到 <button> 上(包含 aria-pressed="true" 属性)),并通过编程的方式使其处于激活状态。button 元素
由于 :active 是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候可以添加 .active 类。<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<p><button type="button" class="btn btn-default btn-lg ">
默认按钮</button>
<button type="button" class="btn btn-default btn-lg active"> 激活按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">
原始按钮</button>
<button type="button" class="btn btn-primary btn-lg active">
激活的原始按钮</button>
<br><br>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
</p>
</body>
</html>
![](http://images0.cnblogs.com/blog2015/790611/201508/212057593166452.png)
4.禁用状态
通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。button 元素
为 <button> 元素添加 disabled 属性,使其表现出禁用状态链接(<a>)元素
为基于 <a> 元素创建的按钮添加 .disabled 类。我们把 .disabled 作为工具类使用,就像 .active 类一样,因此不需要增加前缀。
链接的原始功能不受影响
上面提到的类只是通过设置 pointer-events: none 来禁止 <a> 元素作为链接的原始功能,但是,这一 CSS 属性并没有被标准化,并且 Opera 18 及更低版本的浏览器并没有完全支持这一属性,同样,Internet Explorer 11 也不支持。因此,为了安全起见,建议通过 JavaScript 代码来禁止链接的原始功能。<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<p><button type="button" class="btn btn-default btn-lg">
默认按钮</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">
禁用按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">
原始按钮</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">
禁用的原始按钮</button>
</p>
<p>
<a href="#" class="btn btn-default btn-lg" role="button">
链接</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">
禁用链接</a>
</p>
<p>
<a href="#" class="btn btn-primary btn-lg" role="button">
原始链接
</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">
禁用的原始链接</a>
</p>
</body>
</html>
![](http://images0.cnblogs.com/blog2015/790611/201508/212102137382013.png)
相关文章推荐
- bootstrap模态框Esc键不关闭
- Bootstrap学习--响应式导航栏
- 关于Html中的title属性内容换行,以及Bootstrap的tooltip的使用
- 玩转Bootstrap(基础) -- (5.下拉菜单)
- 玩转Bootstrap(基础) (4.网格系统实现原理)
- 玩转Bootstrap(基础) (3.按钮)
- 年末最代码部分源码大出血分享-freemarker,bootstrap,springdata jpa分页代码
- bootstrap注意事项(五)表单
- Bootstrap兼容IE8
- Bootstrap 栅格系统
- Bootstrap "row"类宽度超过问题
- BootStrap图标
- 玩转Bootstrap(基础) (2.表单操作)
- dynamic change content of bootstrap tooltip or popover
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- bootstrap 图标 由Glyphicons提供
- BootStrap弹窗
- 玩转Bootstrap(基础) (1.基础知识)
- bootstrap button按钮长度
- bootstrap3 input 输入框图标背景