<!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. JS -- Variables As Properties

    Variables As Properties When you declare a global JavaScript variable, what you are actually doing i ...

  2. Vue.js的从入门到放弃进击录（二）

    哇塞,昨晚更新的篇(一)这么多阅读量,看来入坑的人越来越多啦~熬了一个礼拜夜,今天终于生病惹~国庆要肥家咯·所以把篇(二)也更完.希望各位入坑的小伙伴能少跳几个坑呗.如果有什么不对的地方也欢迎讨论指正 ...

  3. 使用LayUI展示数据

    LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 点击查看 文档地址 下载框架 使用: 1.把这个5个文件项都拷贝到项目中 ...

  4. 【专章】dp基础

    知识储备:dp入门. 好了,完成了dp入门,我们可以做一些稍微不是那么裸的题了. ----------------------------------------------------------- ...

  5. Reliability diagrams

    Reliability diagrams (Hartmann et al. 2002) are simply graphs of the Observed frequency of an event ...

  6. 统计学习方法——CART, Bagging, Random Forest, Boosting

    本文从统计学角度讲解了CART(Classification And Regression Tree), Bagging(bootstrap aggregation), Random Forest B ...

  7. easyUI表单基础知识

    easyUI创建异步提交表单 我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...

  8. PHP计算上个月的开始时间和结束时间戳

    $m = date('Y-m-d', mktime(0,0,0,date('m')-1,1,date('Y'))); $t = date('t',strtotime($m)); //上个月共多少天 $ ...

  9. 【转】Python中实现远程调用（RPC、RMI）简单例子

    远程调用使得调用远程服务器的对象.方法的方式就和调用本地对象.方法的方式差不多,因为我们通过网络编程把这些都隐藏起来了.远程调用是分布式系统的基础. 远程调用一般分为两种,远程过程调用(RPC)和远程 ...

  10. python之串口操作

    1.安装pyserial linux上直接安装: #python2 sudo pip install pyserial #或者python3 sudo pip3 install pyserial Wi ...