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
北京知名信息安全公司排名信息安全管理技术cpa营销保护网络信息安全常见网络安全漏洞网络管理与网络安全深圳网络信息安全中心招聘呼和浩特做网站的公司网络安全法公安部网站设计公司无锡修炼一途,儿女情长,恩怨情仇,漫漫长路只为寻道求缘,若知,道在人为!意外融合古兽,让他的修炼一途成为领异标新,与天斗与地争,傲睨万物!一路上坎坷千万,却也没有阻挡住他的脚步。或许有人说他贪婪,残忍!的确,只要是灵石宝物都会被他收进囊中,对于敌人更是不会心慈手软。他的热血,关心和微笑,只会留给身边的人!?和主角一般,一路艰辛走过,不放手,不放弃,绝对会完本!在世界上的那一天,一股彩色的东西从地底涌上来,在那之后,世界都变了········游戏俱现,五开玩家李长生,突然获得五个号的修为! 别人满级200,李长生:“我1000级什么鬼?” 别的玩家只能选一个职业,李长生:“你见过八块腹肌的法师吗?” 异世觉醒却不知自己是远古主宰,却不知挚爱也身处异世 。 如蝼蚁却肩负重任 。 故人归红颜来,人生如飞驰终成大能 。 抵破灭创万世辉煌 。来自星辰的启示, 人与神明相抗争。 超前进化的智慧, 痴迷幻梦不愿醒。 败军之将,梦途惊醒,逆天改命,铸就新(醒)程。 在一个平平无奇的城市里,且看它游戏人生!意外穿越来到平行世界。 陈宇绑定了“究极治愈游戏系统。”开启了新的人生。 只不过.... 这治愈游戏好像有些不同。 303公交往事的护士女鬼姐姐来治愈你。 青峰精神病院的慈祥老奶奶来治愈你。 寂静中学的柴刀学妹告诉你沉默是金。 牛角村的小嫂子告诉你要相信唯物主义。 一个个游戏被陈宇发布出来,而他家里的刀片已经堆积如山。 所有玩家都在拼命地寻找着他的住处,纷纷表示想要“友好拜访。” 意识传送开始祝您好运。 这是哪?我回来了? “回到过去,改变未来,你只有一个月时间,首领!” “如果重新遇到我,你还会爱上我吗?” 世界毁灭,我已特殊的能力,带领人类杀出一片净土,但因病毒觉醒,无法根除,回到未来,改变一切。 血腥,杀戮,末世降临。丧尸?巨人?那你吃我一锤! 丧尸横行,巨人泛滥,无限重启,爆笑开局! 俄不活啦!!啊呜呜! “你们很般配,果然这个世界不管怎样,都回不到正轨,如果你选择他,那就跟他走吧!”人只有在失去时,才懂得珍惜。 前世萧辰因为沉迷赌博,导致家破人亡,妻子自杀,女儿走丢。 等到再找到女儿时,已经是一具冰冷的尸体。 “她本来可以不死的……但她一个人长大真的太不容易了,16岁便患了肾衰竭,她需要换一颗肾,只有你可以救他,但常年酗酒你的肾早就坏了,救不了她!” “她现在才18岁,还没交个男朋友……为什么先死的不是你!” 在好友的痛斥中,萧辰悲痛欲绝,昏死过去。 还好上天给了萧辰一个重来的机会。 当他再度睁开眼睛时,竟然发现自己穿越回了妻子自杀的前一天。 于是他决定洗心革面,用一生的时间来弥补自己前世的过错,让自己老婆和女儿过上最好最幸福的生活。徐弘文本是一个工地包工头,后来世人称他披肩客之神,一个可以影响全球物价走势的神级大佬。 为了接工程,他小小年纪熟悉各路潜规则; 为了拿项目,他只身一人手持板砖大战钢管队; 为了签合同,他带领兄弟干翻亚丁湾南岸索马里海盗; 为搏,,,红颜一笑,他改变世界时尚风向。。。。。。
网站首屏 博客群营销高端网站制作公司 信息安全产品评测 网站模板 广州h5设计网站公司 沙井做网站 山西网站制作公司哪家好 网络营销行为 信息安全管理技术 郑州网络营销技术学校 制作外贸网站的公司简介 政府对网络营销政策 企业网络安全系统 全国信息安全大赛 网站设计公司无锡 营销综合平台建设 网络信息安全课件 网络营销行为 互联网营销 步骤 泰州网站建设 网站的区别 学字体网站 网络安全法公安部 优秀设计作品网站 沈阳建设公司网站 网站设计公司无锡 网络营销竞争大吗 信息安全管理体系定义 本地郑州网站建设 深圳做企业网站的公司推荐 网络安全法 讲解 信息安全都有哪些大学 信息安全等级保护含义 运营商网络安全方案 漳州做网站 网络安全大会2016 电子信息安全 信息安全杂志 信息安全产品评测 信息网络安全ppt 茶叶网站建设 北京知名信息安全公司排名 免费建站网站有哪些 深圳网站推广 网络营销之黑客技术 石家庄网站建设找哪家好 郑州网络营销技术学校 台州网站建设企业 信息安全在线实验室 百度网络营销搜索推广 武汉专业网站建设 网络营销公司 东软网络安全工作室 网络安全 标准 常见网络安全漏洞 soc 信息安全 2017网络安全论坛 信息安全防范贴吧 做个简单网站大概多少钱 2017网络安全论坛 学字体网站 网络安全政策解读 网络安全审查委员会 网站首屏 南京电商网站建设公司排名 成都 企业 网站建设 成都 企业 网站建设 企业网络营销解决方案 常见网络安全的威胁和攻击有哪些 单位网络安全监测和预警情况 鄂尔多斯网站建设 永恒之蓝 网络安全 公安部网络安全产品销售许可证查询 个人信息安全读取彩信 互联网营销就业优势和劣势 网络安全化草案 湘潭网站seo 信息安全在线实验室 网络安全方案建议 网络营销与网络销售的关系 专注合肥网站建设汽车软文营销案例 营销软件网站模板|织梦营销软件网站模板 商务营销助手 非 营销软件网站模板|织梦营销软件网站模板 商务营销助手 非 网络营销公司 番禺网站优化 湘潭网站seo 网络安全法公安部 电子信息安全 cdn网络安全 互企业信息安全管理策略 郑州网络营销技术学校 常见网络安全漏洞 深圳网站推广 网络营销工程师培训 网络安全 标准 北大信息安全 考研 个人信息安全读取彩信 网络安全传奇 网络科技网站设计 霸屏营销推广 优质公司网站 网站主页设计 网站的区别 全网营销招聘信息 大连网站设计公司排名 百度网络营销搜索推广 信息网络安全ppt 信息安全防范贴吧 制作外贸网站的公司简介 五级网络安全状况 危 信息安全有哪些应用 网站重定向 中华人民共和国网络信息安全标准,-1 网络安全法 讲解 网络安全法 讲解 优质公司网站 全国网络安全大会 制作外贸网站的公司简介 石家庄网站建设找哪家好 网络安全必读书籍推荐 国家信息安全相关政策,-1 网站制作视频教程 网络安全之防火墙课题简介 2017网络安全峰会 小企业网络安全方案 北京市网络与信息安全信息通报中心 中国区2010第一季度网络安全威胁报告 鄂尔多斯网站建设 青岛手机网站建设 东软网络安全工作室 网络安全审查委员会 企业网络安全系统 工作+信息安全 网络安全的书籍推荐 网络安全政策解读 保护网络信息安全 互联网营销 步骤 网站布局有哪些常见的 信息安全等级保护含义 网络信息安全技术网站 常见网络安全漏洞 深圳网站推广公司 信息安全产品评测 做个简单网站大概多少钱 台州网站建设企业 网络信息安全课件 网络信息安全课件 网络安全之防火墙课题简介 网络营销工程师培训 保定网站制作 我国网络营销环境现状 如果做到信息安全苏州专业网站设计制作公司 永恒之蓝 网络安全 网络营销之黑客技术 产品网络整合营销方案 信息安全都有哪些大学 国家网络安全宣传活动 网站红色 网络安全信息安全实验室 网站的区别 网站布局有哪些常见的 soc 信息安全 营销培训 全国信息安全大赛 网络营销竞争大吗 网络安全名单 兰州网站建设公司排名 武汉专业网站建设 复旦 信息安全 漳州做网站 百度网络营销搜索推广 网站模板 2017网络安全论坛 沈阳建设公司网站 长沙建网站公司 广州h5设计网站公司 郑州商城网站建设 京东商城的整合营销 网络信息安全技术网站 产品网络整合营销方案 沧州做网站 cpa营销 网站页面设计稿 已有域名 搭建网站 上海信息安全服务资质咨询,-1 网络营销的劣势是什么 深圳做企业网站的公司推荐 法国网络安全 网络安全方案建议 全国网络安全大会 如何做全网营销方案 网络安全政策解读 广州h5设计网站公司 网络管理与网络安全 张新 网络安全与管理 网站主页设计 网站站制做 信息安全管理体系定义 茶叶网站建设 单位网络安全监测和预警情况 产品网络整合营销方案 兰州网站推广 德州网站制作台州外贸网站建设 网络安全产品 选型 信息安全都有哪些大学 网络攻击对信息安全的主要影响 单位网络安全监测和预警情况 互联网网络安全信息通报实施办法 北邮 网络安全研究 信息安全等级保护 费用 工作+信息安全 网站设计公司无锡 思考式体验营销 信息安全专业认证 常见网络安全的威胁和攻击有哪些 高校网络安全评估报告 保护网络信息安全 网站备案与域名关系 泰州网站建设 网络安全信息安全实验室 企业网络营销解决方案 北大信息安全 考研 公安部 网络安全 415 兰州网站建设公司排名 兰州网站推广 全国信息安全大赛 法国网络安全 柳州做网站 东营网站建设 茶叶网站建设 网络安全的书籍推荐 信息安全有哪些应用 注册信息安全管理人员 青岛手机网站建设 如何利用网站来提升企业形象 深圳网站推广公司 本地郑州网站建设 政府对网络营销政策 个人信息安全读取彩信 优秀设计作品网站 外贸模板网站深圳 网络安全大会2016 网络安全大会2016 郑州网络营销技术学校 免费建站网站有哪些 网络安全云管理平台 信息安全管理技术 b2b营销推广 武汉专业网站建设 深圳做企业网站的公司推荐 简述网络营销内容 网络营销是通过购物的情景变换将产品直接介绍给终端用户以获取利润 网络安全警示 沧州做网站 重庆营销策划 顺德网站建设基本流程 优秀设计作品网站 信息安全加密技术 东南亚 网络安全 成都 企业 网站建设 cnnvd(中国国家信息安全漏洞库)一级技术支撑单位 名单 cdn网络安全 国家信息安全相关政策,-1 网络营销行为 山西网站制作公司哪家好 网络安全化草案 沙井做网站 搜索引擎营销 关键词网络安全威胁什么意思 网络安全信息安全实验室 谷歌营销 网络营销行为 网络安全简短专用术语 酒店网站建设公司 南京电商网站建设公司排名 漳州做网站 营销软件网站模板|织梦营销软件网站模板 商务营销助手 非 网络科技网站设计 优质公司网站 信息安全在线实验室 石家庄网站建设找哪家好 兰州网站建设公司排名 cpa营销 常见网络安全的威胁和攻击有哪些 互企业信息安全管理策略 企业网络安全系统 2017网络安全峰会 保定网站制作 网站红色 长沙建网站公司 专注合肥网站建设汽车软文营销案例 专注合肥网站建设汽车软文营销案例 顺德网站建设基本流程 网络安全产品 选型 企业网络安全系统 网络营销工程师培训 网络安全名单 博客群营销高端网站制作公司 永恒之蓝 网络安全 东软网络安全工作室 百度网络营销搜索推广 网络安全之防火墙课题简介 网络信息安全技术网站 国家网络安全宣传活动 沈阳建设公司网站 网站红色 网络营销与网络销售的关系 个人信息安全读取彩信 网络安全法 讲解 网络安全审查委员会 cnnvd(中国国家信息安全漏洞库)一级技术支撑单位 名单 五级网络安全状况 危 我国网络营销环境现状 鄂尔多斯网站建设 信息安全专业认证 大连网站设计公司排名 网站制作视频教程 信息安全等级保护含义 网站备案与域名关系 2017网络安全论坛 网络安全 标准 网络安全方案建议 中华人民共和国网络信息安全标准,-1 中华人民共和国网络信息安全标准,-1 东软网络安全工作室 信息安全防范贴吧 全国信息安全大赛 安徽信息安全测评中心 建网站程序 网络安全法公安部 全网营销招聘信息 soc 信息安全 互联网营销就业优势和劣势 产品网络整合营销方案 网站模板 沙井做网站 信息安全在线实验室 电子信息安全 网站重定向 青岛手机网站建设 南京电商网站建设公司排名 营销培训 推荐人营销 网站站制做 信息安全专业认证 运营商网络安全方案 b2b营销推广 山西网站制作公司哪家好 泰州网站建设 义乌网站建设 中国区2010第一季度网络安全威胁报告 信息安全专业认证 重庆营销策划 信息安全有哪些应用 顺德网站建设基本流程 酒店网站建设公司 网站首屏 搜索引擎营销 关键词网络安全威胁什么意思 营销综合平台建设 思考式体验营销 茶叶网站建设 也曾轻狂终焉的花与羽命运之人三国乱斗我在行言与缄默巴别塔陨落极品的重生人生入江湖,莫回首一指奇仙缘蛇皇之异界纵横龙啸苍途十方:是你们逼我称帝的!俗世仙山刍狗的逆袭上仙武乘风破天机系列之困天迷龙局吞噬帝尊南战天娘胎难产:开局就将母亲堆成仙冷轻侯之梦断回魂进化游戏Zero前世今生的梦境解析微信公众号【紫晴前世今生】 如何预防冤亲债主的干扰?【www.richdady.cn】 儿子抑郁症的症状与诊断微信号码:qq383550880 婴灵的超度与化解微信号码:qq383550880 什么原因意外的前世记忆微信号码:qq383550880 什么原因意外的前世解析微信号码:qq383550880 升迁障碍的咨询技巧【www.richdady.cn】 孩子厌学微信公众号【紫晴前世今生】 失业的前世因果微信号码:qq383550880 婴灵的超度方法【www.richdady.cn】 外灵的种类微信号码:qq383550880 存不住钱的解决方法微信号码:qq383550880 通灵与心理学结合微信公众号【紫晴前世今生】 老公家暴的应对方法【www.richdady.cn】 忧郁症的自我提升微信公众号【紫晴前世今生】 与老公前世的影响分析【www.richdady.cn】 家庭关系中的矛盾如何解决?【www.richdady.cn】 感情纠纷的情感重建方法有哪些?微信公众号【紫晴前世今生】 有官司的法律咨询微信公众号【紫晴前世今生】 与男友前世的前世修行【www.richdady.cn】 前世今生的故事有哪些经典案例?【www.richdady.cn】 升迁障碍的改运方法微信号码:qq383550880 祖灵微信公众号【紫晴前世今生】 升迁障碍微信号码:qq383550880 佛教视角下的前世今生微信公众号【紫晴前世今生】 婴灵、邪灵、祖灵咨询【www.richdady.cn】 与公婆前世的前世修行【www.richdady.cn】 孩子厌学微信公众号【紫晴前世今生】 亲子关系的前世记忆【www.richdady.cn】 冤亲债主干扰的超度方法微信公众号【紫晴前世今生】 儿子抑郁症的心理调适微信号码:qq383550880 孩子学习不好的案例分享微信号码:qq383550880 耳鸣微信公众号【紫晴前世今生】 大龄剩女的前世记忆微信号码:qq383550880 升迁障碍的职场策略【www.richdady.cn】 婴灵对家庭的影响微信公众号【紫晴前世今生】 与男友前世的前世案例微信公众号【紫晴前世今生】 前世老公的识别方法微信号码:qq383550880 家庭关系的心理调适微信号码:qq383550880 婴灵的超度流程【www.richdady.cn】 耳鸣的解决方法微信公众号【紫晴前世今生】 潜能开发与自我提升【www.richdady.cn】 耳鸣的医学检查微信号码:qq383550880 自闭症的环境影响微信公众号【紫晴前世今生】 克服职场升迁障碍微信号码:qq383550880 前世老婆【www.richdady.cn】 家庭关系的和谐共建方法有哪些?微信公众号【紫晴前世今生】 如何解决感情纠纷?微信公众号【紫晴前世今生】 财运问题在线微信号码:qq383550880 事业不顺的职场建议有哪些?【www.richdady.cn】 公司破产威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 有官司的解决方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 缺心眼的咨询技巧咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 纠纷的前世因果咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 忧郁症的前世记忆【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 无形干扰的心理调适【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵干扰咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世老婆的前世因果咨询【www.richdady.cn】√转ihbwel 大龄剩女的职场发展【www.richdady.cn】√转ihbwel 孩子厌学的心理调适【www.richdady.cn】√转ihbwel 外灵干扰对日常生活的影响咨询【www.richdady.cn】√转ihbwel 与老公前世的影响分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的前世记忆【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 财运不佳的财富管理方法有哪些?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 什么原因意外的前世缘分【www.richdady.cn】√转ihbwel 纠纷的心理调适【www.richdady.cn】√转ihbwel 前世缘份的前世故事【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 升迁障碍的职场规划如何制定?【微:qq383550880 】√转ihbwel 孩子压力大的咨询技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婴灵的超度与心理安慰咨询【www.richdady.cn】√转ihbwel