bootstrap简单的过一遍

标签：style   使用   strong   width   cti   html   

注：.xxxx 表示类（class=xxxx）


<h1>到<h6>均可使用。另外还提供了.h1到.h6的class

.lead可以让段落突出显示

<small>  其内的文本将被设置为父容器字体大小的85%

<strong> 着重

<em> 斜体

对齐class：text-left ，text-center，text-right

强调class： text-muted
        text-primary
        text-success
        text-info
        text-warning
        text-danger

<abbr>：基本缩略语，.initialism 可以将其font-size设置的更小些

<blockquote>:任何HTML裹在<blockquote>之中即可表现为引用
             .pull-right 右对齐 .pull-left 左

<cite>:

<ol>或<ul>: .list-unstyled 移除了默认的list-style样式和左侧外边距的一组元素

<dl><dt><dd>: .dl-horizontal可以让<dl>内短语及其描述排在一行

<code>:在正文中通过<code>标签包裹内联样式的代码片段,为了正确的展示代码，注意将尖括号做转义处理。

<pre>:多行代码可以使用<pre>标签。为了正确的展示代码，注意将尖括号做转义处理。


表格相关##############################################################################################

<table>：.table-striped 增加斑马条纹样式
         .table-bordered为表格和其中的每个单元格增加边框
         .table-hover可以让<tbody>中的每一行响应鼠标悬停状态
     .table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。

<thead>
<tbody>
<tr>
<td>
<th>
<caption>:表格用途的描述和摘要

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


将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。



表单相关##############################################################################################

.form-control：所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;。
.form-group：将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。
.form-inline：元素紧凑
.sr-only：隐藏label
.form-horizontal
.checkbox-inline
.radio-inline
.form-control-static:将一行纯文本放置于label的同一行，为<p>元素添加.form-control-static即可

disabled:　被禁用的输入框

校验状态: .has-warning、.has-error或.has-success

通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。

.help-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">链接</button>

尺寸 .btn-lg、.btn-sm、.btn-xs

.btn-block

活动状态 active

禁用状态 disabled


工具class##############################################################################################

bootstrap简单的过一遍,布布扣,bubuko.com

bootstrap简单的过一遍

标签：style   使用   strong   width   cti   html   

原文地址：http://www.cnblogs.com/dytl/p/3822966.html