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
ps联盟网站中国安全网络安全网络安全大学长沙网站推广软件网络安全认证证书网络安全目的多语言外贸网站设计招商网站建设西安论坛网站制作维护社会化 口碑营销 公司万丈高楼平地起,辉煌只能靠自己! 社会很单纯,复杂的是人! 穿越后的秦凌云只想做个躺平的富二代,赚点小钱,过过以前没过过的生活! 结果被迫营业,一不小心被皇帝弄进朝堂,混成了前世的打工仔模样! 不一样的穿越之旅,一样的家国情怀。世界变了模样,我既然有了这样的能力,那就让我试试吧......三千宇宙,洪荒天界,为何诸圣不显,道祖陨落? 无边混沌,万古长存,是否只有盘古洪荒? 后世无数纪元的消逝,是否只因无限复活的诡异之地始祖? 巫妖之祸后人族崛起,然而一切只是开始!天界沦陷,万界浮沉。 宇宙一隅的一介凡人偶然踏入仙道,继而名震寰宇,飞升天界,揭开那最初的劫难,后世末法的真相,诡异的起源,青铜古棺的来历...... 为了逃婚,他随便找了个美女合租,不料她竟是自己未见过面的未婚妻。 为了赚钱,他信手炼制了几枚丹药,不料竟做成了天下第一的医药公司。 为了修行,他顺手收了几个女徒弟,不料她们竟都有着惊世骇俗的身份。 为了救人,他甘愿自废一生之修为,不料所救之人竟是艳绝天下的女帝。 为了复仇,他勤修苦练至大功告成,不料最大的魔头之主竟是……当下有些人已经习惯了这种生活,就像现在的陈默,虽然他并不属于这里。陈默穿越到了小说的世界,是一部非常热血的英雄传记类型的小说 这部小说名叫《暗影与曙光》,讲述的是一个被称为“暗夜之王”的男孩的一生,他是这座城市最强势的黑帮头目手下,也杀死过许多罪犯,是一个令人闻风丧胆的刽子手,他的名字则叫做—— 暗影·阿尔法! 原本按照漫画的发展,阿尔法会继续杀戮,直到被人制裁,但因为陈默的介入,这个男人的未来轨迹产生了变化。 阿尔法在几年前被仇人绑架,被迫参加了一次恐怖袭击,从此进入了逃亡状态,最终逃离了那座都市。 这段剧情是这本小说最大的亮点,同时也是主角的悲催之处,阿尔法身上背负着太多秘密,而且随着逃跑路程的增长,阿尔法的秘密会逐渐暴露,甚至最后会引来杀身之祸........叶尘从小就是孤儿,大学刚毕业没多久,一次意外遭遇车祸,觉醒系统从此扭转人生,手握亿万财富,开启一段不一样的人生。 你听说过多重人格么?你体会过么?别急,静下心来,让我们一起走进这隐秘的世界。嘘~,小心,别被“它”发现了。人,生如夏花,死归浮尘,当深渊降临,我凝望深渊,只为长生!隔壁星球突然被点燃,自己的星球又被彻底隔绝联络,到底发生了什么事?我们该如何抉择?文明的归途到底在何方? 生存在茫茫浩宇之中,生命存续的意义何在?也许你能从本书中找到答案。寂静中复苏,黑暗中永恒。 一念神魔的大地迎来万族的降临和灾难。 群雄割据,万族林立,世界戴上枷锁。 人族陷入灭亡的危机! 一名少年从虚无中走出注视着这一切,迎着曙光而来:“我为人族开新世!”
2014年信息安全立法 微信网站 影楼 3合一网站 企业网络安全策略遵循 合肥全网营销系统 中国安全网络安全 青岛营销 咸宁商城网站建设 软件网络安全认证证书 学校网络安全使用 前世今生的故事如何影响现代生活?咨询【www.richdady.cn】 忧郁症的前世记忆咨询【www.richdady.cn】 什么原因意外的前世案例【www.richdady.cn】 学习成绩差的前世因果咨询【www.richdady.cn】 莫名其妙感伤的心理调适【www.richdady.cn】 阴间生活的前世故事【www.richdady.cn】√转ihbwel 与老公前世的记忆解析咨询【企鹅383550880】√转ihbwel 与女友前世的前世解析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 耳鸣的环境影响咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 失业的咨询技巧【σσЗ8З55О88О√转ihbwel 婴灵的安抚与超度【σσЗ8З55О88О√转ihbwel 暗恋的情感释放咨询【微:qq383550880 】√转ihbwel 莫名其妙感伤的自我提升【企鹅383550880】√转ihbwel 纠纷的解决方法咨询【微:qq383550880 】√转ihbwel 感情纠纷的情感疏导技巧有哪些?咨询【微:qq383550880 】√转ihbwel 前世今生的缘分如何解读?咨询【www.richdady.cn】√转ihbwel 精神不振咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何克服升迁障碍?咨询【σσЗ8З55О88О√转ihbwel 婴灵的安抚有哪些技巧?咨询【σσЗ8З55О88О√转ihbwel 灵魂种子治疗【www.richdady.cn】√转ihbwel 小米手机网络营销预算 重庆专业网站建设费用 网络安全soc 网站推广文章 企业网络营销总裁培训 建网站空间 中型网站 网络营销站点域名采用"企业网站域名/产品名或营销页面名"的形式属于 模板网站的好处 佛山购物网站建设 网络营销工具种类 2014年信息安全立法 西安网站设计公司 审计网络安全 诺顿网络安全调查报告 信息安全等级测评目录 网络营销市场定位策略 病毒是营销 学校网络安全使用 南昌建网站单位 网络安全备案 网络营销的十种方式 .信息安全测评机构的资质认定 网站分辨率 成都网络营销高手 长沙市网站制作 网站定制 点内营销 网络营销工具种类 网站推广文章 网络营销在线讨论法 网站中如何嵌入支付宝 全网霸屏营销系统 网络安全web安全 破坏公共信息安全 网站微博营销哪个好用吗 腾讯 网络安全 制作网站备案幕布 数字营销哪儿有 公司网站开发公司 破解"工业控制系统信息安全"迷 福州网站建设服务 网络安全大学 重庆专业网站建设费用 邯山网站制作 上海信息安全管理中心地址,-1 虹口做网站价格信息安全服务资质怎么查询 网络安全服务标准方案 网络安全soc 西安网站设计公司 上海定制网站建设公司哪家好 网站推广文章 暖色调网站 景安网站 网络营销在线讨论法 淘宝常见营销手段 国家建立网络安全监测预警和网络营销活动策划案例 手机营销的方式有哪些 互联网事件营销ppt 建网站空间 信息安全控制程序 深圳网站外包 2016工业控制网络安全态势报告 中型网站 河南信息安全有限公司 网络营销案例介绍 网络安全web安全 网络公司 开发网站 重庆专业网站建设费用 苏州企业网站建 淘宝常见营销手段 信息安全等级保护制度是国家网站有什么作用 中型网站 门厂家网站建设 建网站主机 佛山购物网站建设 网络营销微观环境包括! 招商网站建设 国家信息安全报告 北京网站制作排名 网络安全系统建设 爱民网站制作 2014年信息安全立法 信息安全控制程序 中国网络安全行业 网络安全国家标准 网站设计师 网站运营公司 微信网站 影楼 网络安全服务标准方案 信息安全培训小游戏,-1 微博营销的事件 营销机构号 娄底网站建设 网络信息安全软件 韩雪冬网站 企业网络营销总裁培训 信息安全培训小游戏,-1 网站建设与应用 网络营销工程师报考 中国安全网络安全 公司网络安全没通过 招商网站建设 网络安全大学 西安网站优化 .信息安全测评机构的资质认定 网络营销微观环境包括! 金盾信息安全技术有限公司 邮件营销反馈率福州网站制作好的企业 春秋网络安全官网 社会化 口碑营销 公司 长沙高端网站建设服务 推广型网站 网络营销市场定位策略 手机营销的方式有哪些 营销机构号 网络营销在线讨论法 网络安全soc 制作网站备案幕布 酒店网络安全审计 网络安全服务标准方案 网络营销工具种类 病毒是营销 焦作做网站 郑州建网站公司_河南建网站_郑州建网站_建企业网站-郑州建站网 工业信息安全通报 全网霸屏营销系统 国家信息安全报告 珠海网站推广 营销公司网站模板 网络安全硬件平台厂商 合肥全网营销系统 关键信息基础设施网络安全状况分析报告 关键信息基础设施网络安全状况分析报告 网络安全日志分析报告 2014年信息安全立法 破坏公共信息安全 网站中如何嵌入支付宝 成都网络营销高手 互联网事件营销ppt 咸宁商城网站建设 破解"工业控制系统信息安全"迷 网站设计流程 上海信息安全管理中心地址,-1 网站制作的趋势 医疗服务营销策划 腾讯 网络安全 网络安全硬件平台厂商 国家信息安全小组组长 供应商营销 APp 信息安全 微信营销含义 贵州省网络与信息安全测评认证中心招聘 成都网站编辑 3合一网站 虹口做网站价格信息安全服务资质怎么查询 数字营销哪儿有 网站微博营销哪个好用吗 西安制作网站的公司有 社会化 口碑营销 公司 幼儿园网站建设方案结语 3合一网站 网络安全优秀教师奖营销的宣传语 西安网站设计公司 营销品牌 舆情 营销品牌 舆情 破解"工业控制系统信息安全"迷 推广型网站 网站空间租 江阴网站建设 福州网站建设服务 北京邮电大学信息安全中心 春秋网络安全官网 模板网站的好处 网络安全国家标准 四川网站制作哪家好 网络安全大学 网站定制 网站建设营销排名方案 网络安全优秀教师奖营销的宣传语 长沙网站推广 石家庄网站建设公司 泉州网站制作 门厂家网站建设 成都网站编辑 微信网站 影楼 邯山网站制作 中国安全网络安全 未公开接口 网络安全 网络营销站点域名采用"企业网站域名/产品名或营销页面名"的形式属于 网站有后台更新不了 网站设计流程 2014网络安全 邯山网站制作 深圳企业网站建设公司排名 广州外贸营销型网站建设公司 虹口做网站价格信息安全服务资质怎么查询 重庆专业网站建设费用 模板网站的好处 网站制作的趋势 建网站主机 网络安全监管机构是: 多语言外贸网站设计 全网营销网 中络信息安全有限公司,-1 咸宁商城网站建设 山西省网络安全评测中心 seo的网站建设 网络安全局 西安论坛网站制作维护 微博营销效果体现 汕头网站设计公司 网络营销案例介绍 互联网事件营销ppt 营销机构号 南昌建网站单位 南宁做网站找哪家公司 苏州企业网站建 厦门网站制作品牌 网络营销市场定位策略 德国网络安全法 ps联盟网站 建网站空间 暖色调网站 网络安全日志分析报告 厦门网站制作品牌 网站空间租 网络营销工具种类 爱民网站制作 多语言外贸网站设计 南京设计网站 深圳网站外包 景安网站 韩雪冬网站 网络安全大学 第4课 网络安全 网络营销理论知识 网站线框 企业网络安全策略遵循 重庆专业网站建设费用 工业信息安全通报 网络安全备案 网络安全 努力破除 德国网络安全法 信息安全培训小游戏,-1 审计网络安全 郑州建网站公司_河南建网站_郑州建网站_建企业网站-郑州建站网 长沙市网站制作 苏州企业网站建 2016工业控制网络安全态势报告 信息安全等级保护作用 医疗服务营销策划 互联网营销案例 网站推广软文 网络安全相关高校 网站分辨率 掌握营销app 酒店网络安全审计 中型网站 国家建立网络安全监测预警和网络营销活动策划案例 网络安全系统建设 当前中国网络安全 公司网站开发公司 网站推广文章 asp.net网站设计 国家信息安全报告 工具营销 linux 网络安全配置 手机营销的方式有哪些 上海定制网站建设公司哪家好 点内营销 台州网站设计外包 浅论网络营销 青岛营销 北京网站制作排名 中型网站 病毒是营销 佛山购物网站建设 网站推广文章 软件网络安全认证证书 台州网站设计外包 网络信息安全软件 微信营销含义 网站定制 网络安全监管机构是: 网络安全web安全 网络营销的十种方式 企业网络安全策略遵循 微博营销的事件 微信营销含义 诺顿网络安全调查报告 营销要素是指 网络安全法最新 网络安全法最新 网络公司 开发网站 工业信息安全通报 网络安全soc 社会化 口碑营销 公司 推广型网站 网站推广软文 腾讯 网络安全 网络营销理论知识 网络安全局 关键信息基础设施网络安全状况分析报告 网络营销站点域名采用"企业网站域名/产品名或营销页面名"的形式属于 泉州网站制作 长沙高端网站建设服务 西安网站优化 3合一网站 3合一网站 未公开接口 网络安全 企业网站管理系统 关键信息基础设施网络安全状况分析报告 全网霸屏营销系统 门厂家网站建设 网络安全教程 百度云盘 .信息安全测评机构的资质认定 网站建设与应用 虹口做网站价格信息安全服务资质怎么查询 国家信息安全小组组长 汕头网站设计公司 模板网站的好处 山西省网络安全评测中心 佛山购物网站建设 公司网站开发公司 福州网站建设服务 网络营销工程师报考 营销机构号 信息安全等级保护制度是国家网站有什么作用 网站设计流程 网站制作的趋势 2014网络安全 网站建设营销排名方案 网站分辨率 北京邮电大学信息安全中心 焦作做网站 娄底网站建设 网站设计师 上海信息安全管理中心地址,-1 破坏公共信息安全 邯山网站制作 邯山网站制作 网站建设与应用 邮件营销反馈率福州网站制作好的企业 营销品牌 舆情 西安制作网站的公司有 网站运营公司 2014年信息安全立法 网站中如何嵌入支付宝 网络安全硬件平台厂商