<!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. POJ3169差分约束系统

    题意:有n头牛,编号为1到n,对于关系好的ml头牛,al和bl之间的距离不大于dl,关系差的md头牛,ad和bd之间的距离不大于dd,求第1头牛和第n头牛之间的距离 分析:这是一道差分约束系统的题目, ...

  2. iOS开发——Localizable.strings

    这篇写的不多,但是绝对诚意满满.不会像别人一样,要不不详细,要不罗里吧嗦一堆. 1.创建Localizable.strings文件 Command+N—>iOS—>Resource—> ...

  3. [转]配置 VIM 的 Go 语言开发环境

    本文是针对像我这样的 VIM 小白而写的,所使用的 VIM-GO 插件虽然步骤简单但不够详细,特写此文以做记录和分享.欢迎各位大神纠正补充! 特别说明 本博文不是 Go 语言环境搭建教程,只是 VIM ...

  4. nodejs抓取数据二(列表解析)

    这里做得比较暴力,没有分页取出数据解析,O(∩_∩)O哈哈~,居然没有被挂机.不过解析的坑特别多...不过大部分我想要的数据都拿到了. //解析列表数据 var http = require(&quo ...

  5. UVa 369 - Combinations

    题目大意:给两个数n, m,求C(n, m).用java直接写就好了. import java.io.*; import java.util.*; import java.math.*; class ...

  6. IOS开发－UI学习－sqlite数据库的操作

    IOS开发-UI学习-sqlite数据库的操作 sqlite是一个轻量级的数据库,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了,而且它的处理速度比Mysql.PostgreSQL这 ...

  7. C语言－数组

    C语言中使用数组来存储相同类型的大批量数据. 数组: 数组名:起名规则和变量名一样: 定义数组:数组每个元素存储的数据类型+数组名［常量(时表示数组分配存储数据类型的个数也就是长度)］＝{每个元素,以 ...

  8. [题解]bzoj 3223 文艺平衡树

    3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3884  Solved: 2235[Submit][Sta ...

  9. oracle关键字（保留字）

    其实这个东西可以在oracle 上输入一个sql语句就可以得到: select * from v$reserved_words order by keyword asc;   //order 后边不是 ...

  10. JavaScript事件处理程序的3种方式

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...