1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

The default grid system provided in Bootstrap utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically.

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.


Offsetting columns

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4
<div class="row">
    <div class="span4">...</div>
    <div class="span4 offset4">...</div>
</div>

Nesting columns

With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.

Example

p>Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.

Level 1 of column
Level 2
Level 2
<div class="row">
     <div class="span6">
        Level 1 column
        <div class="row">
            <div class="span3">Level 2</div>
            <div class="span3">Level 2</div>
        </div>
    </div>
</div>

Fluid columns

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Percents, not pixels

The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

Fluid rows

Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.

Markup

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

Fluid nesting

Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.

Fluid 12
Fluid 6
Fluid 6
<div class="row-fluid">
    <div class="span12">
        Level 1 of column
        <div class="row-fluid">
            <div class="span6">Level 2</div>
            <div class="span6">Level 2</div>
        </div>
    </div>
</div>

Fixed layout

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.

<body>
    <div class="container">
        ...
    </div>
</body>

Fluid layout

<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <!--Sidebar content-->
        </div>
        <div class="span10">
            <!--Body content-->
        </div>
    </div>
</div>

What they do

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

Supported devices

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label Layout width Column width Gutter width
Smartphones 480px and below Fluid columns, no fixed widths
Smartphones to tablets 767px and below Fluid columns, no fixed widths
Portrait tablets 768px and above 42px 20px
Default 980px and up 60px 20px
Large display 1200px and up 70px 30px

Requires meta tag

To ensure devices display responsive pages properly, include the viewport meta tag.

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

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  /* Landscape phones and down */
  @media (max-width: 480px) { ... }
  /* Landscape phone to portrait tablet */
  @media (max-width: 767px) { ... }
  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) { ... }
  /* Large desktop */
  @media (min-width: 1200px) { ... }

Responsive utility classes

What are they

For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 480px and below Tablets 767px and below Desktops 768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible
海南移动 网络安全国家网络安全 杂谈网关 网络安全防护手段太原网络营销 优帮云广州网站维护网络营销有什么性质什么是计算机信息安全酒店信息安全信息安全管理法,-1信息安全三级等级保护他穿越了,拥有着把异界生物变成一个猛男的能力,从此过上了没羞没躁~啊不~是开始了征服世界的旅程闲来无趣忆少年,重拾稚气...... 盛夏的夜晚,随着蝉鸣此起彼伏一个年轻男孩从樱花树下醒来,旁边似乎躺着一个年轻的小女孩,透过月光依稀的看到那两个兔牙,他不仅没害怕,浑身颤抖着说:“薄荷兔,谁…谁杀…杀了你,不……不是我,谁杀了……你,不是我……。”一直摇着,奇怪的是一直重复着,以为这样就能回到从前。 侠,以武犯禁。 魔,以欲乱世。 当一个力量与技巧都达到极致的存在出现在这个世界上时是怎样的体验? 这是一个杀戮机器逐渐成长为人的故事....一把被遗忘的斩魄刀,静静的在拘突中等待新的主人的来临。 在火车中沉睡的少年刚刚清醒,在一阵猛烈的冲击感后失去了意识,醒来之时却在一片液体的包裹之下,接着,传送界门打开,他被来历不明的拘突吸入。 拘突之中,被遗忘的斩魄刀再次感受到了人类的体温。 一人,执起斩魄刀划破黑暗。 他一直梦想成为热血动漫中的人物,今日,梦想成真,可是,他很快发现,那里等待他的不是他梦想中炫酷的冒险,而是为了保命与朋友无奈选择的斗争与杀戮。 五十年后,他梦想着找到一片安宁的世界,脱离无尽的血海。他找到了回到原来世界的路。 时间一晃,六十年过去,他静静的躺在病床上,神态很安详,双眼永远闭上。 一片液体中,他静静的躺着,又一次传送界门打开,又一次被拘突吸入,等待他的,是一百一十年前那声熟悉的呼唤。李倾发现自己穿越到了一个被游戏化的世界。 在这个世界里,每个人都要靠自己的天赋来选择职业,提升等级。 职业和等级,决定着社会地位和薪水高低。 而李倾意外觉醒了RPG回合制天赋。 打怪流能获得经验和道具! 【你击败了装逼的同学!】 【恭喜你获得技能[大逼兜子]】 【你击败了恶心的上司!】 【恭喜你的职业晋升为[部门经理]】 【你击败了烦人的富二代!】 【恭喜你获得跑车一辆!】 李倾靠着一手大逼兜子,奖励拿到手软,巴掌扇到手酸,升级快到飞起! “平均十级的同学聚会,你让我这个60级的怎么去?” 简介无力,请看正文!树林,沼泽,血污,以及被抛弃的人便是这个岛上最常见的东西宋末,蒙、金、宋战乱不断,南宋李庭芝、李继先、张世杰三位从小长大的兄弟,一起读书、练武,心怀大志,有勇有谋,共同投身于保家卫国的行列,李继先先后结识了诸如余玠、杨亮节、李芾、王坚、文天祥和陆秀夫等名臣名将,又结识了诸如慧通、玉虚三仙、桃源四剑、潇湘剑客、剑南六洞仙等江湖豪杰,他们虽然出身不同,性情和志向各异,但最终都聚合到了抗敌保国的队伍中,他们忠心于国,侠义冲天,文武超群,在政治与江湖间穿梭,同奸臣、叛徒、敌军、仇人不断对战,最后随着南宋的一路失败和灭亡而纷纷牺牲,余留之人最后看到元朝新生气象后,感到天下一统是民心所向,便顺应大势,退隐山野。一个少年闯入云海之中,在云海闯荡出一个云海传说......这是一个修炼玄能为主的世界,玄能就是这个世界的主旋律。 没有玄能的人就会生活在这个大陆的最底层。 等级制度:玄徒、玄者、玄士、玄师、大玄师、玄主、玄宗、玄王、玄皇、玄尊、 功法级别:日月星尘,每阶段九品,一品最次九品至高 玄器阶位:天地玄黄,每位分九阶,一阶最低九阶最高
网站营销的方法 西安信息安全公司排名,-1 酒店信息安全 网站字体怎么设置 深圳自适应网站设计 移动监控 网络安全 创建网站公司 徐州 无边界网络安全 东台网站制作 长沙做网站建设的 忧郁症【www.richdady.cn】 暗恋的案例分享咨询【www.richdady.cn】 婚姻生活不顺的咨询技巧咨询【www.richdady.cn】 升迁障碍的咨询技巧【www.richdady.cn】 失业的咨询技巧【www.richdady.cn】 人际关系不好【www.richdady.cn】√转ihbwel 官司的前世因果咨询【企鹅383550880】√转ihbwel 孩子学习不好的前世因果威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子不爱读书的应对策略有哪些?【σσЗ8З55О88О√转ihbwel 亲子关系的心理建设【企鹅383550880】√转ihbwel 孩子不爱读书的应对策略【企鹅383550880】√转ihbwel 婚姻生活不顺的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 事业发展瓶颈突破【企鹅383550880】√转ihbwel 克服职场升迁障碍咨询【σσЗ8З55О88О√转ihbwel 去世的父亲的前世缘分【σσЗ8З55О88О√转ihbwel 如何解决孩子不爱读书的问题?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 外灵干扰的心理调适【微:qq383550880 】√转ihbwel 耳鸣的原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世老公的咨询技巧【微:qq383550880 】√转ihbwel 存不住钱【企鹅383550880】√转ihbwel 国家保密学院信息安全 有国家认证的网络安全认证的 数据恢复公司 云大信息安全 杂志网站建设 成功网络整合营销案例 网络安全现状 2017 深圳自适应网站设计 黄国外网站 信息安全审计 公司 信息安全防护相关产品 中央信息安全管理中心,-1 2016信息安全泄密案例 公司网站的开发和网版的重要性 全网营销 执行系统 网络营销能力秀做什么 上海建网站的公司 网站字体怎么设置 章丘网站建设 信息安全管理 体系 有国家认证的网络安全认证的 数据恢复公司 网络安全案例故事 中国信息安全局势 杭州网站设计渠道 邵阳网站优化 棕色网站 深圳营销外包公司有哪些 北京邮电大学信息安全 深圳营销外包公司有哪些 南通做网站 提供佛山顺德网站设计 营销工具 信息安全三级等级保护 深圳高端电商网站建设者 深圳高端电商网站建设者 网站字体怎么设置 2016 网络安全竞赛 工信部 免费网站模板下载 网站建设 武汉 全网营销推广 清华 信息安全 重庆整合网络营销代理 网络安全现状 2017 东台网站制作 绵阳的网站建设公司 论坛发帖推广营销服务 2014春浙江大学计算机信息安全 网络营销有几个阶段 营销工具 i春秋网络安全大片app 国家级网络安全事件 中央信息安全管理中心,-1 网站内页 站外营销策划 成功网络整合营销案例 服务器 信息安全性 全网营销 执行系统 2014春浙江大学计算机信息安全 服务器 信息安全性 网络安全处置流程图 工业信息安全专家 石家庄制作网站推广 网络信息安全比赛 邵阳网站优化 如何建立网站 网络信息安全实训总结 无边界网络安全 哈工大网络安全响应组 昆明网络营销实战培训 网络营销能力秀做什么 信息安全风险评估作用 系统性营销 网络安全演讲视频下载 普及化营销 微博怎么做营销 信息安全服务管理规范 中国信息安全网作业,-1校园网站设计 如何建立网站 山石网科网络安全 房地产型网站建设 长沙做网站建设的 网站好坏 哪里的佛山网站建设 哈尔滨网站制作公司 电信 网络安全 深圳自适应网站设计 网站好坏 网络营销低价定价策略 展示网站方案 南京网络安全类公司排名 网络营销低价定价策略 粉丝网站制作 网络营销战略研究 网站互动 网络安全处置流程图 文昌网站建设 网络安全问题产生原因 BBS营销 杂志网站建设 国家保密学院信息安全 个人网站企业网站 浙江省信息安全等级资质 网络营销工具的概念 信息安全技术 数据库管理 北京邮电大学信息安全 工业信息安全专家 网站营销的方法 网络安全的话 病毒营销的定义与特点是什么意思 手机网站开发教程 移动监控 网络安全 网络营销的用户行为一个优秀的网站 海南移动 网络安全 2016中国网络安全报告 免费网站设计 网站建设中图片 科技与营销 成都 网站建设 网络安全合规 云大信息安全 哈工大网络安全响应组 信息安全cip 是什么网络安全技术的基础 网络安全产品培训方案 网络和信息安全通报实行小时联络制度 贵阳网站优化网站建设公司是什么 粉丝网站制作 电信 网络安全 广州网站建设公司 棕色网站 创建网站公司 徐州 互联网 与传统营销区别 网络安全立国 全网营销 执行系统 公司网站的开发和网版的重要性 耒阳做网站 上海建网站的公司 网络安全技术人员工资 广州网站维护 章丘网站建设 信息安全讲师认证,-1 广州网站建设公司 有国家认证的网络安全认证的 数据恢复公司 怎么在sql2005数据库里添加一个asp网站的超级用户名 2016中国网络安全报告 信息安全集成服务 等级 信息安全三级等级保护 世界网络安全500强 杭州网站设计渠道 信息安全防护相关产品 网络营销战略研究 i春秋网络安全大片app 全网营销推广 房地产型网站建设 i春秋网络安全大片app 2016中国网络安全报告 中国网络安全100强 网络安全案例故事 网络安全产品培训方案 营销的层次 长安网站建设多少钱 网络安全信息安全实验室 黄国外网站 学校网站设计 浙江信息安全 网络信息安全比赛 2016 网络安全竞赛 工信部 酒店信息安全 南京微信营销 国家网络安全 杂谈 网络安全编程特点 无锡网站建设原则 网关 网络安全防护手段 哪里的佛山网站建设 网站与域名 流行的网络安全软件 中国信息安全局势 网络发展对营销的影响 重庆整合网络营销代理 网络营销战略研究 网络安全信息安全实验室 网络安全怎样辨别 哈尔滨网站制作公司 信息安全专业大学排名2017 网络安全问题会议 南通做网站 信息安全专业大学排名2017 湖南高端网站制 杂志网站建设 营销工具 青岛专业餐饮网站制作 深圳自适应网站设计 北京响应式的网站设计 工控机 网络安全 网络安全工程师 培训 第三方平台的问答营销 网站营销的方法 网络安全编程特点 信息安全管理 体系 深圳高端电商网站建设者 信息安全 投稿 有国家认证的网络安全认证的 数据恢复公司 长沙做网站建设的 网站聚合页 保障电脑安全和信息安全的建议 单页的网站怎么做的 绵阳的网站建设公司 中国信息安全测评中心 信息安全服务资质 在网站中添加百度地图 耒阳做网站 怎么在sql2005数据库里添加一个asp网站的超级用户名 网络和信息安全通报实行小时联络制度 信息安全审计 公司 清华 信息安全 个人手机版网站建设 网络安全攻击的方式 免费注册网站 2016年网络安全政策 网络安全问题产生原因 在网站中添加百度地图 网络安全技术人员工资 网络营销公司的排行榜 绵阳汽车网站制作 网站内页 汽车网站模板 深圳营销外包公司有哪些 外贸营销实战教程 外贸营销跟国内营销最大的不同之处是 2014春浙江大学计算机信息安全 网站字体怎么设置 全网营销推广 论坛发帖推广营销服务 网络安全防护2017 网站营销推广 网站与域名 边界网络安全 linux网络安全研究营销渠道都有哪些 网络安全攻击的方式 信息安全三级等级保护 深圳手机网站开发 重庆整合网络营销代理 网站建设 武汉 网络安全合规 单页的网站怎么做的 个人手机版网站建设 BBS营销 太原网络营销 优帮云 世界网络安全500强 网站质作 免费网站设计 公司网站的开发和网版的重要性 电信 网络安全 全网营销 执行系统 成功网络整合营销案例 信息安全技术 数据库管理 国家保密学院信息安全 普及化营销 是什么网络安全技术的基础 网络安全怎样辨别 系统性营销 广州网站建设公司 信息安全cip 网络营销的用户行为一个优秀的网站 网络安全是什么 个人网站企业网站 创建网站公司 徐州 中央信息安全管理中心,-1 个人网站企业网站 是什么网络安全技术的基础 信息安全风险评估作用 工控机 网络安全 自己建的网站打开的特别慢 南京网络安全类公司排名 广州网站维护 网络安全处置流程图 病毒营销的定义与特点是什么意思 提供佛山顺德网站设计 山石网科网络安全 无边界网络安全 湖南高端网站制 网络营销有什么性质 手机网站开发教程 哈工大网络安全响应组 科技与营销 免费注册网站 网站好坏 广州网站维护 互联网 与传统营销区别 工业信息安全专家 站外营销策划 信息安全服务管理规范 信息安全技术 数据库管理 网络安全是什么 网络安全的电影 烟台哪个公司做网站好 信息安全服务管理规范 网络安全立国 文昌网站建设 网络营销公司的排行榜 网络安全立国 北京邮电大学信息安全 网络营销工具的概念 深圳营销外包公司有哪些 网络安全工程师 培训 信息安全cip 专业的网络营销培训网络安全 图标 粉丝网站制作 信息安全讲师认证,-1 石家庄制作网站推广 移动监控 网络安全 外贸营销实战教程 外贸营销跟国内营销最大的不同之处是 长沙做网站建设的 棕色网站 网络营销的特点和功能 信息安全风险评估作用 邵阳网站优化 流行的网络安全软件 网络安全合规 无线网络安全 清华 展示网站方案 网络安全技术人员工资 清华 信息安全 网络安全的话 什么是计算机信息安全 如何建立网站 粉丝网站制作 网络安全态势感知 soc 网络安全的话 信息安全管理法,-1 无边界网络安全 个人手机版网站建设 浙江信息安全 清华 信息安全 公司网站的开发和网版的重要性 信息安全专业大学排名2017 网站营销推广 网络安全的电影 微博怎么做营销 个人网站企业网站 网关 网络安全防护手段 网络营销公司的排行榜 有国家认证的网络安全认证的 数据恢复公司 网络营销的定义概括zac 网站建设 武汉 网络安全信息安全实验室 哪里的佛山网站建设 求职网络营销公司 成都 网站建设 全网营销推广 信息安全集成服务 等级 深圳高端电商网站建设者 第三方平台的问答营销