bootstrap全局样式二

加form-grope是为了以后更好的管理,一组form写一个form-grope

显示如下:

并排显示的话,给用户名前面再加一个div,再加horizontal,如下,并且加上control-label,更好的居中显示:

显示如下:

禁用:




大一些的
显示如下:

正常的:

显示如下:

小一些的:

显示如下:
按钮、图片:

如果不加btn,直接写,btn-default,那么样式不会起作用:

显示:

btn写的样式:

预定义样式:



btn的样式写法:

btn-default写法:

btn-lg写法:



显示如下:

图片:


显示如下:
关闭按钮:
如果我们要写一个关闭按钮,需要很多行代码,但在bootstrap中为我们预定义好了,我们只需要遵循以下格式来写:
<button><span class="close">×</span></button>

显示如下:
hover时候的样式:
不加<button>标签显示在右上角:

hover时显示:


写法:


其实是加了个:
工作中少用!important ,他是优先级最高的,但是bootstrap中以class出现可以引用。

<span class="center-block" style="width: 200px; background: red;">这是元素</span>
显示如下:

写法:

hidden的隐藏不在文档流中,一般配合js,权限不够就看不见,权限够了就show
二invisible隐藏的还在文档流中:

显示:

总结:

bootstrap全局样式二的更多相关文章
- bootstrap 全局样式设置
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- [Bootstrap]全局样式(二)
具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size mar ...
- bootstrap全局样式
内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...
- [Bootstrap]全局样式(五)
辅助样式 1.情景文本色 .text-muted .text-primary .text-success .text-info .text-warning .text-danger {c ...
- [Bootstrap]全局样式(四)
按钮 1.基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button &g ...
- [Bootstrap]全局样式(三)
表格 1.基本类 .table {width/margin-bottom/} {padding/border-top} e.g.:<table class="table" ...
- [Bootstrap]全局样式(一)
页面必须设置为html5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 适应移动设备 ...
- bootstrap 全局样式
reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...
- bootstrap复习:全局样式
一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...
随机推荐
- minSdkVersion
10 It is indeed possible to increase minSdkVersion, but it took me way too much time to find it ou ...
- 论文阅读笔记 Word Embeddings A Survey
论文阅读笔记 Word Embeddings A Survey 收获 Word Embedding 的定义 dense, distributed, fixed-length word vectors, ...
- 汇编笔记-DOSBox安装和使用(转载)
我自己安装使用在Windwos10下面. [DOSBox简介] 1. 官方网址:http://www.dosbox.com/. 2. debug功能在win7之后系统已经不自带了,即64位系统是不能直 ...
- webdriver之select、alert、prompt、confirm
select_by_index() :通过索引定位select_by_value() :通过value值定位select_by_visible_text() :通过文本值定位deselect_al ...
- List集合流处理类型小结
本文为博主原创,未经允许不得转载 对应实体类 import lombok.Getter; import lombok.Setter; @Getter @Setter public class Stud ...
- StringBuffer的delete方法与deleteCharAt方法的区别。
delete方法与deleteCharAt两个方法都是用来删除StringBuffer字符串指定索引字符的方法, delete(int begin,int end)有两个参数,使用时删除索引从be ...
- aop (权限控制之功能权限)
在实际web开发过程中通常会存在功能权限的控制,不如这个角色只允许拥有查询权限,这个角色拥有CRUD权限,当然按钮权限显示控制上可以用button.tld来控制,本文就不说明. 具体控制流程就是通过登 ...
- js对象跟数组多层嵌套,检测没有此数据就添加有则不添加以及超过限制条件删除操作
例如你需要这样格式的数据: [{"name":"合肥市","arrey":[{"lat":"31.862323 ...
- 线性代数导论 | Linear Algebra 课程
搞统计的线性代数和概率论必须精通,最好要能锻炼出直觉,再学机器学习才会事半功倍. 线性代数只推荐Prof. Gilbert Strang的MIT课程,有视频,有教材,有习题,有考试,一套学下来基本就入 ...
- 《Professional JavaScript for Web Developers》day02
<Professional JavaScript for Web Developers>day02 1.在HTML中使用JavaScript 1.1 <script>元素 HT ...