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.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...
随机推荐
- X-UA-Compatible设置兼容模式
原文地址:http://www.cnblogs.com/kingboy2008/archive/2011/07/01/2226424.html IE浏览器的兼容性一直是网站开发人员头疼的事情,众所 ...
- Web前端开发笔试&面试_05_other 2016104399MS
1.数据传送的方式,get post 的区别是? 2.你要怎么绑定页码(比如给你第三页,)? 3.数据流是如何实现,用for 循环? 4.轮播怎么实现?用原生JS实现. 5.布局,B是固定宽度,A的内 ...
- Python 统计IIS日志行数
__author__ = 'Administrator' import codecs def blocks(file, size=65536): while True: b = file.read(s ...
- sql语言参考
set operators UNION, UNION ALL, INTERSECT, and MINUS这三个操作符优先级相同,从左至右,除非有括号 单库单表操作,单库多表操作,多库多表操作(用到db ...
- bash feature
bash调用-启动文件-交互式shell-条件表达式-shell算术-别名-数组-目录栈-提示符控制-受限shell-posix模式 受限shell bash --restricted 它用来建立一个 ...
- OpenJudge计算概论-点和正方形的关系【判断点是否在正方形内部】
/*======================================================== 点和正方形的关系 总时间限制: 1000ms 内存限制: 65536kB 描述 有 ...
- 合并master分支到自己的分支
切换到自己的分支(比如:self):git checkout self: 在自己分支下,推送自己的分支到github远端仓库:git push --set-upstream origin self: ...
- html标记语言的标准写法-参考自http://www.zhihu.com/question/20797118/answer/16212312
网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"? 添加评论 查看全部 12 个回答 skydiver ,程序员 5 人赞 ...
- [mybatis] mybatis错误:Invalid bound statement (not found)
点击菜单抛出异常: org.springframework.web.util.NestedServletException: Request processing failed; nested exc ...
- [原]总结VIM的实用技巧
VIM真是一个神奇而又复杂的编辑器,让我这样的Linux编程新手茫然不已啊.每次到真正动手编程的时候才发现完全不知道该怎么操作VIM,一点都没感觉到VIM的强大,哈哈--正好今天学习了一点VIM操作技 ...