bootstrap-按钮样式
<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-按钮样式的更多相关文章
- Bootstrap -- 按钮样式与使用
Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...
- bootstrap按钮样式
<a class='btn' href='javascript:;'>常规按钮</a> <a class='btn btn-small' href='javascript ...
- bootstrap改变上传文件按钮样式,并显示已上传文件名
参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:原始按钮样式(未被操作)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap 按钮
本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...
- BootStrap基本样式
文本对齐风格:.text-left:左对齐.text-center:居中对齐.text-right:右对齐.text-justify:两端对齐 取消列表符号:.list-unstyled内联列表:.l ...
- bootstrap 按钮 文本 浮动 隐藏
bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Bootstrap按钮插件
前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- 简单叨叨bootstrap按钮无限层级下拉菜单的实现
0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...
随机推荐
- C++ map详解
1.什么是mapmap是一个键值对容器.在处理一对一数据是,很有用. 2.map数据结构的特点map内部自建一颗红黑树,这棵树具有对数据自动排序的功能,因此,map内的数据都是按key的值排好序的. ...
- Python Queue实现生产与消费
Python Queue模块详解 from:https://blog.linuxeye.com/334.html Python中,队列是线程间最常用的交换数据的形式.Queue模块是提供队列操作的模块 ...
- python3多线程趣味详解
python3的多线程很多人无法理解是怎么运行的,因此本文从程序猿的日常生活出发,写了一个由浅入深的多线程教程,这样子大家就不会觉得陌生了,多线程真的很简单很简单! 不要讲多线程局限于库或者框架,自己 ...
- python爬虫之BeautifulSoup
爬虫有时候写正则表达式会有假死现象 就是正则表达式一直在进行死循环查找 例如:https://social.msdn.microsoft.com/forums/azure/en-us/3f4390ac ...
- log4j加日志的方法-转
如何使用log4j记录日志第一步:在工程中加入log4j所使用的jar文件1:项目 > 属性 :弹出项目的属性窗口2:Java构建路径>?库>?添加外部JAR:弹出选择JAR的窗口 ...
- 111个知名Java项目集锦,包括url和描述
转:http://www.cnblogs.com/wangs/p/3282183.html 项目名称 项目描述 ASM Java bytecode manipulation framework A ...
- Sass用法指南_20151109笔记
写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...
- SPOJ #692. Fruit Farm
Another palindrome related problem. Actually nothing too theoretical here, but please keep following ...
- CSS position, z-index
position 1.fixed:定位.浮动.(需要搭配left, right) 2.absolute:相对于最近的父元素,不考虑周围的布局.(可使用z-index占据位置,则同一位置层叠) 3.re ...
- VisualSVN Server以及TortoiseSVN客户端的配置和使用方法
http://www.cnblogs.com/beautifulFuture/archive/2014/07/01/3818211.html 近期学习代码管理工具,首先学习一下svn和Tortoise ...