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湖南高端网站制作公自助建立网站珠海做网站的o2o网站建设网站建设素材使用应该注意什么天启七年,明孝陵突发地震。 一个声音告诉朱元璋,大明要亡了,十七年后,他将代替自己的后辈朱由检,吊死在煤山的歪脖树上。 十七年救不了大明? 瞧不起谁呢! 朱元璋一声令下:来人,给咱把那棵歪脖树砍了! 改善民生! 肃清朝堂! 降服女真! 别的不说,逆天改命这事儿咱最拿手!修为散尽后重生于凡俗世界,然幸运的出生却没有幸运的人生,新婚妻子婚前被侮辱而自杀,自己中毒差点再次死亡,而这一切的一切不过是因他多年前救的一个女孩,记忆重临让他再次踏入修炼,誓以残废之躯再入天道之上。   在这个穿越者大赛,你不会彻底消亡,但是会在无限个世界中失去曾经拥有的一切,这就是——命运   *纯沙雕穿越流欢脱文,在这个世界只要你绑定了系统,你就可以穿越到任何一个世界。     “气死你,弄死你还是玩死你?你觉得那种方法比较合适呢?”   童梦挥舞着手上的火球,微微发作灵力,远处的公寓瞬间爆炸,火光冲天之际,一只生无可恋的肉团子飞到她面前,   “主人,你为什么要炸自个儿开的公寓?!”   “不知道,它改名了叫核爆公寓!”   系统8880再也忍不住,一个鸡腿砸向它主人的脑袋。   “我怎么就绑上你这么个主人!!”   “我很强的好吧!!哎哎哎别打脸!”   公元3250年,人类找到了可以穿梭到别的世界并且可以当作第二个地球移居的星球——零星,这颗星球每四年都会有一届大赛,人类也参与其中,积分榜与战力榜只要你肯拿下其实中一榜的第一就可以获得实现愿望的奖励!比赛开始,众人紧张惶恐,一点点刷着积分与灵力,唯独童梦手拿鸡腿,毫不留情在各个世界作死!     架空的历史文,来写一个皇帝的一生。文笔不太好,见谅 一块不起眼的石头,内里竟然容纳一方世界。少年只是随手一捡,便是陷入沉睡。 十年一梦,梦里十万年。 醒来,家族没落,承受着家族的血脉诅咒,他能否逆天改命。身陷囹圄,陆抗得天魔本源相助,逃出生天。 没有灵根,陆抗以血祭之法强行开辟,从此修行得道。 修行魔道,却不为恶,妄称正义之辈莫坏我自在逍遥。 偶行善事,自诩邪恶之徒莫言我虚假仁义,阻我大道朝天!石灵日久变成一个玉梅树,不断因为各种各样的情况,死亡,穿到另一个新世界。逐渐变强修炼。末日生存游戏降临。 任何人都可能被选中,进入游戏副本进行生存角逐。 规则诡异的废弃都市、危机重重的远古沼泽,步步杀机的荒凉大漠...... 一朝被绑票的裴墨忽然被游戏选中,危难之际觉醒末日虫巢系统。 当其他人还在为生存发愁之时,他已经融合虫巢,制造BOSS级种属——刀锋女王! “虫族别的特长没有,就是暴兵够猛!” 暴君、撕裂者、腐蚀者、坦克虫、电浆虫…… 当其他玩家小心翼翼,步步维艰之时。 却见裴墨的虫族大军已经铺天盖地,席卷了整个末日世界。 天下剑客,齐聚江湖。谁堪沉浮侠义道此作品是根据生活加以想象,构思出来的简短文集,一个章节就是一个故事,文章观点仅是个人理解,有冒犯之处或者情节雷同,请多包涵,谢谢
个人微信营销方案 2013网络安全大会 p2p网站制作 网络营销效果评价方法 网站自建 网络营销资源有什么 营销传播 信息安全宣传作品,-1 湖南高端网站制作公 提供商城网站 无形干扰【www.richdady.cn】 特殊学校的课程设置咨询【www.richdady.cn】 纠纷的法律援助【www.richdady.cn】 缺心眼的沟通技巧咨询【www.richdady.cn】 化解【www.richdady.cn】 婴灵的安抚有哪些实用技巧?咨询【σσЗ8З55О88О√转ihbwel 投资项目的前世因果【企鹅383550880】√转ihbwel 冤亲债主的干扰原因【σσЗ8З55О88О√转ihbwel 前世缘份的缘分再续咨询【企鹅383550880】√转ihbwel 提高孩子阅读兴趣的方法咨询【微:qq383550880 】√转ihbwel 事业不顺的原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 迟缓儿【www.richdady.cn】√转ihbwel 无形干扰如何影响心理健康【www.richdady.cn】√转ihbwel 暗恋的情感表达【www.richdady.cn】√转ihbwel 大龄剩女的婚恋现状【www.richdady.cn】√转ihbwel 儿子不读书的教育建议【微:qq383550880 】√转ihbwel 4. 财运与事业发展【σσЗ8З55О88О√转ihbwel 孩子不爱读书的阅读习惯【企鹅383550880】√转ihbwel 升迁障碍的职场突破咨询【微:qq383550880 】√转ihbwel 前世因果咨询【企鹅383550880】√转ihbwel 网络安全=信息安全 网络营销效果评价方法 赣州网站优化 国家网络安全园区 信息安全服务 全球 大市场营销组合构成6P 组织信息安全需求济南营销通 嘉兴网站制作 做门的网站建设 什么是竞价排名?企业网站进行竞价排名需注意哪些问题? 网络安全厂家介绍 第4课 网络安全 云南网站建设优选平台 优衣库电子邮件营销案例 o2o网站建设 济南手机网站建设公司 2014工业和信息化部关于开展加强网站备案管理专项行动方案 国内做网络安全的公司 中国国家网络安全谷 网络与信息安全管理人员配备情况 网站 title keywords description怎么设置 衢州做网站 创新的企业网站制作 徐州网站优化 常州网站建设哪家好 快消品网络营销 网络安全培训班 网络营销必看 书籍 广州 网络安全 网络安全隔离 重庆专业网站建设 网站备案填写的《信息安全管理协议》是去了备案的地方再填吗 银监 信息安全 组织信息安全需求济南营销通 学校网站模板网络营销网站排名 网络安全属于互联网 中国安全网络安全 自助建立网站 (1)计算机信息安全,-1 佛山网站设计资讯 安顺网站建设 福建网络安全周 网吧网络安全员培训 信息技术信息安全管理使用规则 4i营销理论的缺点 (1)计算机信息安全,-1 网络安全国家标准 西安高端网站制作公司哪家好 学网络营销话术 网络营销职业素质要求 公司网络安全负责人 谷歌英文网站 网络营销中4C的特点 免费建网站的网站 潍坊建设网站多少钱 苏州营销网站建设公司 信息安全 化 佛山网站设计资讯 欧盟网络安全法律法规 服务器网络安全设备方案 网络安全控制策略包括哪些内容? 福州网站建设服务 晋中网站建设 中国网络安全大事件 绿色调网站 网站 title keywords description怎么设置 公安部网络安全电视电话会议 顺的品牌网站设计价位 绍兴网站建设 绿色调网站 品牌营销策 湖南高端网站制作公 做门的网站建设 品牌营销策 网络营销推广效果 潍坊建设网站多少钱 辽宁省网络安全中心 网络营销资源有什么 企业免费建网站 银监 信息安全 学校网站模板网络营销网站排名 福州网站制 济南手机网站建设公司 赣州网站优化 杭州制作网站公司 邮件营销广告 南宁企业网站 域名与网站 营销网站案例什么意思 网站建设素材使用应该注意什么 东莞网站开发 晋中网站建设 建设网站具备的知识 国内顶级网络安全公司排名 网站建设素材使用应该注意什么 中国国家网络安全谷 我国信息安全标准体系有 网络营销中4C的特点 当前中国网络安全 横岗做网站 中国安全网络安全 南京亚信信息安全技术有限公司 网络营销效果评价方法 校园信息安全平台 网络安全培训班 大连网站制作推广 国际信息和网络安全会议 企业网站模板下载 (1)计算机信息安全,-1 网站设计的文案 网站首页被k 宜春网站建设 服务器网络安全设备方案 o2o网站建设 信息安全自评估报告 学网络营销话术 网站加地图 2017年网络安全新闻 信息安全安全号网站建设费用 公司网站手机版设计 福建网络安全周 网络安全国家标准 宜春网站建设 播客营销缺点 做门的网站建设 东莞网站开发 中国网络信息安全大会 4i营销理论的缺点 b2b技术型社区营销 网站 手机案例 信息安全市场 杀毒软件,-1 网络安全厂家介绍 自助建立网站 网吧网络安全员培训 网站 title keywords description怎么设置 网络安全 dmz 创新的企业网站制作 p2p网站制作 快消品网络营销 安顺网站建设 4i营销理论的缺点 网站自建 优异网站 长治网站建设 组织信息安全需求济南营销通 (1)计算机信息安全,-1 2017年网络安全新闻 关联体验营销旅游营销方案 中国网络安全局图标 信息技术信息安全管理使用规则 衡阳网站建设 中国安全网络安全 公安网络安全系统的设计与实现的案例 衡阳网站建设 长治网站建设 公司网站设计与制作 昆山设计网站的公司哪家好 学校网站模板网络营销网站排名 学网络营销话术 万户网站 网络安全=信息安全 建设营销型网站的要素 网络安全重大案件 银监 信息安全 珠海做网站的 信息安全宣传作品,-1 西安高端网站制作公司哪家好 赣州网站优化 播客营销缺点 重庆专业网站建设 云南网站建设优选平台 域名与网站 网站的缺点 使用同一路由器个人信息安全吗 欧盟网络安全法律法规 营销传播 个人微信营销方案 网络营销seo 吗 信息技术信息安全管理使用规则 验证码与信息安全 常州网站建设哪家好 个人微信营销方案 提供商城网站 自助建立网站 顺的品牌网站设计价位 提供商城网站 国内顶级网络安全公司排名 网络安全培训班 网络营销基础报告 广东网络安全法研讨会 关联体验营销旅游营销方案 网站挂黑链 网络安全设备运行状态 湖南高端网站制作公 信息安全等级保护 步骤网络安全500强中国公司排名 厦门响应式网站制作 公司网站手机版设计 信息安全 化 第4课 网络安全 国内做网络安全的公司 什么是竞价排名?企业网站进行竞价排名需注意哪些问题? 公司网络安全没通过 成交型网站 网吧网络安全员培训 公安部网络安全电视电话会议 徐州网站优化 公安网络安全系统的设计与实现的案例 免费建网站的网站 企业免费建网站 网站的缺点 营销认证 网站自建 关联体验营销旅游营销方案 企业免费建网站 丹江口网站建设 福州网站建设服务 南宁网站设计 网站加地图 网站设计公司 长沙 第4课 网络安全 济南手机网站建设公司 衢州做网站 三合一网站建设是指 网站备案填写的《信息安全管理协议》是去了备案的地方再填吗 网络营销职业素质要求 网络安全培训班 广州 网络安全 网络公司网站 信息安全的指标 营销网站案例什么意思 电子商务网站建设内容 网络营销资源有什么 网站制作 武汉 广州 网络安全 播客营销缺点 中国网络安全大事件 网站设计的文案 企业响应网站 中国国家网络安全谷 顺的品牌网站设计价位 网站的缺点 云南网站建设优选平台 厦门响应式网站制作 昆山设计网站的公司哪家好 营销认证 优异网站 赣州网站优化 b2b技术型社区营销 衡阳网站建设 信息安全自评估报告 安顺网站建设 中国安全网络安全 东莞网站开发 企业网站模板下载 宜春网站建设 部门网站建设 网络营销中4C的特点 响应国家网络安全 中国网络信息安全大会 网站的缺点 校园网网络安全解决方案 学网络营销话术 信息安全类小型软件开发实列 组织信息安全需求济南营销通 重庆专业网站建设 信息安全市场 杀毒软件,-1 公司网站设计与制作 网站加地图 部门网站建设 网络营销效果评价方法 4i营销理论的缺点 2014工业和信息化部关于开展加强网站备案管理专项行动方案 o2o网站建设 网络安全属于互联网 横岗做网站 网络营销基础报告 信息安全自评估报告 欧盟网络安全法律法规 国内做网络安全的公司 网络安全=信息安全 提供商城网站 2017年网络安全新闻 域名与网站 自助建立网站 学校网站模板网络营销网站排名 网络安全国家标准 长治网站建设 使用同一路由器个人信息安全吗 网站 手机案例 网站模块化 学网络营销话术 o2o网站建设 南京亚信信息安全技术有限公司 佛山网站设计资讯 2013网络安全大会 个人微信营销方案 公司网络安全没通过 网络安全重大案件 网站制作 武汉 中国网络安全局图标 使用同一路由器个人信息安全吗 网站 title keywords description怎么设置 万户网站 福建网络安全周 (1)计算机信息安全,-1 国际信息和网络安全会议 网络安全厂家介绍 建设网站具备的知识 2017年网络安全新闻 信息安全服务 全球 校园信息安全平台 网络安全设备运行状态 丹江口网站建设 信息技术信息安全管理使用规则 广州网站建 珠海做网站的 广东网络安全法研讨会 衡阳网站建设 营销传播 创新的企业网站制作 建设营销型网站的要素 学校网站模板网络营销网站排名 佛山网站设计资讯 网络安全国标 大市场营销组合构成6P 三合一网站建设是指 信息安全等级保护 步骤网络安全500强中国公司排名 企业免费建网站 病毒营销经典案例 信息安全等级保护 步骤网络安全500强中国公司排名 第4课 网络安全 学网络营销话术 徐州网站优化 网络安全音乐 提供商城网站 什么是手机网站建设 苏州营销网站建设公司 信息安全体检要求 品牌营销策 网络营销效果评价方法 营销传播 优衣库电子邮件营销案例 网络营销推广效果 快消品网络营销 NSACE网络安全工程师 营销认证 企业免费建网站 欧盟网络安全法律法规 衢州做网站 辽宁省网络安全中心