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中国网络与信息安全大会网络安全专家咨询电话(本书又名:掘墓人的亲身经历)我爹说,我的命是借来的,出来借迟早是要还的! 而我的故事,还要从我即将满十八岁的那场经历开始,就让二狗以自己的掘墓人的亲身经历,带领大家解读那些藏于民间的传闻秘事……天才少年萧辰,灵台被族人夺取,沦为废人,受尽屈辱,幸而觉醒神物九龙塔,拜得神秘少女为师,吞噬九天之灵,融万族血脉,以九龙之体,战尽天下英豪!我有一剑,可断山、可憾天。 我有一剑,可斩道,可永生。 没有华丽的剑芒, 没有通玄的神意, 没有仙道的飘渺, 面对一切, 我, 只出一剑。一个巧合,一段经历。野微微因为一次意外被卷进了一个匪夷所思的世界。本是一个刚上高中的女孩确拥有了一种神奇的能力。“那人是谁?”“这你都不认识?他就是那鸿渊传人,魔圣宁渊。””混蛋!别跑!十万八千器!“”那是什么?!“众人震惊的看着天上的那道长河。良久,一人唯唯诺诺的说道:”那些,都是灵器?“”怎么可能?!这么多!“怎么不可能?他可是天下第一炼器师!! 林明穿越到危机四伏的玄幻世界,开局就被成为苦力,惨遭007折磨。   就在林明以为要当一辈子牛马的时候,激活了人生模拟器。   只需要消耗灵石就能够开启模拟。   【第一日:你学习陈胜吴广,一句王侯将相另有种乎震撼众囚,囚犯们热泪盈眶直呼你为天人转世。】   【第二日:你的话在囚犯群体中传播开,你的地位直线上升。】   【第五日:你晚上睡觉的时候,突然有黑衣人闯进来把你带走,你自知实力不够无法反抗。   好在对方没有恶意,你们细细攀谈对方对于你的想法大为震惊,表示还会来找你的。】   【第六日:黑衣人果然来找你,你们相谈甚欢。   你接着这个机会寻问修行之法,对方随手给了你一本没有封面的功法,并且指导你修行。】   【第九日:有人指导加上你没日没夜的练习,你终于有了气感。】   【第二十日:你成功突破进入到炼气期成为一名修士!】出门在外,谨记必带一本《古真经》因为你不知,真(白发女鬼——新疆语)会在哪里,也许会在你的身边。末日降临,仙凡佛圣人神难逃。 在人间历劫任务完成后,玉皇大帝的二皇子凤赫回归天庭。随之而来的是魔界入侵天堂,天庭自顾不暇,无力救援,从此掀起了天堂和天庭的大战。 末日降临,诸天陨落,诸世受难,诸神黄昏。地球人间成为各界的必争之地!生命就是一场经历。没了高中的紧张,大学里放松了很多。 思想上的经历,可以通过多读书来实现。但生活上的经历,只能是自己切身体会。 大学四年,在酒吧兼过职,处了舞蹈系最漂亮的女朋友,球场上跟体育生比过武,跟英语专业最牛逼的男生交了朋友,社团招新上出名全校,也受过其他学生的欺凌,看到过同学生命的逝去,也一直结识更多新的朋友。 小说来源于现实,现实又何尝不是一部小说。辍学青年陈阿树整日无所事事游手好闲不务正业一次偶然的机会他接触到了电竞行业起初他只是游戏主播但随着心中的那一颗电竞心他成为了职业选手但父亲的阻拦和亲朋好友的质疑使他想要放弃他选择了退队但一个女孩的出现使他重燃了电竞之梦!最他完成了愿忘成为了了世界冠军
丰都网站深圳信息安全服务公司,-1 肥城网站制作 微信运营营销的区别 网络安全技术大赛 It信息安全心得 全国大学生信息安全竞赛题目 信息安全学python 网络安全产品有哪些 中国网络营销论坛 什么是整合营销? 财运不佳的投资建议【www.richdady.cn】 与公婆前世咨询【www.richdady.cn】 干扰咨询【www.richdady.cn】 有官司的心理调适【www.richdady.cn】 无形干扰对工作效率的影响咨询【www.richdady.cn】 耳鸣的心理调适咨询【www.richdady.cn】√转ihbwel 婴灵的真实案例有哪些?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 儿子抑郁症的环境影响【企鹅383550880】√转ihbwel 不爱读书的咨询技巧咨询【企鹅383550880】√转ihbwel 冤亲债主的干扰影响咨询【企鹅383550880】√转ihbwel 意外事故的应急处理方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何判断被冤亲债主干扰?【www.richdady.cn】√转ihbwel 莫名其妙感伤的前世因果咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 纠纷的法律咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 感情纠纷的情感修复方法有哪些?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 为什么过世的原因分析【σσЗ8З55О88О√转ihbwel 与老公前世的因果关系威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 缺心眼的咨询技巧【企鹅383550880】√转ihbwel 精神不振的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 构建和谐亲子关系的方法有哪些?咨询【微:qq383550880 】√转ihbwel 武汉网站开发 公安部信息安全测评 网站设计和制作费用 微软系统的信息安全隐患排查 门户类型的网站 微网站建设资讯 网站制作的趋势 全网视频营销 东莞网站改版 平台营销有哪些方式 网络营销发展课 中山网站优化12.威胁网络安全的主要因素有 病毒性营销 个人信息安全指南 全网营销网 网络安全空间协会 娄底网站建设 公安部信息安全测评 网站设计和制作费用 微软系统的信息安全隐患排查 门户类型的网站 微网站建设资讯 网站制作的趋势 全网视频营销 东莞网站改版 平台营销有哪些方式 网络营销发展课 中山网站优化12.威胁网络安全的主要因素有 公司网站设计与制作 分析社会热点与网络营销的关联 个人信息安全指南 小米手机网络营销预算 信息管理与信息系统 信息安全 医疗服务营销策划 西安论坛网站制作维护 丰都网站深圳信息安全服务公司,-1 珠海网站推广 绿色调网站 佛山微信营销 网站推广报价 2017中国网络与信息安全大会 2012年国家下一代互联网信息安全 专项产品测试成绩 北京新营销 深圳市网络安全公司排名 工程项目网络信息安全 泰安网站建设公司怎么看待网络安全 无锡全网营销外包 衡水移动端网站建设 青岛开发区制作网站公司 万网做网站 南京网站关键词优化 网络安全公司招聘信息 个人网站设计 网络营销与马云 京东商城营销页面 全国信息安全考试时间 工业控制系统信息安全国家工程实验室 南京网站关键词优化 网络安全百强 信丰做网站 公司网站设计与制作 部门网站建设 佛山微信营销 网络营销网上营销 信息安全研究理论 网络安全空间协会 国家信息安全局网站 甘肃网站建设 长春制作网站 企业网站模版 公安部信息安全测评 全国大学生信息安全竞赛题目 网络营销在线讨论法 信息安全等保标准 2012年国家下一代互联网信息安全 专项产品测试成绩 网络安全技术的选择 河间做网站 网络营销创新模式 网络营销网上营销 企业营销的方法有哪些 全国大学生信息安全竞赛题目 娄底网站建设 网站备案填写的《信息安全管理协议》是去了备案的地方再填吗 网站设计用什么字体好 珠海网站推广 哈尔滨的网站设计 宁夏区烟草公司计算机网络信息安全建设项目培训计划 海尔网上营销案例分析 网络信息安全难学吗 工业控制系统信息安全国家工程实验室 网络安全技术大赛 网站设计和制作费用 平台营销有哪些方式 网络营销广告策略分析 网站外接 万先生网站 网络安全专家咨询电话 2016企业信息安全事件 医疗服务营销策划 网络营销与马云 简述网络安全扫描的内容? 一个网站做几个关键词 小米公司网络营销 京东商城营销页面 西安论坛网站制作维护 小米手机网络营销预算 中国网络营销论坛 个人信息安全指南 网络信息安全测评机构 网络信息安全测评机构 哈尔滨的网站设计 网站商城系统 郑州网站建设 全网视频营销 珠海网站推广 airbnb营销方式 电脑无网络安全 网络安全 僵尸网站 高端网站设计 重庆大型的网站建设 招商网站建设 淘宝常见营销手段 网络安全空间协会 简述网络安全扫描的内容? 佛山微信营销 丰都网站深圳信息安全服务公司,-1 泰安网站建设公司怎么看待网络安全 肥城网站制作 信息安全学python 学校病毒营销方案 百度搜索营销 万网做网站 计算机信息安全系统是指 长春制作网站 2017中国网络与信息安全大会 北京新营销 南京餐饮网络营销公司 网站制作的趋势 微软系统的信息安全隐患排查 在内网部署漏洞检测服务器(或安全扫描设备)及时发现网络安全漏洞; 数字化营销的特点 数字化营销的特点 肥城网站制作 网络安全态势感知架构 北京新营销 网站推广报价 手机网络营销普遍问题 国家信息安全局网站 华为手机 国家信息安全,-1 信息安全博览会,-1 工业控制系统信息安全国家工程实验室 洋码头 营销活动 2016企业信息安全事件 网站运营公司 网站设计用什么字体好 国外优秀网站设计欣赏 网站外接 企业营销的方法有哪些 信息安全研究理论 贵州网站推广优化 洋码头 营销活动 国家信息安全局网站 计算机信息安全系统是指 昆明建网站要多少钱 小米公司网络营销 海尔网上营销案例分析 网络营销在线讨论法 百度网络营销策划实咧 网站费用 计算机信息安全系统是指 郑州网络营销推广公司 如何提高信息安全意识,-1 万网做网站 万先生网站 全国大学生信息安全竞赛题目 网络安全专家咨询电话 南京网站关键词优化 企业网站模板下载 成都 企业网站建设公司 长春制作网站 什么是整合营销? 电脑无网络安全 微博营销的事件 信息安全等保标准 网络安全百强 衡水移动端网站建设 分析社会热点与网络营销的关联 郑州网络营销推广公司 门户类型的网站 网站商城系统 网络安全专家咨询电话 国家信息安全项目 国家信息安全局网站 网络安全公司招聘信息 信丰做网站 3合一网站 网站制做公司 信息安全测评工作 金融 信息安全体系建设方案,-1 工业控制系统信息安全国家工程实验室 2012年国家下一代互联网信息安全 专项产品测试成绩 信丰做网站 中山网站优化12.威胁网络安全的主要因素有 长沙 营销顾问公司 昆明建网站要多少钱 全网营销网 网络安全职位 2016企业信息安全事件 东莞网络营销 甘肃网站建设 个人网站设计 公司网站开发公司 信息安全博览会,-1 宁夏区烟草公司计算机网络信息安全建设项目培训计划 营销九连环 小米手机网络营销预算 网络安全态势感知架构 网络安全技术的选择 公司网站设计与制作 云网站系统 成都网络营销高手 微博营销的事件 信息安全学python 全网视频营销 小米手机网络营销预算 百度搜索营销 信息安全 采访 电脑无网络安全 衢州做网站 微信运营营销的区别 南京餐饮网络营销公司 淘宝常见营销手段 中国网络营销论坛 2012年国家下一代互联网信息安全 专项产品测试成绩 病毒是营销 信息安全 活动视频,-1 青岛开发区制作网站公司 贵州网站推广优化 北京新营销 重庆整合营销哪家好 珠海网站推广 网络营销与马云 信息安全博览会,-1 信息安全是什么类 信息安全 实践 高端网站设计 当前php环境关闭了文件上传功能网站将无法上传图片和文件 西安论坛网站制作维护 平台营销有哪些方式 个人信息安全指南 华为手机 国家信息安全,-1 信息管理与信息系统 信息安全 百度网络营销策划实咧 南京网站关键词优化 网络安全技术大赛 网站制作的趋势 深圳大型网络营销公司排名 信息安全博览会,-1 企业营销的方法有哪些 网络营销在线讨论法 泰安网站建设公司怎么看待网络安全 招商网站建设 网络安全公司招聘信息 云网站系统 定制网站的好处有哪些 网站外接 网络营销广告形式 医院信息安全等级保护方案 信息安全等保标准 信息安全等保标准 网站制作的趋势 网站推广软文 云网站系统 网络营销创新模式 万先生网站 信息安全 实践 网络安全产品有哪些 制作网站备案幕布成都市华为存储网络安全有限公司 甘肃网站建设 公司网站设计与制作 昆明建网站要多少钱 万网做网站 什么是整合营销? 重庆整合营销哪家好 工业控制系统信息安全国家工程实验室 网站备案填写的《信息安全管理协议》是去了备案的地方再填吗 网站运营公司 网络营销发展课 部门网站建设 网络营销广告策略分析 门户类型的网站 金融 信息安全体系建设方案,-1 信息安全研究理论 2016企业信息安全事件 qq免费建网站 企业网站模板下载 医疗服务营销策划 门户类型的网站 全国信息安全考试时间 网络安全 僵尸网站 检查网络安全性 检查网络安全性 微软系统的信息安全隐患排查 华为手机 国家信息安全,-1 河间做网站 最优的网站建设 肥城网站制作 招商网站建设 浙江 网络 营销 好 南京网络营销外包 手机网络营销普遍问题 网络安全产品排名中科新业 上网时为何要重视网络安全网站建设的网站定位 昆明建网站要多少钱 绿色调网站 深圳企业网站建设公司哪家好 淘宝常见营销手段 珠海网站推广 教育行业信息安全风险 无锡全网营销外包 信息安全 实践 丰都网站深圳信息安全服务公司,-1 网络安全举报 南京餐饮网络营销公司 网络营销新媒体技巧 学校病毒营销方案 airbnb营销方式 It信息安全心得 深圳市网络安全公司排名 网络安全举报 检查网络安全性 东莞网络营销 网络安全发展 网站制作的趋势 郑州网络营销推广公司 深圳大型网络营销公司排名 深圳网站外包 广州网络营销公司招聘 贵州网站推广优化 2016企业信息安全事件 甘肃网站建设 中山网站优化12.威胁网络安全的主要因素有 成都 企业网站建设公司 公司网站开发公司 电脑无网络安全 全国大学生信息安全竞赛题目 网络信息安全难学吗 检查网络安全性 网站运营公司 网站运营公司