<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 处理低版本IE 4.0不考虑IE8 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端视口的设置 -->

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

    <!-- 引入bootstrap.css -->

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

    <style>

        div[class*="col-"]{

            background: #999;

            border:1px solid blue ;

            height: 50px;

            color:#fff;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-lg-1">col-lg-1</div>

        <div class="col-lg-11">col-lg-11</div>

    </div>

    <div class="row">

        <div class="col-lg-3">col-lg-3</div>

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

    </div>

    <div class="row">

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

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

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

    </div>

</div>

</body>

<!-- 引入jqurry.js bootstrap.js 基于JQ开发的-->

<script src="js/jqurry-1.11.3.min.js"></script>

<script scr="js/bootstrap.js"></script>

</html>

<!-- bootstrap栅格系统 -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 处理低版本IE 4.0不考虑IE8 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端视口的设置 -->

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

    <!-- 引入bootstrap.css -->

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

    <style>

        div{

            border:1px solid #000 ;

        }

    </style>

</head>

<body>

<div class="container-fluid">

    aaaaaaaaaaa

</div>

<div class="container">

    bbbbbbbbbb

</div>

</body>

<!-- 引入jqurry.js bootstrap.js 基于JQ开发的-->

<script src="js/jqurry-1.11.3.min.js"></script>

<script scr="js/bootstrap.js"></script>

</html>

<!-- bootstrap栅格系统 -->

<script>

    /*

        bootstrap栅格系统

        概念

            - 分12列

                》row

                》col

            - 阈值

                》1200>=

                》992>=

                》768>=

                》768<

        语法

                》col-lg-

                》col-md-

                》col-sm-

                》col-xs-

        容器

            container-fluid

                》 流体 布局

            container

                》 固定 布局

                》    1170

                》    970

                》    750

                》 auto

        其它

            -列偏移

                》col-{*}-offset-* 往后

            -列排序

                》col-{*}-push-* 往后

                》col-{*}-pull-* 往前

            -嵌套

            -清浮动 clearfix

        注：使用固定宽度 设置：width:1000px !important;

            栅格跟浮动的区别是：浮动换行的时候会留下空隙，而栅格不会;

     */

</script>

初学bootstrap ---栅格系统的更多相关文章

  1. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  2. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  3. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  4. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  5. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  6. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  7. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  8. 第二百三十五节，Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一．移动 ...

  9. Bootstrap 栅格系统 理解与总结

    Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...

随机推荐

  1. 10、手把手教你Extjs5（十）自定义模块的设计

    从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...

  2. php传输大数据大文件时候php.ini相关设置

    post_max_size which is directly related to the POST size---针对采用post上传的,大文件,此项为关键 upload_max_filesize ...

  3. Mac下配置node.js环境（Mac 10.12）

    有安装就有卸载,卸载教程参考:http://www.cnblogs.com/EasonJim/p/6287141.html 一.官方下载pkg安装包 1.安装 到官网https://nodejs.or ...

  4. java学习(四) excel读取

    private static void readExcel() { String filePath = "C:/Standardzid.xls"; File file = new ...

  5. IOS开发中Xcode常用插件安装与管理（转）

    XCode中插件管理工具:Alcatraz    转自http://www.cocoachina.com/industry/20140506/8325.html 苹果现在的成绩得益于其始终如一的坚持. ...

  6. 饼干是这样压缩的——PHP使用zlib扩展实现页面GZIP压缩输出

    饼干是这样压缩的——PHP使用zlib扩展实现页面GZIP压缩输出 GZIP(GNU-ZIP)是一种压缩技术.经过GZIP压缩后页面大小可以变为原来的30%甚至更小.这样用户浏览的时候就会感觉很爽很愉 ...

  7. java 解析excel

    2014年2月25日 14:24:48 解析excel方法 //首先是jar包下载,请自行百度 //代码 package cn.wuwenfu.excel; import java.io.File; ...

  8. 【Xilinx-Petalinux学习】-08-OpenAMP系统实现

    openAMP系统实现. 一个核跑Linux,一个核裸跑.     ----->  已经实现. 一个核跑Linux,一个核跑UCOS   ----->  还未实现. Micrium的uco ...

  9. 轻轻的扩展了一下IEnumerable<T>

    今天用EF写东西玩,觉得IEnumerable里面除了where().select(),是不是能添加点其他方法呢. 想做就做,F12到方法定义: public static IEnumerable&l ...

  10. Struts2命令空间小结

    sturts2命名空间小结,以tomcat为服务器 1. 命名空间配置为“/” <package name="default" namespace="/" ...