Bootstrap框架---CSS全局样式之按钮样式
2016-12-02 14:50
477 查看
预定义样式
首先,我们先要链接css样式和JQ文件
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
需要让按钮具有不同尺寸吗?使用
<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 active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
可以为基于
<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>
通过为按钮的背景设置
为
如果为
Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前我们还没有解决办法。
为基于
我们把
上面提到的类只是通过设置
CSS 属性并没有被标准化,并且 Opera 18 及更低版本的浏览器并没有完全支持这一属性,同样,Internet Explorer 11 也不支持。因此,为了安全起见,建议通过 JavaScript 代码来禁止链接的原始功能。
虽然按钮类可以应用到
为
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
我们总结的最佳实践是,强烈建议尽可能使用
另外,我们还发现了a bug in Firefox <30 版本的浏览器上出现的一个 bug :阻止我们为基于
Firefox 浏览器上不能完全和其他按钮保持一致的高度。
首先,我们先要链接css样式和JQ文件
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
尺寸
需要让按钮具有不同尺寸吗?使用 .btn-lg、
.btn-sm或
.btn-xs可以获得不同尺寸的按钮。
<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>
通过给按钮添加
.btn-block类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
激活状态
当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 <button>元素,是通过
:active状态实现的。对于
<a>元素,是通过
.active类实现的。然而,你还可以将
.active应用到
<button>上,并通过编程的方式使其处于激活状态。
button 元素
由于 :active是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候可以添加
.active类
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
链接(<a>
)元素
可以为基于 <a>元素创建的按钮添加
.active类。
<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>
禁用状态
通过为按钮的背景设置 opacity属性就可以呈现出无法点击的效果
button 元素
为 <button>元素添加
disabled属性,使其表现出禁用状态。
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
跨浏览器兼容性
如果为 <button>元素添加
disabled属性,Internet
Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前我们还没有解决办法。
链接(<a>
)元素
为基于 <a>元素创建的按钮添加
.disabled类。
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
我们把
.disabled作为工具类使用,就像
.active类一样,因此不需要增加前缀。
链接的原始功能不受影响
上面提到的类只是通过设置 pointer-events: none来禁止
<a>元素作为链接的原始功能,但是,这一
CSS 属性并没有被标准化,并且 Opera 18 及更低版本的浏览器并没有完全支持这一属性,同样,Internet Explorer 11 也不支持。因此,为了安全起见,建议通过 JavaScript 代码来禁止链接的原始功能。
Context-specific usage
虽然按钮类可以应用到 <a>和
<button>元素上,但是,导航和导航条只支持
<button>元素。
按钮类
为 <a>、
<button>或
<input>元素应用按钮类。
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
跨浏览器展现
我们总结的最佳实践是,强烈建议尽可能使用 <button>元素来获得在各个浏览器上获得相匹配的绘制效果。
另外,我们还发现了a bug in Firefox <30 版本的浏览器上出现的一个 bug :阻止我们为基于
<input>元素创建的按钮设置
line-height属性,这就导致在
Firefox 浏览器上不能完全和其他按钮保持一致的高度。
相关文章推荐
- Bootstrap-全局css样式之按钮
- Bootstrap全局CSS样式之按钮和图片
- Bootstrap--全局CSS样式之栅格系统
- Bootstrap全局CSS样式之栅格系统
- 【BootStrap】简单聊一聊CSS全局样式和表格样式-附有源码
- Bootstrap全局CSS样式之表单
- Bootstrap全局CSS样式之表格
- Bootstrap--全局CSS样式之排版
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
- BootStrap CSS全局样式和表格样式源码解析
- 16、响应式布局和BootStrap 全局CSS样式知识点总结-part3
- Bootstrap 全局CSS样式之栅格系统
- buttons.css——可以与bootstrap融合的按钮样式库
- Bootstrap全局CSS样式之表格
- 修改bootstrap 的全局样式,bootstrap 3.0 是由html5和CSS 3组成的
- BootStrap3.0学习--全局 CSS 样式
- Bootstrap全局CSS样式之排版
- Bootstrap全局CSS样式之表格
- Bootstrap全局CSS样式之button和图片
- Bootstrap的全局css样式之栅格系统、表单和图片部分常用类.