bootstrap响应式

响应式原理

• 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

设备的划分

• 小于768的为超小屏幕（手机）
• 768~992之间的为小屏设备（平板）
• 992~1200的中等屏幕（桌面显示器）
• 大于1200的宽屏设备（大桌面显示器）

bootstrap容器

container

container-fluid

• 流式布局容器 百分百宽度
• 占据全部视口（viewport）的容器。

bootstrap栅格系统

• 按照不同屏幕划分为1~12 等份
• 行（row） 可以去除父容器作用15px的边距
• xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
• 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的 padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6”

嵌套

<div class="col-md-4">
<div class="row">
<div class="col-md-6">one</div>
<div class="col-md-6">two</div>
</div>
</div>

偏移

• 使用 .col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4 col-lg-offset-4">2</div>
</div>

排序

• 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<div class="row">
<div class="col-lg-4 col-lg-push-8">left</div>
<div class="col-lg-8 col-lg-pull-4">right</div>
</div>

响应式工具

修改container宽度示例

@media (min-width: 1280px) {
.container {
width: 1280px;
}
}

最后

以上就是淡然黑夜为你收集整理的bootstrap响应式的全部内容，希望文章能够帮你解决bootstrap响应式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。