Bootstrap响应式布局可以使用栅格化系统，其实就是不同的列组合，配合起来便能组合出强大的功能，系统会自动分为最多12列，超出12列会作为一个整体另起一行，像制作表格table的合并列，功能跟colspan类似。

使用方法：

1、包含在.container或.container-fluid中

<div class="container-fluid">

  <div class="row">

    ...

  </div>

</div>

2、创建栅格系统

.col-lg-* 桌面栅格类，适合大屏幕 大桌面显示器 (≥1200px)

.col-md-* 桌面栅格类，适合中等屏幕 桌面显示器 (≥992px)

.col-xs-* 移动栅格类，适合超小屏幕 手机 (<768px)

.col-sm-* 平板栅格类，适合小屏幕 平板 (≥768px)

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <title>bootstrap</title>

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

    <style>

        body{padding-top: 50px;}

        [class^="col"]{

            border:1px solid #000;

            height: 30px;

            background: #ccc;

            line-height: 30px;;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="row">

        <!--12个 col-md-1 -->

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

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

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

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

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

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

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

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

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

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

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

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

    </div>

    <div class="row">

        <div class="col-md-8">.col-md-8</div>

        <div class="col-md-4">.col-md-4</div>

    </div>

    <div class="row">

        <div class="col-md-4">.col-md-4</div>

        <div class="col-md-4">.col-md-4</div>

        <div class="col-md-4">.col-md-4</div>

    </div>

    <div class="row">

        <div class="col-md-6">.col-md-6</div>

        <div class="col-md-6">.col-md-6</div>

    </div>

</div>

</body>

</html>

.col-xs-*  移动端适配

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <title>bootstrap</title>

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

    <!--移动适配-->

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

    <style>

        body{padding-top: 50px;}

        [class^="col"]{

            border:1px solid #000;

            height: 30px;

            background: #ccc;

            line-height: 30px;;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="row">

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

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

    </div>

</div>

</body>

</html>

叠加使用：在移动端5:7 ，在PC端8:4

<div class="container">

    <div class="row">

        <div class="col-xs-5 col-md-8">.col-xs-5 .col-md-8</div>

        <div class="col-xs-7 col-md-4">.col-xs-7 .col-md-4</div>

    </div>

</div>

叠加使用2：在移动端5：7，在平板端4：8，PC端8：4

    <div class="row">

        <div class="col-xs-5 col-sm-4 col-md-8">.col-xs-5 .col-sm-4 .col-md-8</div>

        <div class="col-xs-7 col-sm-8 col-md-4">.col-xs-7 .col-sm-8 .col-md-4</div>

    </div>

3、偏移，原理有多少*，就有多少*倍的margin-left

.col-md-* 对应.col-md-offset-*

.col-xs-* 对应.col-xs-offset-*

.col-sm-* 对应.col-sm-offset-*

.col-lg-* 对应.col-lg-offset-*

<div class="container">

    <div class="row" style="background: #ff0000">

        <div class="col-md-8 col-md-offset-2">col-md-8</div>

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

    </div>

</div>

详情：http://v3.bootcss.com/css/#grid

Bootstrap响应式布局的更多相关文章

  1. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  2. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

  3. bootstrap响应式布局原理

    百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解 ...

  4. Bootstrap响应式布局(1)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  6. bootstrap 响应式布局

    先上点媒体查询css(某个著名的”段子“),跟bootstrap无关: <html> <head> <style> body { background-color: ...

  7. bootstrap响应式布局简单实例

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

  8. bootstrap响应式布局列子

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  9. Bootstrap页面布局7 - Bootstrap响应式布局的实用类

    在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visib ...

随机推荐

  1. WebComponents四大天王教程

    Shadow Dom: http://www.html5rocks.com/zh/tutorials/webcomponents/shadowdom/ http://www.html5rocks.co ...

  2. 【hdu1251-统计难题】Trie

    http://acm.hust.edu.cn/vjudge/problem/16379 题意:给定多个单词,多次询问符合某前缀的单词有多少个. 题解:tire.数组开了5*10^6才A,不然就RE. ...

  3. 【BZOJ2742】【HEOI2012】Akai的数学作业 [数论]

    Akai的数学作业 Time Limit: 10 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 这里是广袤无垠的宇宙这里 ...

  4. [bzoj2049][Sdoi2008]Cave 洞穴勘测——lct

    Brief Description 给定一个森林,您需要支持两种操作: 链接两个节点. 断开两个节点之间的链接. Algorithm Design 对于树上的操作,我们现在已经有了树链剖分可以处理这些 ...

  5. Java环境变量配置以及作用、JDK与JRE区别以及命令行引入jar包

    在配置环境变量中: 设置JAVA_HOME: 一是为了方便引用,比如,JDK安装在C:\jdk1.6.0目录里,则设置JAVA_HOME为该目录路径, 那么以后要使用这个路径的时候, 只需输入%JAV ...

  6. 培训补坑(day8:树上倍增+树链剖分)

    补坑补坑.. 其实挺不理解孙爷为什么把这两个东西放在一起讲..当时我学这一块数据结构都学了一周左右吧(超虚的) 也许孙爷以为我们是省队集训班... 好吧,虽然如此,我还是会认真写博客(保证初学者不会出 ...

  7. Google Intern

    申请 事情应该从去年(2013)说起,好基友从百度离职跳到了Google,回学校打印本科成绩单,然后晚上在scuacm群里,结果Dr. zuo问我想去实习么,正好有学长可以内推. 于是乎写了简历,然后 ...

  8. yum软件包安装

    使用yum安装软件 配置yum配置文件 cd /etc/yum.repos.d/ vim rhel7.repo [rhel7-source] name=rhel7-source baseurl=fil ...

  9. 创建第一个maven项目的那些坑

    1.记事本方式: class所在的目录结构: class的代码书写: package com.imooc.maven01.mode1; public class HelloWorld { public ...

  10. 【bzoj3924&&luogu3345】幻想乡战略游戏

    这题可以用线段树做,不过正解恐怕是动态点分治?(点分树) 简单介绍下动态点分治的概念:在点分治的过程中,一般我们面对的问题都是静态的.如果涉及到修改这类的操作,我们就希望找到我们是如何处理到当前的修改 ...