本文介绍了响应式网页设计的核心概念和技术细节，包括移动端优先视口设置、布局容器使用方法、排版标签应用、文本对齐及大小写控制、列表样式调整、表格响应式处理、图片响应式展示以及栅格系统的构建。
移动端优先：
<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
扫一扫
2414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
