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 as part of Bootstrap is a 940px-wide, 12-column grid.

It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.

<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

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="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">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>
Variable Default value Description
@gridColumns 12 Number of columns
@gridColumnWidth 60px Width of each column
@gridGutterWidth 20px Negative space between columns
@siteWidth Computed sum of all columns and gutters Counts number of columns and gutters to set width of the .container-fixed() mixin

Variables in LESS

Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.

How to customize

Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.

Staying responsive

Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.

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>

Responsive devices

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: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
// 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 hidding 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

Test case

Resize your browser or load on different devices to test the above clases.

Visible on...

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Hidden on...

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop
国网公司信息安全月,-1江西神州信息安全评估中心网络营销店铺推广问题建网站代理商怎样给网站增加栏目信息安全重大事件2017营销销售的区别是什么网络安全对抗和研究2017网络安全峰会视频网络营销 建站公司排名地图之外的高山等待着勇敢者的发现,传说在暴风与雷电盘踞的山巅,埋藏了古帝王用之不尽的的财宝。也有传闻......那处山顶,是囚禁了死神与亡灵的炼狱。2003年至今的真实娱乐圈大事“爽文演义”。 用半纪实的春秋笔法描绘作者一线文娱工作时的真实人生投影。 主角尚云从文娱江湖小虾米到顶级策划人的爽利不凡人生,秘辛频爆,异彩纷呈。 镁光灯下的娱乐圈, 上位者铭撰本纪,称王称霸; 高位者书写世家,纵横捭阖; 我们白手起家,努力靠双手奋斗出—— 属于自己的人间列传! ——娱乐圈之云上耕耘 纪实的手法记录生活,丰富的剧情白描梦想。 把人生写成一篇散文诗,近二十年的真实文娱经历,化作轻描淡写的一笔激情。 《娱乐圈之云上耕耘》上菜!  21世纪的是一个第一次接触魔兽争霸的业余玩家,变身绿皮兽人,掌控兽族大厅。   拥有精湛剑术的剑圣   深受萨尔信任强大的萨满祭司   战场上的他们英勇无畏,总是身先士卒,挥舞着战戟横扫敌军的牛头人酋长   行踪神秘、足智多谋的暗影猎手   何解以族长之名,踏上复兴兽族的征程一个大学生,一个热门游戏,一次偶然的机会,大学生穿越到了游戏里的世界,在这个熟悉又陌生的游戏世界里,他凭借着自己的智慧,一步一步的变强。而在一步一步的前进路上,却发现原来游戏的背后,竟然隐藏着一个惊天大秘密,而这个秘密跟某个神秘组织有关,是孤芳自赏还是挑战命运呢,男主角和他的伙伴们该何去何从,敬请期待。魂,乃人之始。 内魂,乃人之本。 一切以魂而生,一切以魂而死。 究竟是奋起直追,还是自甘堕落。 内魂,方可掌控乾坤! 浩瀚的宇宙里有众多的未知文明,人类踏入星空后究竟遭遇了什么?   外星文明也有好有坏。   真正的危险正在悄然靠近。   我叫纪凌我想去星空寻找答案,可现在我正在被狗追希望我能平安归来。 黑暗将至,我们能否用身躯与臂膀撑起微弱的薪火。无数的英雄埋骨,厚重的历史雪藏,一颗颗星辰腐朽,幸存的我们又能否看到明日的黎明。之前的我,现在的我们。 我们有着各自的过往,各自的黑暗——它们潜藏于普通人的光芒之下,在每个长夜之中折磨着我们的精神,企图让我们堕入地狱。 而现在,我们站在这里,共同面对此世真正的暗面。 这是人的世界,无数平凡的生命于此度过安然的一生。可在此世的阴影处,总有不甘的梦魇想要吞没凡人。 我们都曾经是人生的失败者,是这个世界并不出众的存在。 我们如今存在的意义,便是潜入此世的黑暗,护好早已不属于我们的人间的光芒。 人,有人的尊严与底蕴。无论何时何地,人都不会被打败。 我们,便是最后的证明。我,我们,都不会再孤身一人。 生存的本质,便是资源的争夺。 自神州初开,龙族、妖族、鬼族,无数的族群曾称霸神州。 沧海桑田无数的族群在时间长河中崛起又走向覆灭,而今日的神州,却由看似弱小的‘人族’占据主导地位。 百年巨变之后,‘星火’沉寂百年,今日妖族‘至高’再临,星火亦于孤寂中再次苏醒...... 陆觉民、陆光达、林焰,一个个传奇横空出世,乱世便是英雄的时代! 星星之火,可以燎原!人族不息,传承不断!这个世上有鬼吗? 真的有,而且有很多。 我叫徐艺,在我十八岁那年,我猛然发现了这个世界的真相。
借势营销案例 信息安全认证体系,-1 安询信息安全网络安全事件处理案例 网络营销店铺推广问题 南京网站关键词优化张店制作网站 医疗器械网站制作 河南信息安全公司排名 网络营销行业由来 天津交通信息安全网 信息安全专业认证证书 前世缘份的故事有哪些真实经历?咨询【www.richdady.cn】 长期失业对个人的影响【www.richdady.cn】 婴灵咨询【www.richdady.cn】 前世缘份咨询【www.richdady.cn】 冤亲债主的干扰与化解技巧咨询【www.richdady.cn】 冤亲债主干扰的心理影响【微:qq383550880 】√转ihbwel 事业不顺的职场建议咨询【微:qq383550880 】√转ihbwel 亲子关系的教育理念有哪些?【www.richdady.cn】√转ihbwel 冤亲债主的干扰解决方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 无形干扰的前世故事【www.richdady.cn】√转ihbwel 强迫症咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 大龄剩女的情感困扰【www.richdady.cn】√转ihbwel 去世的母亲的前世缘分咨询【www.richdady.cn】√转ihbwel 解梦的方法与技巧咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 家庭关系的和谐之道咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 精神不振的生活习惯【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 强迫症的环境影响【企鹅383550880】√转ihbwel 与女友前世的咨询技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世缘份的常见类型【企鹅383550880】√转ihbwel 去世的父亲的前世因果【σσЗ8З55О88О√转ihbwel 北京高级网站建设 沈阳科技网站建设 通信网络安全专业委员会 信息安全治理成熟度模型 手机网络营销普遍问题 鸟哥的linux私房菜 认识网络安全 网络安全教程2015 网络信息安全理论与技术 信息安全竞赛干什么 信息安全行业新技术 信息安全专业认证证书 信息安全风险评估 微网站费用 西宁网站建设 任丘网站优化 海底捞服务营销数据 外贸网络营销书籍推荐 信息安全专业认证证书 体验营销案例 目前个人网民的网络安全状况(结合2013年统计报告说明) 目前个人网民的网络安全状况(结合2013年统计报告说明) 商务网站建设 北京网站制作排名 网络信息安全理论与技术 医疗器械网站制作 2017网络安全峰会视频 2015工控网络安全态势报告 国家网络安全月 如何做一个网站 网络营销 建站公司排名 网络整合营销网络广告 中国信息产业商会信息安全产业分会 国网公司信息安全月,-1 杭州培训网站建设 信息安全重大事件2017 网络安全 领导小组 微信营销总结主题 番禺网站建设怎么样 全景网络安全 饮料创意营销策略 国防科技大学信息安全 搜索引擎营销手法 信息安全行业新技术 微网站费用 成都网站设计公司价格 2017网络安全峰会视频 武汉微信营销公司 国防科技大学信息安全 总参网络安全防护中心 临沂网站设计 2015年信息安全报告制度 2012 西电电子竞赛信息安全邀请赛西电 个人个案网站 类型 网站图片尺寸 局域网的网络安全 苏州企业网站建 信息安全竞赛干什么 广州网站优化 成都活动网络营销 北京高级网站建设 成都网站建设冠辰 深信服 国家信息安全测评信息安全服务资质 安全工程 亚马逊营销 信息安全员三级 阿里云 信息安全 网络安全教程2015 内网信息安全解决方案,-1 税务系统信息安全基本要求 网站样式 浙江省网络安全评测中心 饮料创意营销策略 网络安全思维导图 信息安全评估级别表 网站设计的简称 装饰网站建设 伊朗 网络安全 网络信息安全难学吗 怎么学网络营销整合 网络营销店铺推广问题 信息安全评估级别表 借势营销案例 系统信息安全等级 搜索引擎营销手法 石家庄营销型网站建设公司 南昌市做网站的公司 企业信息安全建议 外贸网络营销书籍推荐 网络安全产品排名中科新业 营销销售的区别是什么 单位网络安全宣传培训情况 江阴网站建设 网络安全大会 公司信息安全管理 上海网站改版哪家好 西宁网站建设 体验营销案例 企业网站管理系统 任丘网站优化 网站与维护 成都网站建设冠辰 网络安全迫与破 微贷营销案例 网络安全思维导图 在线网站建设 网络营销推广工具和方法 当受到网络安全投诉时 郑州做手机网站 西安网络营销资讯 鸟哥的linux私房菜 认识网络安全 天津电商网站制作 绵阳做手机网站 网络营销推广工具和方法 网站建设售前说明书 深圳网站设计工作室 信息安全 实践 信息安全 实践 信息安全资源 亚马逊营销 天津电商网站制作 目前个人网民的网络安全状况(结合2013年统计报告说明) 商务网站建设 全景网络安全 衡水网站建设供应商 海底捞服务营销数据 信息安全认证体系,-1 微网站建设 2013中国网络安全大会 光谷做网站 flash网站网站功能及报价 郑州做手机网站 网络信息安全测评机构 临沂网站设计 信息安全风险评估 石家庄营销型网站建设公司 在线网站建设