Bootstrap栅格系统&媒体查询

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

bootstrap中几乎所有元素的盒子模型为IE下的盒模型,通俗点说就是box-sizing设置成了:border-box.

栅格系统

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。

断点 768px 992px 1200px container:两边padding：15px row：两边负margin 15px col列：两边padding：15px

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.container-fluid { //将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}.row:before,
.row:after{display: table;content: " ";} //清除浮动包住里面的 col

@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
...
...
...
}

Bootstrap栅格系统&媒体查询的更多相关文章

Bootstrap3 栅格系统-媒体查询
在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 B ...
[转]bootstrap栅格系统的属性及使用
本文转自:https://www.cnblogs.com/LJYqq/p/6791512.html 栅格系统媒体查询在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query) ...
bootstrap栅格系统的属性及使用
栅格系统媒体查询在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. 小屏幕(平板,大于等于 768px) @media (min-width: ...
Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
第二百三十五节，Bootstrap栅格系统
Bootstrap栅格系统学习要点: 1.移动设备优先 2.布局容器 3.栅格系统本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流式栅格系统. 一．移动 ...
Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
Bootstrap 栅格系统(转载)
源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...
初学bootstrap ---栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

关于oracle的相关基础语句
----给表的字段添加描述COMMENT ON COLUMN 数据库名称.表名.表字段 IS '字段描述'; ---设置自动增长 CREATE SEQUENCE emp_sequence INCREM ...
算法导论第十八章 B树
一.高级数据结构本章以后到第21章(并查集)隶属于高级数据结构的内容.前面还留了两章:贪心算法和摊还分析,打算后面再来补充.之前的章节讨论的支持动态数据集上的操作,如查找.插入.删除等都是基于简单的 ...
C++ map 映照容器
map映照容器的元素数据是一个键值和一个映照数据组成的,键值与映照数据之间具有一一映照的关系. map映照容器的数据结构是采用红黑树来实现的,插入键值的元素不允许重复,比较函数只对元素的键值进行比较, ...
php去除数组中重复数据
<?php /** * 去除数组中重复数据 * by www.jbxue.com **/ $input = array("a" => "green" ...
HashMap 学习笔记
先摆上JDK1.8中HashMap的类注释:我翻译了一下 /** * Hash table based implementation of the <tt>Map</tt> i ...
JsonIgnore注解不起作用的解决办法
一开始在属性上注解了JsonIgnore以为就不会序列化了,结果还是有这个属性,看来是没有起作用啊 [JsonIgnore] public List<int> SubjectAndSubS ...
Django-ORM多表操作（进阶）
一.创建模型下面我们通过图书管理系统,来设计出每张表之间的对应关系. 通过上图关系,来定义一下我们的模型类. from django.db import models class Book(mode ...
&period;NET中制做对象的副本（二）继承对象之间的数据拷贝
定义学生 /// <summary> /// 学生信息 /// </summary> public class Student { /// <summary> // ...
easyUI拖动购物车案例
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
leetcode15&mdash&semi;3Sum
Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = 0? Find ...