标签：UI aml 前端 big upper 符号 注意 文字 contain
<meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no">
BootStrap是一种前端框架
BootStrap布局
必须放在这两个容器中的其中一个
<div class="container></div> 或者<div class="container-fluid"></div>
排版的标签
.page-header是对于<h1>~<h6>中的标题，并且给标题一个分割线
<small></samll>:副标题 小一号； <big></big>:副标题 大一号
<strong></strong> <em></em> <del></del>
对于文本（都有前缀text）
.text-right ：右对齐
.text-left：左对齐
.text-center:居中
对于设置英文大小写问题（也属于文本的一部分，所有也有前缀text）
.text-uppercase：对文本中的英文字母全都大写
.text-lowercase:对文本中的英文字母全都小写
.text-capitalize: 对文本中的英文首字母大写
对于列表
.list-unstyled：去除列表前面的符号和去掉原有的格式
.list-inline: 把<li></li>之间的内容变成横向排列
对于自定义的列表
.dl-horizontal：设置变成横向排列
<dl class="dl-horizontal">
<dt>标题</dt>
<dd>内容</dd>
</dl>
表格（table）
.table:代表表格一个基类，（基本的类加其他的效果都是在.table的基础上）
.table:没有外边框
.table-bordered:给表格加上外边框
.table-hover: 鼠标悬停效果，鼠标一到行或者单元格就会变色
.table-striped:斑马线效果，隔行换色，这个与鼠标悬停没有任何关系，一打开页面就会显示
.table-condensed:让表格看起来变得紧凑
响应式表格(也是表格，就要以table为前缀)
.table-responsive:给table的父元素加，以移动设备（手机，平板等，360浏览器不是移动设备）为优先，如果内容不能完全显示，会出现响应式的滚动条响应设备的窗口的大小
<div class="table-responsive">
<table class="table table-hover table-bordered, table-striped table-condensed">
<tr>编号</tr>
对于行的状态类
行的标签有<tr>或者<td>
下面这几个状态类对是对于行来做处理的
.action :鼠标悬停在行或者单元格时所设置的颜色
.success.标识成功或积极的工作
.info: 标识普通的提示信息或者动作
.warning : 标识警告或者需要用户注意
.danger: 标识危险或者潜在的带有负面影响的动作
<tr class="danger">
响应式图片（一般是和栅格系统一起使用,既然是图片那么他的前缀是img）
.img-responsive: 响应式图片
.img-circle:椭圆形
.img-rounder:改变了图片的四个角，变成曲面的
.img-thumbnail:给图片加了圆角边框
<div class="container-fluid">
<img scr="img/1.jpg" class="img-responsive ">
栅格系统（一定要放在容器中）
必须放在
<div class="container"></div>或者<div class="container-fluid"></div>
栅格系统的作用：栅格系统，浏览器窗口自动分配最多12列，栅格系统是由行（row）和列(col)构 成，就是把我们的屏幕分成12份，在里面放东西
一行里面有12列： col-md-1:代表一列，所有的列都是一定放在行里的
超出12列就会换到下一行
col-md-4:数字是几就代表在一行中占几列
需求：在一行里面，第一块占两列，第二个块占三列，第三个块占7列
<div class="row">
<div class="col-md-2">22<div>
<div class="col-md-3">33<div>
<div class="col-md-7">77<div>
</div>
需求：pc端的， 中等屏幕，一行显示三张图片
下面只是其中一个
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="imgs/1.jpg" class="img-responsive" alt="别说">
<h3 class="page-header">标题</h3>
<p>内容哈哈哈</p>
<div>
<div>
<div>
sgfsss
sgegs
标签：UI aml 前端 big upper 符号 注意 文字 contain
原文地址：http://www.cnblogs.com/ghc666/p/7542386.html
