<!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. lPC1788的GPIO驱动

    #include "led.h" void led_init(void) { //p1.14 p0.16 p1.13 p4.27 LPC_SC->PCONP |= (1< ...

  2. shell 实例学习

    安装crond:yum install crontabs  (http://blog.163.com/victory_wxl/blog/static/14130530220115296180333/) ...

  3. 微信小程序之----接口调用方式

    最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实 ...

  4. LPC2478时钟模块详解

    时钟框图如上图,系统时钟来源分别是内部4M的RC振荡器和外置晶振,RTC模块在某些情况下也可以作为主时钟,经过系统时钟选择s\de时钟需要经过PLL倍频(或者不倍频),处理过的PLL输出USB时钟分频 ...

  5. 让Terminal显示git分支

    vi ~/.bash_profile ### 显示git分支 parse_git_branch () { git branch 2> /dev/null | sed -e '/^[^*]/d' ...

  6. 闭包用法，延迟tab

    var changeTab =( function () { var timeId = 0; return function (tabId) { if (timeId) { clearTimeout( ...

  7. OC纯代码全手工打造ScroolView实现翻页

    OC纯代码全手工打造ScroolView实现翻页 1. 概述 分为三部分: 上部标题ScrollView 下部内容ScrollView 上部当前页 标示线 2. 效果 上下两部分都随着手势的滑动一块滑 ...

  8. nmon在线安装及使用

    安装 mkdir /usr/local/nmon cd /usr/local/nmon wget http://sourceforge.net/projects/nmon/files/nmon_lin ...

  9. PHP数组函数的分组归纳

    统计: array_count_values     统计数组中所有的值出现的次数 array_product         计算数组中所有值的乘积 array_sum         计算数组中所 ...

  10. Java中间件：淘宝网系统高性能利器（转）

    淘宝网是亚太最大的网络零售商圈,其知名度毋庸置疑,吸引着越来越多的消费者从街头移步这里,成为其忠实粉丝.如此多的用户和交易量,也意味着海量的信息处理,其背后的IT架构的稳定性.可靠性也显得尤为重要.那 ...