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
中国国际信息安全大会教育行业信息安全方案公安局网络安全监察大队什么公司需要网路营销信息安全行业公司排名广西网站建设营销广告的意义2017网络安全日宣传网站及单位网站建设情况网络建设的网站这个世界,有大妖,鬼魂,狐仙,盘古开天,女娲造人,后羿射日,精卫填海,三皇五帝,万千世界,天上天下,为我独尊一直开挂是很爽,但爽过头就腻歪了,这种就像是男女之间的那点破事,偶尔爽爽就可以了,一直爽下去,那是不可能的! 所以呀!身为一本书里的主角,你没有一个跌宕起伏的人生经历,又怎么能让翻书人的心情一直爽下去呢? 那要怎么弄才能平衡呢?嗯。。。想到了,那就让主角半数时间都‘残血’吧。 我没有太大的理想,生活在一个平凡的世界。没有重生穿越,没有异能修仙,只是经历着大多数人经历过,或者正在经历的事情。我只是在讲一个故事而已,有我的故事,也有身边人的故事。但生活其实也就那么回事,套用托尔斯泰在《安娜·卡列尼娜》中的那句名言就是:“幸福的生活都是相似的;不幸的,则各有各的不幸。”1带着疲惫的身心和仿佛燃尽的灵魂,苍浩回到了家乡,成了地产公司的普通员工,却惊讶的发现上司是自己的青梅竹马……都市商场,杀机陡现,神秘敌人暗中潜伏,且看苍浩如何突出重围。这不是最美好的世界,但这是一部热血逆袭,用双手创造一个理想年代。张海黎只是一个普通的初中生而已,至少他自己这么认为。但是有一天,他突然无故遭到同班同学的追杀。 在意外觉醒了系统之后,他发现这个世界,貌似远不止他想的那么简单:没有亲人、朋友,怎么活下去?仙路诡奇,人道卑微。 众生皆浮屠,仙心如寒霜。 少年方尘意外获得仙缘,心中却只有一愿:愿以手中仙剑,开万世太平!双日凌空,神秘再现,在科技崩溃的废墟中,万物迎来了无限进化! 穿越而来的沈凌,激活了自己的无限世界模拟器。 只要是花费足够的能量,就能够获得在模拟世界中得到的修为、武功和物品! 于是,在小李飞刀的世界中,沈凌获得了小李飞刀! 在大唐双龙的世界中,沈凌修成了剑心通明! 在蜀山的世界中,沈凌拿到了化血神刀! 在洪荒的世界中,他夺取了诛仙四剑……万古第一佛,万古第一神佛,太古第一佛,太古第一僧,太古第一神。华夏少林寺大和尚释永心修炼100年,证得罗汉道果。虹化飞升,抵达异界,再度开启新的篇章! 焚身以火,让业火烧熔我;燃烧我心,唱出佛的颂歌。燃烧色身,投进佛的圣火。我不愿意,让五蕴埋葬了我。 焚心以火,烫上佛的深烙。燃烧的心,不让贪嗔痴埋葬了我。燃烧色身,投进佛的圣火重生东汉,觉醒菜鸟系统 哪知这个系统与宿主性格不合,下一秒系统直接造反,竟化身成为 最强帝王系统附身他人身上。 誓要与昭昊死磕到底。 从此,昭昊的漫漫三国路变得艰险无比。 为了找出隐藏在背后下黑手的系统,昭昊开启了他漫长的背刺生涯。 凡是有资格成为的帝王的人,都成为了他背刺的目标。 吕布:我此次前往雁门,是为杀了昭昊小儿,以报夺妻之仇。 昭昊:什么,昭昊小儿竟然如此卑鄙,兄长放心,辽与你同去,定斩下昭昊小儿人头以泄兄长心头之恨。 当晚二人把酒言欢,酒后,昭昊将匕首一把刺进吕布的心窝。 昭昊:“兄长,看来你不是系统附身之人。” 董卓祸乱朝纲。 曹操:“董贼不除,我大汉四百年基业岌岌可危,子阳,今晚你我二人就潜入相府,斩杀国贼董卓,还天下一个朗朗乾坤。” 昭昊:“就依孟德之言。” 当晚,二人潜入相府,曹操拿着七星宝刀一步步朝熟睡的董卓逼近,而他的背后,昭昊正手持匕首对准他的心窝。
地方门户网站制作 网络营销公司地图 个人手机版网站建设 文具的网络营销策划 杭州网络科技网站 wifi信息安全登记平台 中国网络安全大赛试题 中山网站建设方案 南通网站怎么推广 免费注册网站 财运不佳的风水调整方法有哪些?【www.richdady.cn】 升迁障碍【www.richdady.cn】 有官司的心理调适咨询【www.richdady.cn】 家宅磁场咨询【www.richdady.cn】 意外的前世记忆咨询【www.richdady.cn】 老公家暴的原因分析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与公婆前世【σσЗ8З55О88О√转ihbwel 投资项目的收益分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 小企业破产的主要原因咨询【σσЗ8З55О88О√转ihbwel 不爱读书的教育建议【微:qq383550880 】√转ihbwel 感情纠纷的自我提升威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 升职加薪的障碍分析【www.richdady.cn】√转ihbwel 前世今生的故事解析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世老婆的前世缘分威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子不爱读书的阅读习惯如何培养?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世老婆的咨询技巧咨询【企鹅383550880】√转ihbwel 官司【σσЗ8З55О88О√转ihbwel 特殊学校咨询【微:qq383550880 】√转ihbwel 升迁障碍的风水布局【微:qq383550880 】√转ihbwel 迟缓儿的家庭支持【企鹅383550880】√转ihbwel 网站请人做的 域名自己注册的 知道网站后台 怎么挂自己的服务器 徐州建网站 四川大学 信息安全 实验报告 企业网站系统 网络安全竟赛 网络营销的技巧是什么意思 2013年进行互联网营销推广的企业各种网络营销方式的渗透 b2c网站建设 机械厂网站建设 网络安全防护体系 多边形网站 李强 网络安全审查网络安全需要编程么 商城网站建站程序 互联网营销学什么 视频营销软件都有什么软件 北大 信息安全 实验室 网络营销的策略有哪些? 企业网络安全学校 怎么设置网站栏目 机械厂网站建设 自己建的网站打开的特别慢 2017上海网络安全论坛 互联网信息安全问题主要来源 网络安全协会入会理由 信息安全分析师专科生 公安局网络安全监察大队 幼儿园网站设计 神州网云 网络安全招聘 全国公安机关网络安全保卫工作会议 email营销方式 警惕网络窃密构筑网络安全防火墙视频 上海网络信息安全 网络安全竟赛 信息网络安全技术培训 营销广告的意义 php网站建设公司 信息安全等级保护要求 中国网络信息安全公司,-1 南宁网站忧化 广州外贸网站信息 网络安全周报 16年网络安全大事件 企业软文营销素材 是网络营销的劣势 网络安全与防范技术 伍佰亿官方网站 信息安全风险评估服务 网络安全测试平台 网络信息安全交流会 网络信息安全交流会 温州网站优化 什么公司需要网路营销 神州网云 网络安全招聘 大学生网络安全实例 商城网站建站程序 2015信息安全事件 伍佰亿官方网站 广州外贸网站信息 单页式网站模板 网站类型 网站名称 表现主题 内容设计 色彩搭配 服务对象 万户网络网站顾问 网站构建 李强 网络安全审查网络安全需要编程么 网上调研营销 四川大学 信息安全 实验报告 成都 网站建设 网络安全应急 网络安全应急响应时间 视频营销软件都有什么软件 国家信息安全师三级 中国网络安全大赛试题 南通网站怎么推广 营销学视频 基于攻防对抗的网络安全动态评估方法 上海集团网站制作 生物网站建设 网上调研营销 wifi信息安全登记平台 网站优化合同 网络安全竟赛 营销广告的意义 2016全国大学生信息安全竞赛 教育行业信息安全方案 网站制作时如何分析竞争对手 北大 信息安全 实验室 有实力的网络营销公司 许可email营销的特点 国网大营销 计算机流行的信息安全产品网络营销证书名称 冯英健 内容营销 网络安全企业 深圳 中国网络安全大赛试题 网络营销工资 网站及单位网站建设情况 长沙营销型网站建设 新鸿儒网站 免费建设网站平台 万户网络网站顾问 长沙营销型网站设计 信息安全行业公司排名 网站乱码 杭州网站建设开发 网站怎么弄 幼儿园网站设计 网站建设 中国国际信息安全大会 新鸿儒网站 秦淮网络营销系统 javascript 识别手机并跳转到手机网站 并可回到电脑版 网站色彩的搭配原则有哪些 杭电信息安全专业怎样 专业网站建设 耒阳做网站 企业软文营销素材 文具的网络营销策划 常见的信息安全威胁 哈尔滨做平台网站平台公司 2017网络安全日宣传 织梦网站图片代码 2017 网络安全生态峰会 网站构建 杭州网络科技网站 星巴克网络营销的价值 网站怎么弄 国内信息安全厂商 全国公安机关网络安全保卫工作会议 成都 网站建设 企业网络安全学校 信息安全分析师专科生 网络营销工资 杭州网站建设开发 耒阳做网站 企业信息安全工程 营销群发器 潍坊网站建设 北大 信息安全 实验室 2012年中国互联网网络安全态势报告 潍坊网站建设 企业网络安全学校 深圳网站建设服务公司 网络安全法制定本行业 机械厂网站建设 信息安全意识漫谈手册 网络营销公司地图 2017上海网络安全论坛 网站请人做的 域名自己注册的 知道网站后台 怎么挂自己的服务器 关于网络安全的专业 企业网站建设运营 信息安全威胁发展趋势 2013年进行互联网营销推广的企业各种网络营销方式的渗透 2016全国大学生信息安全竞赛 信息安全等级保护要求 网站乱码 企业信息安全知识培训 企业网站系统 网络安全 x-team 新乡网站设计 营销广告的意义 计算机网络信息安全证 生物网站建设 网络建设的网站 三只松鼠营销的缺点 网络营销的技巧是什么意思 网络安全竟赛 个人手机版网站建设 中山网站建设方案 网络安全测试平台 网站制作时如何分析竞争对手 什么公司需要网路营销 警惕网络窃密构筑网络安全防火墙视频 互联网信息安全问题主要来源 网络营销的策略有哪些? 如何开发手机网站 重庆商城网站制作报价 免费那个网站 企业网络安全漏洞 地方门户网站制作 互联网营销学什么 是网络营销的劣势 网络建设的网站 信息安全分析师专科生 b2c网站建设 免费注册网站 信息安全行业公司排名 网络安全周报 武汉 网站建设龙岗营销网站建设公司 如何创建个人网站 幼儿园网站设计 企业网络安全漏洞 网络安全的现状与威胁分别有 上海集团网站制作 秦淮网络营销系统 开放网络安全吗 广西网站建设 网站优化合同 专业网站建设 警惕网络窃密构筑网络安全防火墙视频 开放网络安全吗 香港网络安全 常见的信息安全威胁 网络安全防护体系 大学生网络安全实例 php网站建设公司 免费注册网站 app营销的劣势 互联网信息安全问题主要来源 南宁网站忧化 信息安全的人员管理包括 email营销方式 齐齐哈尔网站建设 营销型网站制作公司 织梦网站图片代码 营销七部曲 湖南网站seo 上海网络信息安全 饿了么的网络营销模式 网络营销的策略有哪些? 国家信息安全师三级 信息安全的人员管理包括 李强 网络安全审查网络安全需要编程么 如何与网站管理员联系 昆山网站 冯英健 内容营销 怎么设置网站栏目 宁波网上营销网 何德全 网络安全 杭电信息安全专业怎样 福州网站制作公司 信息安全从业指南 宁波网上营销网 文具的网络营销策划 是网络营销的劣势 重庆商城网站制作报价 中国网络信息安全公司,-1 上海平台网站建设公司排名 上海网络信息安全 伍佰亿官方网站 php网站建设公司 互联网营销学什么 徐州建网站 网站类型 网站名称 表现主题 内容设计 色彩搭配 服务对象 2017 网络安全生态峰会 营销学视频 神州网云 网络安全招聘 新鸿儒网站 网站建设 金融客户信息安全 单页式网站模板 广州网站维护 网络安全法制定本行业 有实力的网络营销公司 长沙营销型网站建设 徐州建网站 网络安全应急响应时间 杭州网络科技网站 杭州网站建设开发 商城网站建站程序 北大 信息安全 实验室 计算机流行的信息安全产品网络营销证书名称 北京微博营销服务商 星巴克网络营销的价值 怎么创建网站/ email营销方式 网站色彩的搭配原则有哪些 网络安全协会入会理由 网络营销公司地图 免费建设网站平台 金融客户信息安全 网络安全认证机构 网络安全防护体系 顺德网站设计 2017网络安全日宣传 中国网络安全大赛试题 长沙营销型网站设计 网站建设 商城网站建站程序 企业网络安全学校 2012年中国互联网网络安全态势报告 宝洁网络营销现状 网络安全企业 深圳 中国信息安全标准体系 宝洁网络营销现状 2017网络安全日宣传 成都 网站建设 关于网络安全的专业 信息安全行业公司排名 神州网云 网络安全招聘 营销群发器 许可email营销的特点 哈尔滨做平台网站平台公司 网站构建 基于攻防对抗的网络安全动态评估方法 饿了么的网络营销模式 秦淮网络营销系统 万户网络网站顾问 机械厂网站建设 长沙营销型网站建设 多边形网站 信息安全分析师专科生 2016全国大学生信息安全竞赛 国网大营销 常见的信息安全威胁 视频营销软件都有什么软件 如何创建个人网站 网站怎么弄 2015信息安全事件 2012年中国互联网网络安全态势报告 许可email营销的特点 哪个网站是专门为建设方服务的 南宁网站忧化 是网络营销的劣势 开放网络安全吗 javascript 识别手机并跳转到手机网站 并可回到电脑版 是网络营销的劣势 免费注册网站 个人手机版网站建设 网络安全的现状与威胁分别有 2016全国大学生信息安全竞赛 企业网络安全漏洞 信息安全创业,-1 三只松鼠营销的缺点 沈阳做网站公司 企业网站建设运营 伍佰亿官方网站 企业软文营销素材 冯英健 内容营销 营销式网站 email营销方式 中国网络信息安全公司,-1 网站优化合同 李强 网络安全审查网络安全需要编程么 三只松鼠新媒体营销 互联网信息安全问题主要来源 网络安全测试平台 网络安全应急 中国信息安全标准体系 互联网营销学什么 公安局网络安全监察大队 网络安全竟赛 徐州建网站 2012年中国互联网网络安全态势报告 莱芜网站建设 营销型网站制作公司 网络信息安全交流会 信息安全风险评估服务 营销型网站制作公司 中国信息安全标准体系 多边形网站 昆山网站 免费注册网站