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
信息网络安全学院网络安全工具网络安全宣传周总结报告flash网站制作营销策划或推广网站推广策略学校网站设计网站推广策略怎么设置网站栏目佛山外贸网站建设平台我本无欲无求,只因吾儿战死沙场,王国危在旦夕,便邀请老友一同出山庇佑林华被车撞无意穿越异界,拥有系统,唯有修仙才能重回地球,带着对世俗的愤怒仇恨,想要改变一切,最后发现自己只是一切的其中之一,谢谢大家观看,第一次写,望大家喜欢本出生自皇族的唐天皇,却有家难回,名有着强大的血脉,却要隐藏于世……这是讲述精灵王东东与混沌魔君索伦森之间的关系,以及关于其他精灵王的故事深居野林神秘老道,一手培养出七位足矣撼动华夏的绝美女徒弟。今日,又一名最小男徒儿罗峰顺利出山。 罗峰:“我是老逼灯培养出最垃圾的徒弟,没什么本事,就想吃吃软饭,苟且度过这一生。” 师父:“什么,他说他最弱?难道我没有告诉过你们,那小子身怀诡秘?” 师姐:“我好像发现我们的小师弟越来越不对劲儿了,为什么世界各大强者都来跪舔他?” 一位来自于世界黑暗深处的顶级势力后裔之子,出生便被抛弃做弃子,偶遇华夏旧时代战力天花板老疯子和七位倾城倾国的大背景七位师姐,从此掌握七大绝学误入都市豪门,卷动江湖风云,走上自证强者之路。有少年和尚,喝酒吃肉,醉卧美人膝,由魔入佛…… 有少年道士,一只青驴、一名女鬼相伴,朝着道祖行进…… 有少年儒生,提笔写下传世之作,誓要做天下万灵的夫子…… …… 有人问少年:“你是谁?!” 白衣少年摸了一下腰间钝剑,仰头喝了口酒,咧嘴一笑:“吾名叶天,叶子的叶,天帝的天,来自秦国荒城,是一个天才丹师,更是一个天才修炼者……” 王权一个大四学生,在一道惊雷中,被冥冥中的另一个自己所救。 世界灾变,当他再次醒来,这个世界还是他原来认识的时间吗? 王权遇上东方霸业,我们一起搞点事情,创建东方王权霸业。 一方发展现代科技的世界,一方融五行能量入体的世界,一方修炼灵魂功法的世界,三方世界的主宰都想成就不朽。 最后王权告诉他们,你们所成就的不朽乃伪不朽。 修炼《九转五行轮回诀》的王权能正真成就不朽吗? 轮回九转,九转归一。一即九转,九转轮回。 得始而终,轮回不现。再现轮回,生死之间。 得死而生,轮回再显。一个顶尖的剑客,为情遭人陷害,武功禁失,力经千难万险,恢复自己的功夫。 一个失了忆的刀客,初入江湖,想找回记忆,可是江湖险恶让想找回失忆的刀客受尽艰辛苦难。 这样奇葩的一刀一剑相遇了,他们会在江湖中刀歌剑舞着自己的故事城市需要光,有光的地方就有影,我是狼养长大的, 神创造了世界,于是有了万物,后创造了万物之灵,人。 不知从何时起,神明消失,大地出现鬼怪的身影,以人为食,且没有天敌的鬼自此势力日渐壮大,自此世间魔影纵横,怨灵交错,生灵涂炭。 在与鬼怪的战斗中,他们的体内拥有神创造人时留下的一丝神性,借此窥得天机,修得包罗万象的魂和神秘莫测的咒语,驱邪除魔、斩妖灭怪,他们自称阴阳师。 此后,鬼怪回到鬼界,阴阳师居于阴阳界,世界的秩序得以平衡。 千年后,阴阳界现任四位府主反叛,夺走可以压制鬼怪力量的《百鬼夜行》。为了拿回这本书,阴阳师踏上鬼界……
大学生网络安全实例 个人手机版网站建设 选择信息安全控制措施应该 个人手机版网站建设 上海营销外包公司排名 脑白金的营销理念 怎么用域名建网站 营销型网站 公司网站现状 山东网络安全大赛 心慌胸闷头晕的医学检查【www.richdady.cn】 家庭关系咨询【www.richdady.cn】 无形干扰咨询【www.richdady.cn】 纠纷的心理调适【www.richdady.cn】 前世缘份的前世案例【www.richdady.cn】 改善亲子关系的技巧【www.richdady.cn】√转ihbwel 长期失业对个人的影响威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 头脑混沌的原因分析【σσЗ8З55О88О√转ihbwel 家庭关系的教育建议威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世今生的轮回存在吗?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 性压抑的情感释放咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 与男友前世的前世案例咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的前世案例【www.richdady.cn】√转ihbwel 发育倒退对孩子心理的影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 亲子关系的案例分享咨询【微:qq383550880 】√转ihbwel 老公家暴的咨询技巧咨询【σσЗ8З55О88О√转ihbwel 升迁障碍的案例分享【微:qq383550880 】√转ihbwel 外灵干扰的解决方法【微:qq383550880 】√转ihbwel 去世的母亲的前世修行咨询【企鹅383550880】√转ihbwel 长期耳鸣可能是哪些疾病的信号【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 怎么用域名建网站 网站制作性价比哪家好 手机营销有哪些方式 创新的南昌网站设计 微博进行营销的好处 信息安全 数据分类 网站规划分析的好处 网络营销的初级职能是 清华 信息安全 微博大v的营销公司 信息网络安全学院 免费建设网站平台 网站培训班 南宁网站公司 互联网营销前景 苏州网站制作设计 flash网站制作 中企动力官网网站 常用微信营销方式 建网站代码 三元软营销 2017网络安全年会合肥定西网站建设 网站培训班 团购网营销 sem搜索引擎营销概论 脑白金的营销理念 烟台软件优化网站 上海培训网络营销 金融网站开发 网站的主题 网络安全宣传周总结报告 温州网站优化 网络营销传播实战策略 网络安全周报 cdn网络安全加固培训 延安网站建设公司电话 网站推广策略 自己建的网站打开的特别慢 会员式营销案例 flash网站制作 网站设计公司 无锡 信息安全专业实验室 手机营销有哪些方式 株洲做网站多少钱 长沙微信营销交流 网站的主题 落地页网站 山东网络安全大赛 企业网站策划书 山西网络营销推广 校园网站设计 杭州网站设计公司有哪些 手机营销有哪些方式 长沙营销型网站设计 清华 信息安全 微博进行营销的好处 青海做网站公司 上海网站开发 网站规划分析的好处 网络营销中广告的策略 网络营销推广前景 清华 信息安全 三元软营销 网络和信息安全解决方案,-1 信息网络安全学院 网络安全研究趋势 青岛网站建设迅优 网站培训班 上海做网站 幼儿园网站设计 互联网营销前景 外贸网站建设 如何做 技术安全是网络安全 flash网站制作 网络安全应急响应时间 微网站搭建平台 常用微信营销方式 整合营销推广 合肥网络营销外包公司 三元软营销 网络信息安全法律法规 微网站开发 网站培训班 青岛商业网站建设 微网站搭建平台 sem搜索引擎营销概论 网络安全企业50强2017 关系营销的劣势 烟台软件优化网站 大连网络安全服务平台怎么走 网络安全加密算法 金融网站开发 网络营销信息源有 网络营销推广前景 网站改版升级总结 思科无线网络安全 临沂网站 网站建设服务商 最新网站建设语言 网站的域名 温州网站优化 广告公司 整合营销 营销供方 数字营销知识 广州网站维护 网站的建设 郑州网站建站 杭州网站建设开发 十堰网站建设 什么是搜索营销?搜索营销sem主要有网页优化seo和竞价ppc 网站乱码 网站改版升级总结 cdn网络安全加固培训 2g网络安全 网站的域名 行业网络营销分析 杭州网站建设开发 延安网站建设公司电话 成都大牌广告网络营销 信息安全知识竞赛 成都 网站建设网络营销推广公司 网络安全服务. 网站推广策略 大学生网络安全实例 成都网站创建 成都大牌广告网络营销 自己建的网站打开的特别慢 免费注册网站 关系营销的劣势 中国网络安全归谁管理 贵港网站建设 会员式营销案例 石家庄互联网营销 搜索引擎营销的定义 营销型网站特点 服务器 信息安全性 flash网站制作 四视图网站 怎么用域名建网站 郑州微网站建设 上海营销外包公司排名 超炫的网站 手机营销软文经典案例 自己建的网站打开的特别慢 国内十大信息安全事件 信息安全专业实验室 会员式营销案例 佛山外贸网站建设平台 延安网站建设公司电话 手机营销有哪些方式 长沙微信营销交流 信息网络安全学院 网络安全工具 株洲做网站多少钱 网络营销网站规划建设 郑州网站建站 网站制作 常见问题 长沙微信营销交流 广告公司 整合营销 网络营销的优点和缺点 信息安全知识竞赛 网站的主题 广东手机网站建设报价 十堰网站建设 教育网站设计 落地页网站 台州网站建设公司 全国网络安全等级保护测评机构推荐目录网络信息安全教育课件,-1 信息产业信息安全测评中心 广州网站维护 微网站开发 建网站代码 什么是信息安全服务 企业网站策划书 共享网络安全成都的信息安全公司 网站制作性价比哪家好 青岛外贸网站建站公司 怎么用域名建网站 校园网站设计 杭州网站设计公司有哪些 手机营销有哪些方式 长沙营销型网站设计 清华 信息安全 微博进行营销的好处 青海做网站公司 上海网站开发 网站规划分析的好处 网络营销中广告的策略 网络营销推广前景 清华 信息安全 三元软营销 网络和信息安全解决方案,-1 信息网络安全学院 网络安全研究趋势 青岛网站建设迅优 网站培训班 上海做网站 幼儿园网站设计 互联网营销前景 外贸网站建设 如何做 技术安全是网络安全 flash网站制作 网络安全应急响应时间 微网站搭建平台 常用微信营销方式 整合营销推广 合肥网络营销外包公司 三元软营销 网络信息安全法律法规 微网站开发 网站培训班 青岛商业网站建设 微网站搭建平台 sem搜索引擎营销概论 网络安全企业50强2017 成都公司建网站 合肥网络营销外包公司 网络安全应急响应时间 脑白金的营销理念 行业网络营销分析 网络安全面临的威胁主要有哪些 网络安全宣传周总结报告 建网站代码 网站怎么维护 达内培训 微络营销深圳 网站导航营销的优势 免费建设网站平台 论坛营销的思路 山东网络安全大赛 怎样创建旅游网站 网站制作公司咨询热线 免费注册网站 长沙网站空间 网络安全工具 中国网络安全归谁管理 微网站开发 广东手机网站建设报价 行业网络营销分析 上海做网站 手机营销有哪些方式 营销供方 微博进行营销的好处 flash网站制作 公司网站现状 金融网站开发 大学生网络安全实例 常用微信营销方式 长沙微信营销交流 网站乱码 网络和信息安全解决方案,-1 国内十大信息安全事件 网站建设服务商 校园网站设计 常用微信营销方式 长沙营销型网站设计 南通哪里有做网站的 成都大牌广告网络营销 外贸网站建设 如何做 网络安全工具 贵港网站建设 免费建设网站平台 郑州微网站建设 网络营销信息源有 企业网站策划书 自己建的网站打开的特别慢 青海做网站公司 信息安全知识竞赛 网络安全应急响应时间 青岛网站建设迅优 佛山外贸网站建设平台 温州网站优化 长沙营销型网站设计 营销型网站特点 关系营销的劣势 网站的建设 网络安全服务. 大学生网络安全实例 郑州网站建站 十堰网站建设 清华 信息安全 手机营销软文经典案例 思科无线网络安全 青岛外贸网站建站公司 中国网络安全归谁管理 网站培训班 十堰网站建设 网络安全认证机构 幼儿园网站设计 长沙微信营销交流 信息安全方面的软件 青海做网站公司 广东手机网站建设报价 网络安全加密算法 建网站代码 成都网站创建 整合营销推广 网站维护 网站改版升级总结 网络安全研究趋势 信息安全专业实验室 留住用户网站 杭州网站设计公司有哪些 石家庄互联网营销 上海培训网络营销 网络营销的优点和缺点 论坛营销的思路 什么是信息安全服务 山东网络安全大赛 成都好网站 网站制作教程 网络安全周报 网站的主题 互联网营销可以做什么 网络信息安全法律法规 问答营销的平台选择题 网站个性化定制服务 选择信息安全控制措施应该 网络安全认证机构 苏州网站制作设计 南宁网站公司 优秀企业网站 郑州微网站建设 山东网络安全大赛 什么是搜索营销?搜索营销sem主要有网页优化seo和竞价ppc 网站个性化定制服务 网站制作公司咨询热线 李强 网络安全审查 营销策划或推广 留住用户网站 唯品会营销理念 2017网络安全年会合肥定西网站建设 网络安全宣传周总结报告 网监部门信息安全,-1 李强 网络安全审查 南宁网站制作 免费建设网站平台 上海营销外包公司排名 信息安全 数据分类 东软网络安全产品 成都公司建网站 信息安全方面的软件 合肥网络营销外包公司 国内十大信息安全事件 网络安全研究趋势 公司网站现状 校园网站设计 微网站搭建平台 教育网站设计 清华 信息安全 数字营销知识