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封信、1万块钱、1枚扳指,1瓶老酒。 “小烨:18岁前,不许喝酒,不许找我们。” 今晚过后,苏烨就满18岁了。 喝不喝那瓶酒呢? 喝了之后将会发生什么? 这是苏烨面临的两个问题!黄帝纪年5000年,地球面临危机,李轩携天道塔穿越玄黄大陆,化名李轩辕,得娇妻叶清璇,借助众仙传承一步步走向强大,太上老君的道德经,齐天大圣的火眼金睛,陆压散仙的斩仙飞刀……当他走出玄黄大陆时,降临盘古星域,踏上了寻找地球之旅,天道塔与修复地球,地球与玄黄大陆相通。天道意识守护地球,李轩辕便踏上了寻找众仙的路,冲破重重阻拦,终至乾坤圣界,携众仙之力,战胜乾坤圣主,后弃天道塔独身前往至高神界,寻找天道碎片,补全天道,以一己之力,踏遍无数小世界、三千星域、七十二圣界,至高神界九州,与神界主宰决战在无尽星空,神界主宰却一招败于李轩辕,两位巅峰存在竟一笑泯恩仇,原是那主宰以无尽分身游历诸天,早与李轩辕亦师亦友结为至交,最终主宰依旧掌控诸天,天道碎片也已集齐,但天道依旧选择守护地球,却看那天地最强李轩辕在地球携妻隐居。欲问此生何所求,踏诸天,问道巅峰,无愧于心,唯逍遥自在与美色长存。  弑荒年间,这是人族最为黑暗的年代,万族并立,人族最为弱小,不是为奴,便是成为其他种族的食物。   千源星   林叶所建立的灵槐门派刚登顶世界,剿灭恶人,却发现自己居然穿越了!   面对陌生的世界,原以为自己孤苦伶仃,却发现同样穿越过来的居然不止自己一个?武林盟主的儿子是个练武废柴 意外觉醒,竟然可以隐身了!!! 父亲被暗杀,从此走上了练武复仇的道路。
目前个人网民的网络安全状况(结合2013年统计报告说明) 网络安全系统直播是网络营销嘛 朋友圈营销的利弊 网络安全生态峰会 官网 蛋糕店如何做饥饿营销策略 进入教育行业信息安全的企业 俄罗斯 网络安全 创新的大良网站建设 专业网站设计建站 太原网站公司 冤亲债主干扰的前世记忆咨询【www.richdady.cn】 与男友前世的影响分析【www.richdady.cn】 头脑混沌时如何提高注意力咨询【www.richdady.cn】 精神不振的生活习惯咨询【www.richdady.cn】 外灵干扰的环境影响咨询【www.richdady.cn】 感情纠纷的情感和解【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 升职加薪的障碍分析【微:qq383550880 】√转ihbwel 头脑混沌的自我提升威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 缺心眼的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 性压抑的自我提升咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 心慌胸闷头晕的环境影响咨询【www.richdady.cn】√转ihbwel 儿子不读书咨询【www.richdady.cn】√转ihbwel 什么原因意外的前世缘分咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 性压抑的解决方法【σσЗ8З55О88О√转ihbwel 前世今生的轮回存在吗?【σσЗ8З55О88О√转ihbwel 失业的心理调适咨询【σσЗ8З55О88О√转ihbwel 头脑混沌的原因分析【企鹅383550880】√转ihbwel 财运不佳的心理调适咨询【σσЗ8З55О88О√转ihbwel 与老公前世的前世缘分咨询【www.richdady.cn】√转ihbwel 外灵干扰的解决方法咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 广州h5网站开发 聊城网站推广 网络安全教程2015 邮箱营销软件哪个好用吗 网络安全条例 简单的网站模板 当前信息安全面临的威胁 电子营销就业率 网站类型 目前个人网民的网络安全状况(结合2013年统计报告说明) 做网站 专业的网站设计师 西安专业建网站 企业信息安全的问题东莞外贸营销 网络安全运维流程图 创新的大良网站建设 个人做网站 网络安全应急响应 信息安全服务认证中心 广州网站建设信息科技有限公司 网络安全事件处理案例 衡水做网站公司 西安专业建网站 动画网站模板 深圳市移动端网站建设 上海信息安全厂商 全网微营销 网络安全基线标准 河南网络安全攻防大赛 自己弄个网站 兰州网站建设报价 邢台网站建设 国际信息安全新闻网站有哪些 上海信息安全招聘 海南网站建设 金融行业信息系统信息安全等级保护测评指南,-1 .网站排版 塘沽网站建设 网络安全条例 传统营销策略的优点 企业信息安全的问题东莞外贸营销 网络安全运维流程图 北邮网络安全学院 动画网站模板 企业信息安全内容 河南网络安全攻防大赛 网络营销课程感想 威胁网络信息安全 朋友圈营销的利弊 三只松鼠营销建议 《美国网络安全法》 成都国家信息安全中心 移动设备 信息安全 宝鸡做网站 高大上网站建设公司 企业营销 河南网络安全攻防大赛 成都学校网站制作 系统信息安全等级 国家网络安全与信息化领导小组 个人注册网站.com 商品营销软件 南京在线网站制作 国内网络安全平台 信息安全 中心信息安全 产业 星巴克和微信营销 网络安全设备 安全威胁 网站建设策划书 高大上网站 信息安全服务认证中心 上海信息安全招聘 请问大连谁家做网站 建网站方法 国际信息安全新闻网站有哪些 淄博做网站公司有哪些 建设网站教程 国内网络安全平台 网络安全系统直播是网络营销嘛 虎门做网站 银川网站设计怎么样 郑州最好的网站建设 展示型网站设计 4p营销组合策略包括 蛋糕店如何做饥饿营销策略 传统营销策略的优点 郑州最好的网站建设 广州h5网站开发 门户网站制作 全网网络营销 广州h5网站开发 安徽合安房产营销策划有限公司怎么样 专业的外贸网站 南昌网站定制开发公司 衡水做网站公司 成都国家信息安全中心 网站建设公司 信息安全管理法规,-1 全网微营销 河南网络安全攻防大赛 涿州做网站 俄罗斯 网络安全 企业信息安全内容 网站流量超 进入教育行业信息安全的企业 专业网站设计建站 网站建设一条龙 三只松鼠干果营销方案 江西神州信息安全评估中心 工控信息安全 介绍 网站开发制作 企业信息安全的问题东莞外贸营销 建单页网站 日常网络安全监测 临沂学营销 网站类型 网络安全基线标准 石家庄的电商网站建设 深州网站 义乌网站建设 高大上网站 北邮网络安全学院 什么计算机网络安全 建单页网站 武汉建网站 信息安全等级测评工作 专门学网络营销的app 塘沽网站建设 建网站方法 专业网站设计建站 系统信息安全等级 蛋糕店如何做饥饿营销策略 学校网站开发 信息安全服务认证中心 领袖型营销 计算机信息安全资质 信息安全等级保护ppt 做网站 计算机信息安全资质 建网站方法 西安成品网站建设 广州网站建设信息科技有限公司 台州市网站建设 网站的不同类 全网网络营销 网络安全 ctf 淄博做网站公司有哪些 海南网站建设 个人注册网站.com 郑州最好的网站建设 软营销例子 什么是网络安全扫描 金融行业信息系统信息安全等级保护测评指南,-1 高大上网站建设公司 网络安全生态峰会 官网 三只松鼠营销建议 营销型 杭州营销策划方案 微企免费网站建设 网络安全建设与维护 国家网络安全与信息化领导小组 做网站一般用什么语言 .网站排版 领袖型营销 网络安全 ctf 中国信息安全认证中心诈骗 做网站一般用什么语言 门户网站制作 宝鸡做网站 2014年 网络安全形势 门户网站制作 自助网站 网站的价值与网站建设的价格 国家应对网络安全 免费创建网站 学校网站开发 微博网络营销案例 邢台网站建设 信息安全行业新技术 网络营销的价值是什么意思 南昌网站定制开发公司 深州网站 信息安全cism 进入教育行业信息安全的企业 微企免费网站建设 广州h5网站开发 当前信息安全面临的威胁 成都建设网站首页重庆网络营销推广辅导 网站推广方法 怎么维护社交网络安全 朋友圈营销的利弊 信息安全等级保护ppt 动画网站模板 国家信息安全办公室 建单页网站 深圳搜索引擎营销企业 工控信息安全 介绍 建设网站教程 成都国家信息安全中心 高大上网站 免费创建网站 网站建设一条龙 新余网站建设 专业的外贸网站 移动设备 信息安全 动画网站模板 广西信息网络安全报警网站 国内网络安全平台 阿里云 信息安全 企业信息安全的问题东莞外贸营销 新浪微博内容营销 2014年 网络安全形势 聊城网站推广 《美国网络安全法》 企业信息安全的问题东莞外贸营销 青岛模板化网站建设 上海信息安全厂商 什么计算机网络安全 无锡网站推 江西神州信息安全评估中心 高大上网站 衡水做网站公司 成都建设网站首页重庆网络营销推广辅导 安徽合安房产营销策划有限公司怎么样 武汉建网站 请问大连谁家做网站 邮箱营销软件哪个好用吗 广州h5网站开发 计算机信息安全资质 太原网站公司 网站的价值与网站建设的价格 .网站排版 自助网站 网络安全建设与维护 河南网络安全攻防大赛 2017网站风格 淄博做网站公司有哪些 金融行业信息系统信息安全等级保护测评指南,-1 西安做网站 信息安全服务认证中心 什么是事件营销推广 网站用橙色 西安专业建网站 公司营销 网络安全生态峰会 官网 无锡网站推 微网站 网络安全教程2015 高大上网站建设公司 学校网站开发 广州网站建设信息科技有限公司 什么是事件营销推广 银川网站设计怎么样 网站建设策划书 邢台网站建设 信息安全等级测评工作 蛋糕店如何做饥饿营销策略 绿盟网络安全笔试题 信息安全等级保护ppt 微企免费网站建设 门户网站制作 医疗行业网络安全现状分析 移动设备 信息安全 杭州营销策划方案 上海信息安全招聘 兰州网站建设报价 全网网络营销 星巴克和微信营销 信息安全行业新技术 信息安全 中心信息安全 产业 国家信息安全办公室 企业信息安全内容 网站用橙色 高大上网站 公安部 网络安全产品 网站推广方法 进入教育行业信息安全的企业 目前个人网民的网络安全状况(结合2013年统计报告说明) 信息安全认证体系,-1手机版免费申请微网站 龙岩网站制作 江西神州信息安全评估中心 国家信息安全保护等级 龙岩网站制作 网站用橙色 建单页网站 涿州做网站 营销组合四大要素 深州网站 网络安全基线标准 青岛模板化网站建设 电子营销就业率 朋友圈营销的利弊 新余网站建设 好的网站建设商家 成都学校网站制作 怎么维护社交网络安全 网站流量超 西安做网站 北邮网络安全学院 全网微营销 新浪微博内容营销 上海信息安全厂商 中山营销型网站设计 建设网站教程 深圳搜索引擎营销企业 广州h5网站开发 网站类型 成都建设网站首页重庆网络营销推广辅导 国际信息安全新闻网站有哪些 怎么维护社交网络安全 广州h5网站开发 兰州网站建设报价 网络安全教程2015 2017网站风格 兰州网站建设报价 南京在线网站制作 展示型网站设计 五大营销系统是什么意思 网络安全建设与维护 五大营销系统是什么意思 软营销例子 北邮智能网络安全实验室 微企免费网站建设 信息安全认证体系,-1手机版免费申请微网站 无锡网站推 个人注册网站.com 俄罗斯 网络安全 个人注册网站.com 网络安全教程2015 2017网站风格 兰州网站建设报价 西安专业建网站 集团网站建 简单的网站模板 网络安全基线标准 高大上网站 陕西省第三届网络安全 网站流量超 杭州营销策划方案 做网站一般用什么语言 石家庄的电商网站建设 深圳市移动端网站建设 武汉建网站 临沂学营销 门户网站策划书 企业信息安全的问题东莞外贸营销 国家信息安全保护等级 陕西省第三届网络安全 全网微营销 当前信息安全面临的威胁 网络安全通报预警机制