响应式布局:
同一套页面可以兼容不同分辨率的设备。
实现:依赖于栅格系统:将一行平均分为12个格子,可以指定元素占几个格子,
步骤:
1.定义容器。相当于之前的table
容器分类:
1.container:两边有留白
2.container-fluid:每一种设备都是100%宽度
2.定义行,相当于之前的tr 样式:row
3.定义元素,相当于之前的td,指定给元素在不同的设备上,所占的格子数目。 样式:col-设备代号-格子数目
设备代号:
xs
:超小屏幕 手机 (<768px):.col-xs-12
sm
:小屏幕 平板 (≥768px)
md
:中等屏幕 桌面显示器 (≥992px)
lg
:大屏幕 大桌面显示器 (≥1200px)
注意事项:
1.一行中如果格子数目超过12,则超出部分自动换行
2.栅格类属性可以向上兼容。栅格类适用于屏幕宽度大于或等于分界点大小的设备
3.如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行
CSS样式和JS插件
全局css样式:官网链接:IT虾米网
按钮:class="btn btn-default"
图片:
class="img-responsive":图片在任意尺寸都占100%
图片形状:
<img src="..." alt="..." class="img-rounded">:方形
<img src="..." alt="..." class="img-circle">:圆形
<img src="..." alt="..." class="img-thumbnail">:相框
表格:
table:为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线
table-striped :可以给 <tbody> 之内的每一行增加斑马条纹样式
table-hover:可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
表单:
给表单项添加:class="form-control":<input>
、<textarea>
和 <select>
元素都将被默认设置宽度属性为 width: 100%
组件:
导航条(官网代码):IT虾米网
分页条(官网代码):IT虾米网
插件:
轮播图(官网代码):IT虾米网