<div class="container">
<!-- 按钮的背景色 -->
<div class="row">
<button class="btn btn-default">确定</button>
<button class="btn btn-primary">确定</button>
<button class="btn btn-success">确定</button>
<button class="btn btn-info">确定</button>
<button class="btn btn-warning">确定</button>
<button class="btn btn-danger">确定</button>
<button class="btn btn-link">确定</button>
</div> <!-- btn-block 让按钮的宽度变为100%,成为块级元素-->
<div class="row" style="margin-top: 20px">
<button class="btn btn-primary btn-block">确定</button>
</div> <!-- 激活状态-->
<div class="row" style="margin-top: 20px">
<button class="btn btn-primary active">确定</button>
<a href="#" class="btn btn-warning active">确定</a>
</div> <!-- 禁用-->
<div class="row" style="margin-top: 20px">
<button class="btn btn-primary active" disabled>确定</button>
<button class="btn btn-info active disabled">确定</button>
<a href="#" class="btn btn-warning">确定</a>
</div>
</div>

可以btn-lg, btn-md, btn-sm,btn-xs来设置按钮大小的;

效果图:

bootstrap-按钮样式的更多相关文章

  1. Bootstrap -- 按钮样式与使用

    Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...

  2. bootstrap按钮样式

    <a class='btn' href='javascript:;'>常规按钮</a> <a class='btn btn-small' href='javascript ...

  3. bootstrap改变上传文件按钮样式,并显示已上传文件名

    参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:原始按钮样式(未被操作)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Bootstrap 按钮

    本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...

  6. BootStrap基本样式

    文本对齐风格:.text-left:左对齐.text-center:居中对齐.text-right:右对齐.text-justify:两端对齐 取消列表符号:.list-unstyled内联列表:.l ...

  7. bootstrap 按钮 文本 浮动 隐藏

    bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  9. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  10. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

随机推荐

  1. COM ,Threading Models,apartments,RPC

    Component Object Model (COM) https://msdn.microsoft.com/en-us/library/windows/desktop/ms680573%28v=v ...

  2. PHP-线程一直不释放调试

    一.现象 1.查看进程是否存在 ps -ef | grep -v 'grep' |grep -E 'shell/cron/bonus/cash' www      2624    1  0 Oct24 ...

  3. Oracle数据库——触发器的创建与应用

    一.涉及内容 1.理解触发器的概念.作用和类型. 2.练习触发器的创建和使用. 二.具体操作 (实验) 1.利用触发器对在scott.emp表上执行的DML操作进行安全性检查,只有scott用户登录数 ...

  4. swagger-editor 快速REST-API 测试文档编写

    1. 在线使用 http://editor.swagger.io/#/ 2. 离线工具 https://github.com/swagger-api/swagger-editor 3. 跨域访问问题: ...

  5. openssl数字证书私钥删除私钥密码

    解密 openssl rsa -in server.key.org -out server.key

  6. Maven最佳实践:版本管理

    什么是版本管理 首先,这里说的版本管理(version management)不是指版本控制(version control),但是本文假设你拥有基本的版本控制的知识,了解subversion的基本用 ...

  7. [转]谈谈select, iocp, epoll,kqueue及各种网络I/O复用机制

    参考原文:再谈select, iocp, epoll,kqueue及各种I/O复用机制 一.I/O模型概述 介绍几种常见的I/O模型及其区别,如下: blocking I/O nonblocking ...

  8. 调用Newtonsoft.Json 报FileNotFoundException 错误

    具体如下: Exception StackTrace at Newtonsoft.Json.Converters.BinaryConverter.CanConvert(Type objectType) ...

  9. 【KVM安装】在Centos6.8中安装KVM

    阅读目录 前题条件 章节1:安装Centos6.8-进行硬件检测 章节2:配置网络-设置桥接方式 章节3:安装KVM 章节4:OVA转qcow2 章节5:使用KVM创建虚拟机 章节6:参考链接 前题条 ...

  10. 51nod 1392 装盒子

    有n个长方形盒子,第i个长度为Li,宽度为Wi,我们需要把他们套放.注意一个盒子只可以套入长和宽分别不小于它的盒子,并且一个盒子里最多只能直接装入另外一个盒子 (但是可以不断嵌套),例如1 * 1 可 ...