<!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. Spring 工作原理

    1.spring原理 内部最核心的就是IOC了,动态注入,让一个对象的创建不用new了,可以自动的生产,这其实就是利用java里的反射,反射其实就是在运行时动态的去创建.调用对象,Spring就是在运 ...

  2. 阿里开源Mysql分布式中间件：Cobar

    目前在从事数据库中间件的开发和维护工作,我们使用的数据库中间件就是由cobar改造而来,所以对于cobar的一些说明一看就明白了: 下面是看到的一个很不错的分析文档 这里整理了下方便自己学习使用. C ...

  3. BCB实现BMP图片的RGB分解（转）

    源:BCB实现BMP图片的RGB分解 1.打开BMP图片文件,在Image控件中显示: if(dlgOpen1->Execute()) { edt1->Text=dlgOpen1-> ...

  4. STM8的中断系统以及外部中断详解

    STM8具有最多32的中断系统,在中断的处理上类似于cortexm系列的芯片,首先是每个中断的向量都是固化在系统内部的,用户需要向相应的中断向量flash位置写入中断处理函数,其二,每个中断向量都具有 ...

  5. arm-linux-gnueabi和arm-linux-gnueabihf 的区别

    转载整理自:http://www.cnblogs.com/xiaotlili/p/3306100.html 一. 什么是ABI和EABI1 .ABI ABI(二进制应用程序接口-Application ...

  6. StackExchange.Redis 官方文档(一) Basics

    基本使用方法: StackExchange.Redis的核心是 StackExchange.Redis 命名空间的 ConnectionMultiplexer 类;它隐藏了多服务器的实现细节.Conn ...

  7. group by 汇总

    group by 的意思为分组汇总.使用了group by 后,要求Select出的结果字段都是可汇总的,否则就会出错. 比如,有:{学号,姓名,性别,年龄,成绩}字段 这样写:SELECT 学号,姓 ...

  8. UVa 299 - Train Swapping

    题目大意:给n个数的一个序列,通过交换相邻的两个数使得这n个数按照从小到大的顺序排列. Inversion index problem: count how many swaps are needed ...

  9. js原生：封装document.getElementByClassName()函数

    //接口封装:封装document.getElementByClassName()函数function getElementsByClassName (cName,domTag,root) {//该函 ...

  10. jQuery按键事件响应的Demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...