基本简介

1、Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

2、栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

3、“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

基本案例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

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

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

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <style>

        .row div {

            border: 1px solid #000;

        }

    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div class="container">

    <div class="row">

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

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

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

    </div>

    <div class="row">

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

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

        <div class="col-md-10">10</div>

    </div>

    <div class="row">

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

        <div class="col-sm-1">2</div>

        <div class="col-sm-10">10</div>

    </div>

    <div class="row">

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

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

        <div class="col-xs-10">10</div>

    </div>

</div>

<br><br>

<div class="container-fluid">

    <div class="row">

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介1</div>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介2</div>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介3</div>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介4</div>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介5</div>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介6</div>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介7</div>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介8</div>

    </div>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

移动web——bootstrap栅格系统的更多相关文章

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

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

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

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

  3. Bootstrap 栅格系统(转载)

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

  4. Bootstrap栅格系统（布局）

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

  5. 初学bootstrap ---栅格系统

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

  6. 入门——Bootstrap栅格系统

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

  7. Bootstrap栅格系统基本使用

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

  8. Bootstrap 栅格系统初识

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

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

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

随机推荐

  1. [bzoj1022/poj3480]小约翰的游戏John_博弈论

    小约翰的游戏John 题目大意:Nim游戏.区别在于取走最后一颗石子这输. 注释:$1\le cases \le 500$,$1\le n\le 50$. 想法:anti-SG游戏Colon定理. 如 ...

  2. [codevs 1482]路线统计（矩阵乘法）

    题目:http://codevs.cn/problem/1482/ 分析:很像“经过K条边的最短路径条数”.但有所不同,那就是不是边数固定,而是路径总长度固定.看似不能用矩阵乘法了……但注意到每条边的 ...

  3. Mcrouter-基于Memcached协议的缓存层流量管理工具（Memcached集群的另一个选择）（转）

    Mcrouter 是一个基于Memcached协议的路由器,它是 Facebook缓存架构的核心组件,在峰值的时候,它能够处理每秒50亿次的请求.近日,Facebook开放了Mcrouter的源代码, ...

  4. redis sentinel集群配置及haproxy配置

    ip分布情况: sentinel-1/redis 主 10.11.11.5 sentinel-2/redis 从 10.11.11.7 sentinel-3/redis 从 10.11.11.8 ha ...

  5. Eclipse查看方法/类调用的方法

    1.(首推)双击选中该方法/类,[Ctrl]+[Alt]+[H](Open Call Hierarchy) 2.(次推)选中该方法/类,[Ctrl]+[Shift]+[G](References) 3 ...

  6. MYSQL常用的性能指标

    (1) QPS(每秒Query量) QPS = Questions(or Queries) / seconds mysql > show  global status like 'Questio ...

  7. php 类型转换

    PHP数据类型转换 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: •(int).(integer):转换成整形 •(float).(double).(real):转换成浮点型 •(s ...

  8. Java字符编码的转化问题

    概述: 我想字符串的编码问题的确会困扰到非常多开发人员.我近期也是被困扰到了. 问题是这种,我们通过二维码扫描来获得二维码中的信息.可是.我们的二维码的产生过程却是"多样化"的.即 ...

  9. Python3基础（六） 深入list列表

    正如Python FAQ1附录中说的, Python中任何值都是一个对象,所以任何类型(int.str.list-)都是一个类.而类就必然有它的方法或属性,我们要记下这么多类的所有方法显然是不可能的, ...

  10. 分布式软件体系结构风格（C/S，B/S）

    分布式软件体系结构风格 1.  三层C/S结构 2.  三层B/S结构 了解很多其它软件体系结构 三层C/S结构(3-Tier C/S Architecture) §第1层:用户界面GUI-表示层-- ...