bootstrap全局CSS样式学习

参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆。

首先介绍bootstrap全局CSS样式

只通过使用bootstrap.css,即可获得统一的样式设置。在使用全局bootstrap的样式时,只需=设置每个元素的class属性值即可。


同意基础样式,防止不同浏览器的样式不同,使用了Normalize.css


bootstrap需要为页面内容和栅格系统包裹一个 在一个容器中。共有两个有此作用的class

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-fluid">
...
</div>

其中栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。

栅格系统每行做多保留12列的内容,超过了会另起一行。

.row 必须包含在 .container 中;.col-**-**必须包含在.row中

.clearfix用于清除元素后面的浮动,防止由于不同列高的不一致,导致错误的排列效果。

因为col-**-**本身是通过float的样式进行向左向右排列的。

<div class="col-md-6"></div><div class="clearfix"></div>

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12
最大列(column)宽 自动 ~62px ~81px ~97px
槽(gutter)宽 30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

可以使用.col-**-offset-*控制某一列向右偏移。

可以使用.col-**-push-*控制某一列向右移动。

可以使用.col-**-pull-*控制某一列向左移动。


标题使用h1-h6完成,在内容中心使用small元素,完成副标题添加的效果。

在元素p中使用.lead的class值,可是本行突出显示。

mark元素可以高亮其内容。

del元素在其内容中间添加删除线。s元素可以达到此效果。

ins元素表示插入的文本,带下划线。元素也可以达到此效果。

在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语,不带有任何着重的意味;而 <i> 标签主要用于发言、技术词汇等。

文字对齐五种方式

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Justified text.</p>

<p class="text-nowrap">No wrap text.</p>

改变大小写三种方式

<p class="text-lowercase">Lowercased text.</p>全部小写

<p class="text-uppercase">Uppercased text.</p>全部大写

<p class="text-capitalize">Capitalized text.</p>单词首字母大写

缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见), 但需要包含 title 属性。

<abbr title="attribute">attr</abbr>

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。在显示时,文字前面会出现一个竖线。右竖线样式使用blockquote-reverse类。

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>

在列表元素中,使用 list-unstyled类属性,可以移除列表前面的序列符号。list-inline类属性,取消列表元素的缩进。

<pre>可现实代码块,将其内容添加背景色和边框。


表格可使用.table,添加基础样式。

.table-striped隔行变色

.table-bordered添加表格边框

.table-hover鼠标悬停,行变色

.table-condensed减少表格内边距

.table-responsive响应式表格

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input><textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;

将 label 元素(使用.form-lable)和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。所有元素在同一行内排列。

为 <form> 元素添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。

.radio.radio-inline.checkbox.checkbox-inline用于装饰所指的元素。.disable可以使其为禁止状态。

<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div> <div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>

对于标记了 multiple 属性的 <select> 控件来说,默认显示多选项。

用文本代替原先出现的input,为 <p> 元素添加 .form-control-static 类即可。

.has-warning.has-error 或 .has-success 类可以控制表单元素的状态颜色。


为 <a><button> 或 <input> 元素添加按钮类(.btn .btn-default)即可使用 Bootstrap 提供的样式。

使用 .btn-lg.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

<button type="button" class="btn btn-default">(默认样式)Default</button>
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<button type="button" class="btn btn-success">(成功)Success</button>
<button type="button" class="btn btn-info">(一般信息)Info</button>
<button type="button" class="btn btn-warning">(警告)Warning</button>
<button type="button" class="btn btn-danger">(危险)Danger</button>
<button type="button" class="btn btn-link">(链接)Link</button>

.img-responsive让图片支持响应式布局

.center-block让图片水平居中,也可以让其他内容居中。

图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

情景文本颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
情景背景颜色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭按钮,buttonclass属性为close。
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
三角符号
<span class="caret"></span> 快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
 
 
上一篇:Mysql中几种sql的常见用法


下一篇:WCF开发时如何选择正确的实例模式(InstanceMode)?