原文地址:http://www.phloxblog.in/bootstrap-buttons/#.U5xYso2fclm

站点中事件的触发往往依赖于button或者超链接。因此,button能够觉得是站点不可或缺的组件。

而BootStrap也包括了大量的button,可是与其它的库有非常大的差别。本文则是对怎样在BootStrap中使用button进行了解说。

button样式

不论什么仅仅要赋予了.btn这个类的Dom对象会自己主动继承默认样式:圆角灰色button。除此之外,BootStrap也提供了其它的样式选项,例如以下表所看到的:

类名

描写叙述

颜色

实例

btn

Default/ Standard button.

White

<button type=”button”>Default Button</button>

btn-primary

Identifies the primary action .

Blue

<button type=”button”>Primary Button</button>

btn-success

Indicates a successful action.

Green

<button type=”button”>Success Button</button>

btn-warning

Indicates caution.

Yellow

<button type=”button”>Warning Button</button>

btn-danger

Indicates a dangerous action.

Red

<button type=”button”>Danger Button</button>

btn-link

Making a button look like link.

Blue

<button type=”button”>Link Button</button>

button状态

BootStrap也提供了改动button状态:active或者disabled的类。

激活状态

button呈现为按下的状态(含阴影的深灰色背景),下表解释了使用方法。

Element

Class

Description

Example

Button element

.active

Use .active class to show that it is activated.

<button type=”button”>

Active Button

</button>

失效状态

当禁止某个button时。它的颜色会褪色50%而且失去其梯度权重。

Element

Class

Description

Example

Button element

disabled

Add the disabled attribute to <button> buttons.

<button type=”button” disabled=”disabled”>

Disabled Button

</button>

Anchor element

disabled

Add the disabled class to <a> buttons.

<a href=”#” role=”button”>

Disabled Link

</a>

button大小

Class

Description

Example

.btn-lg

This makes button size large.

<button type=”button”>

Large Primary button

</button>

.btn-sm

This makes button size small.

<button type=”button”>

Small Primary button

</button>

.btn-xs

This makes button size extra small.

<button type=”button”>

Extra small Primary button

</button>

.btn-block

This creates block level buttons.

<button type=”button”>

Block level Primary button

</button>

完整的代码例如以下所看到的:

<!DOCTYPE html>
<html> <head>
<title>Try Bootstrap Online</title>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head> <body>
<p> <button type="button" class="btn btn-link btn-lg">Large link button
</button>
</p>
<p>
<button type="button" class="btn btn-primary">
Default size Primary button
</button></p><p>
<button type="button" class="btn btn-default">
Default normal size button
</button>
</p>
<p> <button type="button" class="btn btn-warning btn-sm">
Small warning button
</button>
</p>
<p> <button type="button" class="btn btn-success btn-xs">
Extra small success button
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block btn-lg active">
Block level Active Primary button
</button>
<button type="button" class="btn btn-danger btn-default btn-lg btn-block btn-lg disabled">
Danger Block Disabled button
</button>
</p>
</body>
</html>

BootStrap中的button使用的更多相关文章

  1. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  2. bootstrap中的Tooltips工具提示的使用问题

    在使用bootstrap中的Tooltips时,官方文档中的实例代码若直接放在.container 或 .container-fluid类中时,四个button悬停之后会把button之间的margi ...

  3. Bootstrap中的less基础

    在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有 ...

  4. 57、Bootstrap中文文档

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...

  5. 12、Bootstrap中文文档(其它插件分享)

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...

  6. bootstrap 中关于 HTML5 aria-* and role的用法

    HTML5 aria-* and role 在bootstrap中看到role和aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet Ap ...

  7. Bootstrap中关于input里file的样式更改

    给input里file类型加button样式 1.在Bootstrap中input里的file类型样式很不美观,一个按钮加一段文字,还会随浏览器的不同呈现不同的样式,所以开发的时候可以将file的样式 ...

  8. Bootstrap中轮播图

    Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...

  9. bootstrap中使用日历控件

    在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...

随机推荐

  1. laravel 批量更新

    /** * 转发动态和资讯数量统计 */ public function forwardCounts(FeedModel $feedModel) { //统计动态转发的id $feeds=$feedM ...

  2. android 跳转到应用通知设置界面的示例

    4.4以下并没有提过从app跳转到应用通知设置页面的Action,可考虑跳转到应用详情页面,下面是直接跳转到应用通知设置的代码: if (android.os.Build.VERSION.SDK_IN ...

  3. java8中ConcurrentHashMap

    HashMap的线程不安全主要体现在resize时的死循环及使用迭代器时的fast-fail上. Fast-fail: fail-fast 机制是java集合(Collection)中的一种错误机制. ...

  4. QT5 - 数据库、QMYSQL driver not loaded

    第一步.先在“.pro”的入口文件里加入以下两行代码: QT += sql SOURCES += main.cpp 第二步.在“main.cpp”文件中连接数据库并判断是否连接成功 1.QPSQL连接 ...

  5. CSS选择器优先级(转)

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  6. 005.Zabbix-Agent客户端安装

    一 安装Zabbix-Agent [root@imxhy ~]# rpm -ivh http://repo.zabbix.com/zabbix/3.2/rhel/7/x86_64/zabbix-rel ...

  7. auth.User.groups: (fields.E304)

    配置用户信息的models时,如果继承Abstractuser类时,报错: ERRORS:auth.User.groups: (fields.E304) Reverse accessor for 'U ...

  8. SpringBoot详细研究-04部署测试与监控

    这部分的内容实际就是devops的主要工作内容,当然一名合格的程序要也需要掌握这部分的知识. 热部署 简单来说,在开发时,修改了任何的代码,IDE将自动编译运行及发布:在发布时,当前发布不影响线上服务 ...

  9. InnoDB的锁机制浅析(四)—不同SQL的加锁状况

    不同SQL的加锁状况 文章总共分为五个部分: InnoDB的锁机制浅析(一)-基本概念/兼容矩阵 InnoDB的锁机制浅析(二)-探索InnoDB中的锁(Record锁/Gap锁/Next-key锁/ ...

  10. JAVAEE——SpringBoot入门:简介、微服务、环境准备、helloworld与探究、快速构建项目

    一.Spring Boot 入门 1.Spring Boot 简介 简化Spring应用开发的一个框架: 整个Spring技术栈的一个大整合: J2EE开发的一站式解决方案: 2.微服务 2014,m ...