<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>code2</title>

        <link rel="stylesheet" href="css/bootstrap.min.css"/>

        <script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>

        <script type="application/javascript" src="js/bootstrap.min.js"></script>

        <style>

            div{border:1px solid red}

            @media only screen and (min-width: 500px) and (max-width: 640px) {

                div {background: #1B6D85;}

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="row">

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

              <div class="col-md-1">.col-md-1</div>

            </div>

            <div class="row">

              <div class="col-md-6 col-sm-6">.col-md-6</div>

              <div class="col-md-6 clo-sm-6">.col-md-6</div>

</div>

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

<head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>code3</title>

        <link rel="stylesheet" href="css/bootstrap.min.css"/>

        <script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>

        <script type="application/javascript" src="js/bootstrap.min.js"></script>

        <style>

            div{background: #C4E3F3;}

        </style>

    </head>

    <body>

        <div class="container">

            container

        </div>

        <div class="container-fluid">

            <!--container-fluid占满行-->

            container-fluid

            </div>

    </body>

</html>
<!DOCTYPE html>

<html>

<head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>lie-zu-he</title>

        <link rel="stylesheet" href="css/bootstrap.min.css"/>

        <script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>

        <script type="application/javascript" src="js/bootstrap.min.js"></script>

        <style>

            div{border: 1px solid red;}

        </style>

    </head>

    <body>

        <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="clo-xs-6">col-xs-6</div>

            </div>

            <!--/列偏移-->

             <div class="row">

                <div class="col-md-3 col-md-offset-3">col-md-3</div>

                <div class="clo-md-2 col-md-offset-2">col-md-2</div>

            </div>

            <!--列嵌套-->

            <div class="row">

                <div class="col-md-8">

                    <div class="col-md-6">col-md-6</div>

                    <div class="col-md-6">col-md-6</div>

                </div>

                <div class="col-md-4">col-md-4</div>

            </div>

            <!--列的排序-->

            <div class="row">

                <!--push是向后推几格子

                pull是向前拉几个格子-->

                <div class="col-md-3 col-md-push-5">col-md-3</div>

                 <div class="col-md-2 col-md-pull-3">col-md-2</div>

            </div>

            <!--跨分辨率-->

            <div class="row">

                <div class="col-md-8 col-xs-5 col-sm-4">div</div>

                <div class="col-md-4 col-sm-8 col-xs-7">div</div>

            </div>

        </div>

    </body>

</html>

bootstrap ch2清除浮动+12的更多相关文章

  1. bootstrap ch2清除浮动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. 5.bootstrap栅格 清除浮动

    只要用到栅格,就注意要清除浮动,清除方法就是在父元素的class上加一个clearfix 1.情景: . <div class="col-sm-7"> <div ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：清除浮动1

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. bootstrap清除浮动问题

    所有的col-样式都是左浮动 <div class="row">    <div class="col-xs-6 col-sm-3">d ...

  5. clearfix清除浮动

    首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题 ...

  6. 细微之处：比较两种CSS清除浮动的兼容

    http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html 清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮 ...

  7. 第五篇：web之前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式   前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...

  8. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  9. Css清除浮动最优方式之一

    ---恢复内容开始--- .container:before, .container:after { display: table; content: " "; } .contai ...

随机推荐

  1. mysql5.5修改字符编码

    因为mysql版本问题,网上各种修改编码的方法都不行,最后找到下面这条,终于解决! [mysqld]下添加: character-set-server=utf8 collation-server=ut ...

  2. 在Java中system.out.println使用方法

    先输入sysout,然后输入辅助快捷键:Alt+/ 常用快捷键: 1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以打开工作区中任何一个文件,只需要按下文件 ...

  3. QDataStream对QVector的序列化

    最近发现QDataStream这个好东东,序列化发送数据很方便,与大家分享一下. 客户端: line.h #ifndef LINE_H #define LINE_H #include <QStr ...

  4. linux 目录及文件的命名规则、ls操作

    linux 命名: 1 不超过255个字符 2 严格区分大小写 3 除/外,其他的字符都是合法的 注意:1)避免文件名首字符使用+ - .(避免和隐藏文件混淆) 2)避免文件名使用空格,制表符以及@# ...

  5. 字符串ID转换成字符串名字

    select  U.CnName+','  from f_splitstr('1828,1055333,1,1035681,752,494,22549,219,23860,478,23453,677, ...

  6. open（）的模块

    对文件操作流程: 1.打开文件,得到文件句柄并赋值给一个变量 2.通过句柄对文件进行操作 3.关闭文件 mode can be: *  'r' 只读. * 'w' 写入,如果之前有就覆盖 * 'a' ...

  7. clone()方法、深复制和浅复制

    clone方法 Java中没有明确提供指针的概念和用法,而实质上没个new语句返回的都是一个指针的引用,只不过在大部分情况下开发人员不需要关心如何去操作这个指针而已. 在实际编程中,经常会遇到从某个已 ...

  8. PHP 5.4.8 添加系统服务命令

    之前没注意,PHP 5.4.8 的安装包有自带的系统服务注册文件的 打开编译安装包,换成你自己的路径 cd /mydata/soft/php-5.4.8/ cp sapi/fpm/init.d.php ...

  9. HDU 5831 Rikka with Parenthesis II

    如果左括号数量和右括号数量不等,输出No 进行一次匹配,看匹配完之后栈中还有多少元素: 如果n=2,并且栈中无元素,说明是()的情况,输出No 如果n=2,并且栈中有元素,说明是)(的情况,输出Yes ...

  10. wordpress 删除底部"自豪地采用 WordPress"

    找到footer.php文件,删除以下代码即可: <footer id="colophon" class="site-footer" role=" ...