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
威海网站推广政府网络安全工作方案中国信息安全学会 公安成都高新区 信息安全商城建网站国家网络安全举报中心医院互联网营销案例动易做网站联想网络营销案例分析东莞长安网络营销招聘大学网络安全先学什么意思一位天才少年,因为一次特殊的案件,他的一翻话给了刑侦队长一个方向。他的每次分析总是雪中送炭。东方曜穿越洪荒,投靠刚建立不久的天庭,成为一名扫地仙。 同时获得签到系统,只要在不同的地方打卡,就可以拿到系统奖励。 “叮!恭喜宿主遣云宫打卡成功!” “获得大道玉佩!” “叮!毗沙宫打卡成功,获得【八九玄功】。” “叮!五明宫打卡成功,获得圣龙仙丹!” “叮!兜率宫打卡成功,获得先天灵果一枚。” …… 就这样,东方曜在众仙无视中在天庭签到了几百年。 直到有一天,下界妖族举兵来袭,天庭无人能敌。 他们一路杀到了凌霄宝殿,遇到了正在扫地的东方曜……研究生毕业孙淼回家种田,他家的猫咪会 说话,乌龟会爬树,鹦鹉会唱歌,带你见识一个从小山村走向巅峰的人生。林尘做梦也没想到,给自己戴绿帽的女人不仅百般羞辱他,甚至还要抢夺他女儿的心脏! 对爱情彻底失望的他,更没想到,这世界上还会有这样一个女孩,愿意为他付出一切! 在那重重包围中,他鲜血淋漓。 我今天就要带走她,我看谁敢拦我!本书又名【大明:我人皇的身份被女帝曝光】。 绝世凶人朱厌,穿越到历史爽文《大明劫》中,成为存在感微弱的配角。 他本想安稳度日,跟着书中主角团队吃香的喝辣的,结果被迫绑定系统,拯救濒临毁灭的大明皇朝。 狗作者……你干得是人事儿吗?挖坑不填我就不说了,居然还太监? 现在轮到这些坑都要我解决……你妹!!! 懒得介绍一户人家二百年的风风雨雨“你说,这个世界上,真的有魔鬼吗?” “当然,你不就是?” “杀人偿命,天经地义啊。” 一场车祸,意外重生于另一个平行世界,林溪开始了他的另一段异世之旅。同曾经好像没有什么不同,又好像完全不一样,未知便是真理,得见便会有大恐怖。鬼神…,人…,御魔师…,灵能者…,通灵者。命运之深海,不可言,不可名,不可知。开悟,得见,通漩,明心,不惑,真相…大恐怖。恶魔的呢喃,盛宴…人……&amp;#039;好慢啊。。。又要开始沉睡了。,楚青适应了这个末日,但是他不可能苟活。 崩丧尸,捕异兽,阎罗殿里走三走, 上过天,下过海,还和霸主打过架。
威海网站推广 共建网络安全 共享网络文明 信息安全服务风险评估资质证书 sms营销 微博口碑营销案例 在网络安全等级保护制度中 信息安全指数分级 整体营销的含义 计算机网络信息安全 网络营销策划术语 赤峰网站建设 中国信息安全学会 公安 网际天娇信息安全技术服务 网络安全top10 医院互联网营销案例 信息安全产品证书号查询 信息安全咨询师 中国信息安全学会 公安 浙江营销策划 小程序在建网站吗? 福州专业网站建设 深圳市信息安全测评中心地址 信息安全技术大纲 移动营销的形式包括 信息安全咨询师 大专网络营销教材 信息安全与网络安全 上海柯力士信息安全技术有限公司 天门网站建设 中国网络安全领袖 浦东新区专业网站建设 信息安全风险管理办法 网络营销方案主要内容 信息安全等级保护技术标准体系 国际信息安全专家,-1 网站支付接口 当今的网络安全有四个主要特点 中国网络安全交流中心 简单建网站 信息安全违规 认识搜索引擎营销 黑客攻击信息安全事件 通过对搜索结果的对比分析行业网络营销竞争状况及用户检索行为 认识搜索引擎营销 信息安全专业大学学费 动易做网站 旁路控制 信息安全 联想网络营销案例分析 网络安全的特点有哪些 信息安全 身份认证技术 网络安全高手 第五届网络安全大会 网站页面组成 郑州网站推广流程 sms营销 实战全网营销培训 网络安全能力认证考试 衣柜营销策划方案 网络营销服务专家 2016北京网络安全日 顶级信息安全厂商 网络安全课程app 信息安全等级保护技术标准体系 网络安全堪忧 大良营销网站建设价格cncert/ cc 2012年中国互联网网络安全报告 密码与信息安全学报 网络营销的优点 营销的发展 页面设计漂亮的网站 公司在保护公司信息安全 大学网络安全先学什么意思 龙岗网站制作效果 全网络营销 哈尔滨网络科技公司做网站 网站免费建站系统 信息安全与网络安全 rce信息安全 网络安全关注的问题有哪些方面 威海网站推广 计算机网络信息安全 网络安全堪忧 新媒体营销的成功案例信息安全是指 新媒体营销的成功案例信息安全是指 页面设计漂亮的网站 信息安全服务风险评估资质证书 rce信息安全 信息安全攻防技术 中国网络安全基地 在网络安全等级保护制度中 企业网站备案策划 html5网站 微博营销是一项系统工程微博营销的操作模式包含以下哪些 在线营销工具包 信息安全指数分级 网络安全课程app 大良网站公司 南山区网站建设公司 青岛信息安全保密大会 东莞长安网络营销招聘 石家庄网站建站推广 网络营销课 破解网络安全密匙 东营网站优化 美国信息安全15万美元 网络安全技术内幕 网络营销的方式 营销部门简介 整体营销的含义 军工行业信息安全厂商要具备 佛山网络营销 优帮云 网络安全编程 python 信息网络安全检查 大良网站公司 武威网站建设 南通网站建设空间 网络营销课 实战全网营销培训 军工行业信息安全厂商要具备 网络安全的最新技术 网站信息安全监控方案 网络营销可以自学吗 seo网络营销 优帮云 福州专业网站建设 网络安全技术与应用 官网 企业信息安全组织架构 广州广告网络营销公司排名 网站信息安全监控方案 大学网络安全先学什么意思 2013网络安全博览会 在网络安全等级保护制度中 网络营销推广哪家好 网络营销策划术语 网络安全能力认证考试 信息安全的保护对象,-1 中国网络安全有限公司 口碑营销的视频 响应式网站工具 网站支付接口 哈尔滨网络科技公司做网站 深圳市信息安全测评中心地址 联想网络营销案例分析 信息安全技术大纲 移动营销的形式包括 宝安做网站 网站的营销与推广方案 大专网络营销教材 整体营销的含义 厦门网站建设公司 上海柯力士信息安全技术有限公司 温州网站制作价格 网络安全不仅仅 中国网络安全领袖 龙岗网站制作效果 信息安全产品证书号查询 全网络营销 国内信息安全公司排名,-1 机房网络安全 制度 优设网站手机网站模板开发 联想网络营销案例分析 网站页面组成 浦东新区专业网站建设 上海网络安全会议 上海网络安全会议 青岛信息安全保密大会 佛山网络营销 优帮云 网络安全高手 手机网站备案费用 网络营销的相关案例 营销机构图 营销部门简介 认识搜索引擎营销 网络安全的特点有哪些 成都网络安全现状 动易做网站 网络营销服务专家 赤峰网站建设 网站页面组成 旁路控制 信息安全 ruby开发 信息安全 沙龙营销 政府网络安全工作方案 网络安全不仅仅 信息安全逆向分析题目,-1 信息安全专业大学学费 微博口碑营销案例 中国网络安全基地 天门网站建设 信息网络安全知识培训 信息安全咨询师 通过对搜索结果的对比分析行业网络营销竞争状况及用户检索行为 九台网站 全网营销有哪些渠道 衣柜营销策划方案 河北信息安全认证中心 河北信息安全认证中心 认识搜索引擎营销 信息安全技术大纲 东莞设计网站企业 时事营销 国际信息安全专家,-1 网站利用百度离线地图 网络安全宣传主题是什么 中国信息安全学会 公安 石家庄网站建设 郑州网站推广流程 信息安全定级备案 顶级信息安全厂商 小程序在建网站吗? 全网营销有哪些渠道 网络营销培训公司 浙江营销策划 西北信息安全测评中心 长春网站设计 当今的网络安全有四个主要特点 如何免费创建网站 找营销公司 信息安全 身份认证技术 黑客攻击信息安全事件 sms营销 湖南专业做网站企业 网络安全的特点有哪些 网际天娇信息安全技术服务 找营销公司 信息安全指数分级 网络安全编程 python 微博口碑营销案例 网络安全新技术有哪些 中国信息安全学会 公安 动易做网站 营销的发展 房产网站制作 网络营销方案主要内容 小米的营销模式分析 口碑营销的视频 常州网站推广机构 网络安全暴力攻击原理 网络营销系统功能闸北区网站建设 南通网站建设空间 互联网平台信息安全 信息安全逆向分析题目,-1 信息安全指数分级 信息安全 公告 信息安全与网络安全 长沙网站建设 西安微信商城网站设计 微博口碑营销案例 网络营销推广哪家好 中国网络安全交流中心 信息安全技术大纲 破解网络安全密匙 教育行业网络安全现状 网络营销的相关案例 网站利用百度离线地图 网络营销的方式 网络安全宣传主题是什么 浙江营销策划 rce信息安全 佛山网络营销 优帮云 深圳 企业 网站建设 赤峰网站建设 全网营销有哪些渠道 武威网站建设 整体营销的含义 成都高新区 信息安全 信息安全服务风险评估资质证书 军工行业信息安全厂商要具备 网络安全不仅仅 九台网站 在网络安全等级保护制度中 信客宝营销软件怎么样 信息安全风险管理办法 信息网络安全知识培训 网络安全的特点有哪些 网络安全top10 中国网络安全领袖 网络安全堪忧 南山区网站建设公司 信息安全 身份认证技术 上海网络安全会议 认识搜索引擎营销 网络营销课 简单建网站 手机网站备案费用 龙岗网站制作效果 小米的营销模式分析 网站免费建站系统 认识搜索引擎营销 信息安全与网络安全 军工行业信息安全厂商要具备 信息安全技术大纲 中国信息安全等级保护 小程序在建网站吗? 大良网站公司 大专网络营销教材 深圳市信息安全测评中心地址 页面设计漂亮的网站 西安微信商城网站设计 温州网站制作价格 当今的网络安全有四个主要特点 找营销公司 网络营销可以自学吗 东阳做网站 天门网站建设 微博营销是一项系统工程微博营销的操作模式包含以下哪些 企业信息安全组织架构 信息安全等级保护技术标准体系 九台网站 大良网站公司 信息安全管理服务 网络营销可以自学吗 河北信息安全认证中心 中国信息安全学会 公安 网络安全能力认证考试 网络营销策划术语 时事营销 网络营销方案主要内容 信息安全专业大学学费 龙岗网站制作效果 中国信息安全学会 公安 机房网络安全 制度 html5网站 顶级信息安全厂商 顶级信息安全厂商 信息安全逆向分析题目,-1 信客宝营销软件怎么样 计算机网络信息安全 2013网络安全博览会 长沙网站建设 信息安全如何实现,-1 厦门网站建设公司 广州做网站信息 信息安全攻防技术 信息安全违规 中国网络安全基地 响应式网站工具 杭州市网络安全平台 机房网络安全 制度 通过对搜索结果的对比分析行业网络营销竞争状况及用户检索行为 找营销公司 广州广告网络营销公司排名 中国信息安全等级保护 河北信息安全认证中心 网络安全新技术有哪些 常州网站推广机构 南通网站建设空间 东莞设计网站企业 房产网站制作 信息安全的保护对象,-1 营销机构图 网络安全宣传主题是什么 常州网站推广机构 哈尔滨网络科技公司做网站 福州专业网站建设 信息安全定级备案 在线营销工具包 广州做网站信息 信息安全产品证书号查询 信息网络安全检查 网站支付接口 新媒体营销的成功案例信息安全是指 明月寒君不死者的客栈最强战神之末日求生龙脉守卫步步走向深渊肖恩同人集炎魔革命我在惊悚游戏世界杀疯了逍遥侠探踏上这条通往未知的道路!灰原梦境九色瞳巅峰强者:从凡界开始逆袭你假装修炼一下吧,球球了!至死不降无限纪元之战神传说大飞探案记开局我就火爆全网绝世无敌杀神玄武纪事工作压力大导致的精神不振微信公众号【紫晴前世今生】 感情纠纷的沟通技巧微信号码:qq383550880 前世老公的前世记忆微信号码:qq383550880 什么是婴灵?微信公众号【紫晴前世今生】 头脑混沌的环境影响【www.richdady.cn】 儿子不读书的心理调适微信号码:qq383550880 大龄剩女的真实案例有哪些?【www.richdady.cn】 强迫症的自我提升微信公众号【紫晴前世今生】 如何改善亲子关系?微信号码:qq383550880 大龄剩女的改运方法微信公众号【紫晴前世今生】 失业的心理调适微信号码:qq383550880 大龄剩女的婚恋故事微信号码:qq383550880 事业不顺的职场瓶颈如何突破?微信号码:qq383550880 冤亲债主干扰的真实案例有哪些?微信号码:qq383550880 家庭关系的和谐共建方法有哪些?微信号码:qq383550880 婴灵的感应现象【www.richdady.cn】 去世的母亲的前世记忆微信号码:qq383550880 前世今生的轮回理论【www.richdady.cn】 迟缓儿的治疗方法微信公众号【紫晴前世今生】 头脑混沌时如何提高注意力【www.richdady.cn】 前世今生相关【www.richdady.cn】 投资项目的财务规划【www.richdady.cn】 升迁障碍【www.richdady.cn】 婴灵【www.richdady.cn】 前世今生的故事有哪些经典案例?微信号码:qq383550880 孩子学习不好的辅导方法微信号码:qq383550880 前世缘份的前世记忆【www.richdady.cn】 与女友前世微信号码:qq383550880 事业不顺的案例分享微信公众号【紫晴前世今生】 与女友前世的因果关系【www.richdady.cn】 外灵干扰【www.richdady.cn】 事业不顺的职场调整微信号码:qq383550880 心慌胸闷头晕的自我提升微信公众号【紫晴前世今生】 特殊学校的环境影响微信号码:qq383550880 心慌胸闷头晕的前世记忆微信号码:qq383550880 存不住钱的案例分享微信公众号【紫晴前世今生】 如何解决事业不顺的问题?微信公众号【紫晴前世今生】 家庭关系中的矛盾解决【www.richdady.cn】 升迁障碍的职场晋升技巧有哪些?微信公众号【紫晴前世今生】 改善亲子关系的技巧【www.richdady.cn】 学习成绩差的家庭教育【www.richdady.cn】 去世的母亲的去向解析微信公众号【紫晴前世今生】 灵魂化解的具体步骤微信号码:qq383550880 公司破产的原因分析【www.richdady.cn】 亲子关系的咨询技巧微信公众号【紫晴前世今生】 大龄剩女的婚恋心态如何调整?【www.richdady.cn】 冤亲债主干扰的预防措施微信公众号【紫晴前世今生】 灵魂化解与心理疗愈【www.richdady.cn】 忧郁症微信公众号【紫晴前世今生】 儿子抑郁症的案例分享微信公众号【紫晴前世今生】 心慌胸闷头晕的咨询技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 意外的前世因果【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子不爱读书的原因有哪些?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 耳鸣对睡眠的影响咨询【www.richdady.cn】√转ihbwel 儿子抑郁症威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 自闭症的案例分享咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 与老公前世的咨询技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世今生的因果关系咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 人际关系不好的原因分析咨询【www.richdady.cn】√转ihbwel 如何识别外灵干扰的症状咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 脑部不清晰的生活习惯【www.richdady.cn】√转ihbwel 孩子厌学的环境影响咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的奇妙重逢【www.richdady.cn】√转ihbwel 前世缘份的缘分揭秘咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 与女友前世的因果关系咨询【www.richdady.cn】√转ihbwel 感情纠纷的情感修复方法有哪些?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 忧郁症的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 头脑混沌的解决方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 性压抑的咨询技巧威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 失业的自我提升【www.richdady.cn】√转ihbwel