<!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. PHP文件夹操作2

    mkdir("路径文件名"); 创建文件夹 imdir("路径文件名"); 删除文件夹(只能删除空的文件夹) rename("路径",&qu ...

  2. S3C2440串口及其中断系统详解

    个独立异步串行I/O(SIO)端口,每个都可以是基于中断或基于DMA模式的操作.换句话说,UART可以通过产生中断或DMA请求来进行CPU和UART之间的数据传输. 字节的FIFO给发送和接收. 字节 ...

  3. VB.NET中网络编程所需组件WinHTTP的添加

    VB.NET中网络编程所需组件: WinHTTP组件:项目-->添加引用-->COM选项卡-->Microsoft WinHTTP Services,version 5.1--> ...

  4. WebService调用权限验证 SoapHeader

    一般在项目中,制作的都是基于SOAP协议的webservices,其描述语言是WSDL.但是有时候在项目中,需要保证webservices的安全,需要对其进行进行验证,那么我们就要实现SoapHead ...

  5. Markdown及MarkdownPad使用规则

    Markdown Markdown 是一种轻量级标记语言.它允许人们"使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档". Markdown语法简要 ...

  6. KMP之我见

    第二次看kmp,才有点搞懂这个算法(我真是太弱了,就该orz陈老师和龙老师): kmp算法完成的任务是:给定两个字符串O和f,长度分别为n和m,判断f是否在O中出现,如果出现则返回出现的位置.常规方法 ...

  7. IOS 子视图获取父视图的控制器

    UIResponder* nextResponder = [self.view.superview.superview nextResponder]; if ([nextResponder isKin ...

  8. 3.IP协议，ARP协议，RARP协议

    1.IP协议 IP协议是TCP/IP协议的核心,所有的TCP,UDP,IMCP,IGCP的数据都以IP数据格式传输.要注意的是,IP不是可靠的协议,这是说,IP协议没有提供一种数据未传达以后的处理机制 ...

  9. wukong搜索引擎源码解读

    转自:https://ayende.com/blog/171745/code-reading-wukong-full-text-search-engine I like reading code, a ...

  10. Android测试点

    记录下之前项目测试中涉及到的Android测试点: 1.APP基本功能 按照back log整理测试用例,测试中发现有需求变动.或未考虑完全,及时更新测试用例. 测试用例包括:全功能点用例+重点功能快 ...