<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. SQLite在多线程环境下的应用

    文一 SQLite的FAQ里面已经专门说明,先贴出来.供以后像我目前的入门者学习. (7) 多个应用程序或者同一个应用程序的多个例程能同时存取同一个数据库文件吗? 多进程可以同时打开同一个数据库,也可 ...

  2. jsonp 跨域原理详解

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  3. wikioi 1204 寻找子串位置

    /*======================================================================== 1204 寻找子串位置 题目描述 Descript ...

  4. angular模板加载 ----ng-template

    Angularjs作为mvc(或者说mvvm)框架,同样具备模板这一基本概念. NG加载模板的顺序为 内存加载---AJAX加载. 如果排版乱掉,请查阅https://www.zybuluo.com/ ...

  5. Python命令行中输入pip提示不是内部或外部命令

    WIN764位,Python34 输入命令python -m pip

  6. Android Studio如何添加override

    而Android Studio如何添加呢?方法如下: 右键(或者Alt + Insert) ---  Generate... ---- Override Method...  或者 Implement ...

  7. 异机恢复 RMAN-06023: no backup or copy of datafile 17 found to restore

    前不久因工作需要使用RMAN异机恢复,很基础也很具有代表性和普遍性,希望对需要的人有所帮助. 具体过程如下: 先拷贝原库的口令文件和参数文件到备库. 然后使用如下脚本对原库进行备份: run { al ...

  8. == Got TLE on OJ? Here is the solution! ==

    As a solo warrior in OJ, I spent about nearly 50% of my time on tackling TLE - that is innumerous ho ...

  9. 剑指offer系列38----滑动窗口的最大值(不懂????????????????????????????????????????????????)

    [题目] 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别为{4,4,6 ...

  10. Erlang库 -- 有意思的库汇总

    抄自这里 首先,库存在的目的大致可分为:1.提供便利2.尽可能解决一些痛点 首先,我们先明确一下Erlang编程语言的一些痛点(伪痛点):1,单进程问题Erlang虚拟机属于抢占式调度,抢占式调度有很 ...