bootstrap
===============
一、字体:
bootstrap 中 颜色 设置了#333,字体大小统一14px,padding:0,margin:0,行高赋予了1.428
样式 赋予 body体。
段落突出类
通过添加 .lead 类可以让段落突出显示。
内联文本元素
<mark>
对齐
<p class="text-left">左对齐.</p>
<p class="text-center">居中.</p>
<p class="text-right">右对齐.</p>
<p class="text-justify">俩端对齐</p>
<p class="text-nowrap">不换行.</p>
改变大小写
<p class="text-lowercase">小写.</p>
<p class="text-uppercase">大写.</p>
<p class="text-capitalize">首字母大写.</p>
缩略语
<abbr title=""></abbr>
引用
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
文本颜色
<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>
表格
.table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。
表单
排列组合
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。
通过为表单添加 .form-horizontal 类,
按钮
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>
按钮尺寸
需要让按钮具有不同尺寸吗?使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
激活状态 active
禁用状态 disabled
图片
<img src="img/1.jpg" class="pull-left img-rounded"> 圆角
<img src="img/1.jpg" class="img-circle"> 圆形
<img src="img/3.gif" class="img-thumbnail"> 外边框
情景类
浮动
.pull-left
.pull-right
清除浮动
.clearfix
显示或隐藏内容
.show
.hidden