bootstrap属性笔记
移动端优先:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
布局容器:
<div class="container">
</div> ----固定宽度 1170px
<div class="container-fluid">
</div> ----宽度为100%
排版标签:
<h1 class="page-header"></h1> ----改变了字体粗细大小,下方加了一条线 36px
<h2></h2> 30px
<small></small> 副标题 小一号
<big></big> 副标题 大一号
文本对齐方式:
.text-left 左对齐
.text-right 右对齐
.text-center 居中对齐
英文大小写:
.text-uppercase ---大写
.text-lowercase ---小写
.text-capitalize ---首字母大写
有序无序队:
<ul>
<li></li>
<li></li>
</ul>
.list-unstyled ---除掉前面的符号
.list-inline ---排在同一行
自定义列表:
<dl class="dl-horizontal"> ---设置变成横向排列
<dt>标题</dt>
<dd>标题解释</dd>
</dl>
表格:
<div class="table-responsive"> ---响应式表格(给table的父元素加)
<table class="table"> ---表格的一个基类
<tr>
<td></td>
</tr>
</table>
</div>
.table-bordered ---给表格加外边框
.table-hover ---鼠标悬停效果
.table-striped ---隔行换色 斑马线效果
.table-condensed ---padding值减半
响应式图片:
.img-responsive ---响应式图片 图片的形状
.img-circle ---椭圆形
.img-rounded ---圆角矩形
.img-thumbnail ---给图片加圆角的边框
栅格系统:
栅格系统一定要放在容器内
<div class="container"></div>
<div class="container-fluid"></div>
浏览器最多分配12列,栅格系统是由行row和列col