<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移动设备优先-->
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
        div{border: 1px solid #f40;
        }

    @media(max-width: 767px){
        div{background:#378232}
    }
    </style>
</head>
<body>
<div class="container">
    <!--row必须放在container里-->
    <div class="row">
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
        <div class="col-md-1">md1</div>
    </div>
    <div class="row">
        <div class="col-md-8 col-sm-6">md8</div>
        <div class="col-md-4 col-sm-6">md4</div>
    </div>
</div>

<div class="container">
    <h1>Container</h1>
</div>
<div class="container-fluid">
    <h1>Container-fluid</h1>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div>
        <div class="col-md-2 col-md-offset-2">col-md-2 col-md-offset-2</div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6">col-md-8 col-md-6</div>
                <div class="col-md-6">col-md-8 col-md-6</div>
            </div>
        </div>
        <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-push-5">col-md-3 col-md-push-5</div>
        <div class="col-md-2 col-md-pull-2">col-md-2 col-md-pull-2</div>
    </div>
    <div class="row">
        <div class="col-md-8  col-sm-3 col-xs-6">3级</div>
        <div class="col-md-4  col-sm-6 col-xs-6">3级</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3">多行1</div>
        <div class="col-xs-6 col-sm-3">多行2</div>
        <div class="col-xs-6 col-sm-3">多行3</div>
        <div class="col-xs-6 col-sm-3">多行4</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3">多行1</br>超小有变化</div>
        <div class="col-xs-6 col-sm-3">多行2</div>
        <div class="col-xs-6 col-sm-3">多行3</div>
        <div class="col-xs-6 col-sm-3">多行4</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3">多行1</br>超小有变化</div>
        <div class="col-xs-6 col-sm-3">多行2</div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3">多行3</div>
        <div class="col-xs-6 col-sm-3">多行4</div>
    </div>
</div>

</nav>
</body>
</html>
            bootstrap栅栏布局及用法
bootstrap主要用到{min-width,max-width以及and语法，用于在不同的分辨率下设置不同的css样式}
@media(max-width:767px){
在小于767px的屏幕里，这样的样式才会生效
}
@media(min-width:768px)and(max-width:991px){
在768-991px的屏幕里，这样的样式才生效
}
@media(min-width:1200px){
大于1200px屏幕，这样的样式才生效
}
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

div使用样式
container           自动居中留左右空白的div
container-fluid     沾满全屏的div
row                 行
列如下:
（从小到大兼容一行12格:后面跟数字几就是几格:如.col-xs-6）
超小屏幕 手机 (<768px)    小屏幕 平板 (≥768px)    中等屏幕 桌面显示器 (≥992px)    大屏幕 大桌面显示器 (≥1200px)
.col-xs-                .col-sm-                .col-md-                    .col-lg-
列偏移col-md-offset-3（md:是中等屏幕 offset偏移 3格）
拉列col-md-push-5从出生位置向右推几格
拉列col-md-pull-2从出生位置向左推几格
clearfix 清除浮动
visible-xs  超小分辨率显示

②bootstrap栅栏使用基础案例的更多相关文章

  1. 【7】了解Bootstrap栅格系统基础案例（2）

    ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...

  2. 【10】了解Bootstrap栅格系统基础案例（5）

    这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...

  3. 【9】了解Bootstrap栅格系统基础案例（4）

    这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...

  4. 【8】了解Bootstrap栅格系统基础案例（3）

    这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...

  5. 【6】了解Bootstrap栅格系统基础案例（1）

    从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...

  6. ⒂bootstrap组件 折叠 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. ⒀bootstrap组件 选项卡 基础案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  8. ⑤bootstrap表格使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ④bootstrap列表使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 第6章 Overlapped I/O， 在你身后变戏法 ---1

    这一章描述如何使用 overlapped I/O(也就是 asynchronous I/O).某些时候 overlapped I/O 可以取代多线程的功用.然而,overlapped I/O 加上co ...

  2. spring 内部工作机制（一）

    Spring内部机制的内容较多,所以打算多分几个阶段来写. 本章仅探索Spring容器启动做了哪些事: 前言: 都说Spring容器就像一台构造精妙的机器,此话一点不假,我们通过配置文件向机器传达控制 ...

  3. Java历程-初学篇 Day03扫描仪与类型转换

    一,扫描仪 步骤1,使用扫描仪方法 步骤2,导个包 步骤三,使用 注意事项:严格区分大小写 二,类型转换 1,自动类型转换 当将一个数值范围小的类型赋给一个数值范围大的数值型变量,java在编译过程中 ...

  4. ZOJ2105 终于找到错误

    ZOJ2105:点击打开链接 错误代码 #include<stdio.h> #include<stdlib.h> int q[110]; int main() { int a, ...

  5. ZOJ-2091-Mean of Subsequence （反证法的运用！！）

    http://blog.csdn.net/u014355480/article/details/40862041 ZOJ2091 题意:其实就是找后几个数的平均值的最大值!! (贪心策略!要找对) k ...

  6. mybatis 和hibernate的区别

    mybaits 是不完全的orm(对象关系映射(Object Relational Mapping)框架,需要自己书写sql语句 mybatis学习难度必hibernate低适合关系型模型要求不高的软 ...

  7. android6.0 SerialPort 服务

    上一篇博客描述了一个简单的串口应用程序和驱动程序,了解了应用程序访问串口的基本操作,如打开串口,设置串口,写串口,读串口,关闭串口等.和Linux串口驱动的基本框架.这里将了解Android下的串口系 ...

  8. [Web开发(1)] MyEclipse/Eclipse 使用Tomcat部署Web/Maven项目经典错误

    1.Tomcat启动报错:server tomcat start within 45 seconds 问题原因:由于eclipse默认Tomcat设置是启动时间为45s,所以在45s内没有启动成功就会 ...

  9. python学习笔记（一）之入门

    1.python的安装 官网下载.exe文件直接安装即可,在安装过程中选择加入环境变量,就不用在安装后再去增添环境变量了. 本文选择的是python3.6版本,没有选择2.7版本. 2.启动pytho ...

  10. 【工具】Spring项目转化Spring Web项目插件

    前言 源于前一篇博文中提到,将Spring项目转化为Spring Web项目,发现添加项目文件和修改pom.xml文件等都是手动完成的,心想着开发一个Idea插件来自动化完成上面的过程,实现一键转化. ...