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>
 

 

 

posted @ 2016-04-08 11:02  mahuan2  阅读(674)  评论(0)  编辑  收藏  举报