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
上海高端建设网站徐州html5响应式网站建设自动发货 北京云主机网站源码 phpcms_v9_utf8电子邮件营销方式原型图网站东莞长安网络营销招聘信息网络安全竞赛试题济南营销型网站公司信息安全测评要求,-1信息安全工程中心地址“蓝星保卫战一级将士贺华,恭送龙将军!” “伏羲舰队全体舰员…恭送龙将军!” 九九年蓝星保卫战一役在跨越时代的钟声和烟花中,伴随着第一批零零后的婴儿哭声蓝星赢来了新的纪元! …… 二十年后,一个男人从南极的最深处走出,他承载着九九年的绝大部分的过往给所有的蓝星人类带回一个巨大的秘密! “什么?” “九九年的外星保卫战他们战胜的只是先锋部队,一**炮灰…!” “时隔二十年,真正的入侵即将正式展开!” 人类危机存亡之际,原本“死去”二十年的伏羲舰队舰长龙五从南极最深处带着人类最后的希望走出! “我名龙五,龙的传人,武安天下!” “大厦将倾在即,愿挽天倾者随我一起…发起反攻!”楚长安重生到了八十年代。 新婚夜老婆就要上吊,楚长安一个激灵,差点吓尿。 什么?原身是个傻子! 没关系,楚长安用亲身经历告诉大家什么叫做傻人有傻福。 “老子不干了,我要去度假,你爱怎么管就怎么管&amp;quot;“可是老板…&amp;quot;还没等时空鸡说完小金刚就插上话:“那你就是代理老板了,给我管理好这个时空,我直接摆烂就是玩&amp;quot;说完小金刚傅便穿越时空,只留下时空机在那呆呆地站着 豪气在,情义在,获龙符重修炼。怎奈处处有不公,无慧眼,想忍一时风浪,风浪却不休。三尺紫青剑,一路杀魔斩怪,皆为九界公平。以战止战,狂亦非狂,吾以吾血铸轩辕![纷扰如迷雾,逍遥且徐行] 入梦方醒,方觉大道维艰。从小世界意识回归醒来的大光头,抬手摸着自己脑瓜低吟着“无量天尊。” 看着身边传讯符,回忆着这次化身从婴儿到意气少年,又度过颠簸抗争的青年路程,往后便好似不记得自己有过壮年中年似的,回首时已在疑惑困顿中到了老年。 化身一生寂寥糊涂过,只留下一首连通顺都算不得的唯有悔恨的“一年一岁婴至此,一时一秒得与失。稻草压身抵千斤,默然回首如何持。神杂性善恶七情己,人和人白白入灰多。己识多实错分年,霎那蹉跎七十婴。” 又有那好似从老年到青年活着的感慨:“何所思何所愚何所怠,七十婴五十少三十明。天色长空人自老,道存事存时不存,上下空有物竞乾坤灭,事合人思万中无一寻。谁家孩儿拿那炮竹当烟花鸣一曲,潜游无欲无求后同求不在求呢。苦无一用怎是迷生。” 民国小道士玄虚被系统团子陪伴跨越命运长河,成就命运魔神。是混沌中众位魔神的阴谋算计,还是临死时回光返照的大梦一场? 初见鸿钧,是命运分支的偶然,还是命运运行的必然? 本体沉睡中不断变强,是冥冥中的算计,还是命运的馈赠? 纯粹的混乱是否真的没有意义存在? 世界的毁灭能和意识有多大的联系? 当元宇宙的概念引入适合野蛮生长的文明,对生命体是好是坏? 杀兄弑父能被文明的生命体称为英雄,好人不长命,祸害遗千年。又当又立的恶心生命体真实存在,是真是假? 众生为棋子,如何让他们在虚伪和愚昧中逐渐消亡? 当有棋子超脱棋盘,万法皆空是否已成定局? 成住坏空的佛家魔咒;孤阴不生,独阳不长的道家真理是不是所有世界的真谛? 绝对的理智,绝对的理性,世界会因此变好,还是持续变坏? 混沌中魔神们的俄罗斯套娃,无数的洪荒在命运中起起伏伏。 修仙的真实世界最纯洁是怎样,最残忍又是怎样? 让牲畜们相信黑森林法则,零和博弈,不要让他们有反抗的机会。苍天啊,明明是穿越,你为啥还要买一送一。 刚得知自己兄长也是穿越者的孙国瑞不由得闭上了眼睛,算了,还是装傻当个闲散王爷吧。平行世界的夏国,娱乐产业空前繁荣。 女团、综艺,脱口秀、西洋乐器,几乎掠夺了观众的所有目光。 明星宗洋媚外,以会唱外文歌沾沾自喜,以能和外国明星合作为荣。 蓝湛,就重生到了这样一个乌烟瘴气的世界。 因为无知,所以抵触。这世界,令人心寒。 没人经历过千年琵琶万年筝,一把二胡拉一生的坚持; 没人感受过戏曲那能将人心揉碎又缝合的独特腔调; 没人了解所谓的脱口秀,不过是相声的一种表演方式而已。 一曲二泉映月,一场霸王别姬。 蓝湛要让人明白,不论是艺术,还是取悦观众,国风国粹都是祖师爷!【系统+末世+修仙+恶搞+无敌+爆笑】 苏依山重生之后,发现整个世界变了,凶兽横行,神祇鬼怪降临。 他却被系统诅咒,他身上的一切因果都将反转。 剑神:“我这一剑斩中他的大动脉了,必死无疑。” “为什么他还在喷血,就是不死?” 苏依山:“兄弟,看你伤得不轻,我给你来个治疗术。” “WDNMD!老子人没了!” …… 苏依山:“听说你很凶,今天你不打死我,就别想走出这道门!” 前期境界练气境、练力境、内壮境、兼修境、不息境、气变境、金身境、御气境。每个生灵都有劫体,谁能为极仪一战?最终是否成为纯极仪的世界呢?
互联网 微信整合营销 冷色调网站 网络安全办公室王主任 网络营销网上观察法 温州微网站制作公司推荐 网络营销目标市场假设 广州做网站信科分公司 欧美工控系统信息安全事件 北京网络安全公司 珠海集团网站建设外包 学习成绩差的辅导方法咨询【www.richdady.cn】 老公家暴的原因分析【www.richdady.cn】 家庭中常见的意外事故原因咨询【www.richdady.cn】 失业的咨询技巧咨询【www.richdady.cn】 精神不振的前世记忆【www.richdady.cn】 大龄剩女的咨询技巧咨询【企鹅383550880】√转ihbwel 前世老公的前世因果【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 意外的前世缘分【微:qq383550880 】√转ihbwel 前世缘份的咨询技巧咨询【σσЗ8З55О88О√转ihbwel 性压抑的前世因果咨询【www.richdady.cn】√转ihbwel 发育倒退威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 去世的母亲的前世故事【企鹅383550880】√转ihbwel 婚姻生活不顺的原因分析【微:qq383550880 】√转ihbwel 财运不佳的财运提升咨询【企鹅383550880】√转ihbwel 财运不佳的财运提升【微:qq383550880 】√转ihbwel 意外的前世影响【σσЗ8З55О88О√转ihbwel 人际关系不好的原因分析咨询【σσЗ8З55О88О√转ihbwel 大龄剩女的咨询技巧威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 强迫症的案例分享【www.richdady.cn】√转ihbwel 迟缓儿的案例分享【企鹅383550880】√转ihbwel 专业的高端企业网站 济南营销型网站公司 昆明网站推广优化 连云港网站建设 linux服务器网络安全 信息安全产品清单 信息安全企业排行 南京营销型网站 微博营销的swot 绵阳网站建设 网络安全相关的暗网 怎么做自己的网站? 淘宝网络营销工作 营销环境 阿图什网站 京东校园营销 售后服务网站 信息安全就是网络安全 自动发货 北京云主机网站源码 phpcms_v9_utf8 广州网站建设优化 企业网站趋势 信息安全等级保护证书 不属于网站后期维护 idc信息安全 信息安全工程中心地址 网络营销宣传方案 国家网络安全管理员的认证 网络营销策划书结构 网络营销网上观察法 烟台制作网站的公司 信息安全企业排行 国家信息安全认证服务资质 网络营销必看 书籍推荐 京东校园营销 请问如何对以上传的网站进行内容的维护需要注意哪些事项 电商商城网站建设 南京营销型网站 营销分组微信营销的好处坏处 山东省大学生网络安全 微网站备案佛山新网站建设特色 欧盟 网络安全审查 学院网络安全解决方案 阿图什网站 互联网 微信整合营销 社会化营销 山东省大学生网络安全 淘宝营销。注重信息安全 安徽理工大学 信息安全,-1 怎样学好网络营销 莆田网站建设 珠海集团网站建设外包 山东济南网站制作优化 电子邮件营销方式 计算机网络安全课程设计报告 武汉 网站设计公司 网络营销的优势和模式 重庆网络安全测评机构 微网站备案佛山新网站建设特色 上海高端建设网站 广州做网站信科分公司 计算机信息安全检查 公司建网站多少钱 网络 信息安全 协会 怎么建网站 网络安全编程与实践 网络安全攻防演练平台 沈阳做企业网站的公司 网络安全服务机构向社会发布网络攻击 湖南衡阳网站建设 网络安全编程与实践 第三方支付网络安全 领域网站建设 山西网站制作公司 第三方支付网络安全 深圳手机集团网站建设 武汉 网站设计公司 网站如何申请微信支付 淘宝网络营销工作 linux服务器网络安全 网络营销必看 书籍推荐 请问如何对以上传的网站进行内容的维护需要注意哪些事项 信息安全测评要求,-1 眉山网站建设 网络安全办公室王主任 个人免费网站注册com 网络营销课程设计总结 电商商城网站建设 信息安全测评要求,-1 社会化营销 手机微信一体网站建设 网络安全竞赛试题 怎么做自己的网站? 网络营销必看 书籍推荐 湛江做网站 厦门app网站设计 苏州网站建设logo 网络营销手段 广州做网站信科分公司 国家信息安全认证服务资质 flash网站 公安部信息安全中心 营销对企业的重要性 网络营销营销理念 安徽理工大学 信息安全,-1 领域网站建设 网络安全服务机构向社会发布网络攻击 网站红蓝色配色分析 电商商城网站建设 网站开发技术 有深度网站 营销环境 动力无限做网站 佛山网站建设怎样做 建设网站的流程 网络营销课程设计总结 信息安全 是哪三者紧密结合的系统工程 快速做网站 网络安全专业的介绍 乐平网站建设 网络安全顾问 网站建设公司平台 河北网络安全周直播 动力无限做网站 企业网站策划方案 钦州网站建设 山东省大学生网络安全 冷色调网站 网络安全与加密 营销推广的含义 京东校园营销 淘宝营销。注重信息安全 玩具外贸网站模板 欧盟 网络安全审查 信息安全工程中心地址 请问如何对以上传的网站进行内容的维护需要注意哪些事项 欧美工控系统信息安全事件 网站的营销方法 烟台制作网站的公司 2017年网络安全大会 信息安全风险管理策略 网络安全法与网信工作 河北网络安全周直播 做网站合同 互联网内容分发网络安全防护检测要求 第三方支付网络安全 原型图网站 社交网络安全问题 微网站备案佛山新网站建设特色 信息安全 院士 京东校园营销 电话营销托管 网络营销网上观察法 数据信息安全 通知 成功企业的营销 网络安全信息法 美国 2000 网络安全攻防演练平台 绿盟网络安全 苏州市无线网络与信息安全重点实验室 电子邮件营销方式 产品展示型的网站功能有哪些 信息安全网络安全 漯河做网站 视频网站制作 第三方支付网络安全 佛山网站建设怎样做 网络安全等级保护定级 个人信息安全培训通知 东莞网站策划 东莞长安网络营销招聘信息 计算机信息安全检查 信息安全工程中心地址 信息安全测评要求,-1 产品展示型的网站功能有哪些 网络营销手段 湖南衡阳网站建设 怎么做自己的网站? 济南营销型网站公司 网络营销的优势和模式 4i营销理论的优缺点 苏州网站建设logo 成功企业的营销 重庆网站设计制作价格 网站如何申请微信支付 flash网站 重庆网络营销 怎么建网站 信息安全等级保护证书 安徽理工大学 信息安全,-1 珠海集团网站建设外包 网络安全相关的暗网 网站网络架构 沈阳做企业网站的公司 公安部网络安全保卫局v 鄂州做网站 青岛设计网站的公司哪家好 济南营销型网站公司 信息安全主要研究内容 乐平网站建设 网络营销必看 书籍推荐 网络安全归哪个部门管 冷色调网站 网络营销必看 书籍推荐 病毒营销 案例 近年 视频网站制作 珠海专业机械网站建设 营销推广的含义 数据信息安全 通知 自学营销 企业网站趋势 网站赚流量 有深度网站 河北网络安全周直播 网站网络架构 绵阳网站建设 网站开发技术 斗门网站建设 网络营销方案撰写 自动发货 北京云主机网站源码 phpcms_v9_utf8 南京营销型网站 京东校园营销 欧美工控系统信息安全事件 个人信息安全案例 快速做网站 华为网络安全测试工具 网络营销宣传方案 安徽理工大学 信息安全,-1 重庆网络安全测评机构 松原做网站 网络安全竞赛试题 社会化营销 钦州网站建设 电子邮件营销方式 信息安全 是哪三者紧密结合的系统工程 济南营销型网站公司 华为网络安全测试工具 做网站销售 国家信息安全认证服务资质 病毒营销 案例 近年 网络安全服务机构向社会发布网络攻击 网络营销课程设计总结 网络安全信息法 美国 2000 网络安全顾问 湖南衡阳网站建设 企业网站策划方案 徐州html5响应式网站建设 山东省大学生网络安全 互联网 微信整合营销 网络安全与加密 网络安全办公室王主任 京东校园营销 珠海专业机械网站建设 玩具外贸网站模板 学院网络安全解决方案 信息安全工程中心地址 无锡网站建设哪家专业 欧美工控系统信息安全事件 昆明网站推广优化 松原做网站 网站网络架构 乐平网站建设 建设网站的流程 山西网站制作公司 做网站销售 连云港网站建设 营销分组微信营销的好处坏处 网站开发技术 计算机网络安全课程设计报告 营销推广的含义 网络 信息安全 协会 信息安全企业排行 电商商城网站建设 公安部信息安全中心 社会化营销 国家网络安全局电话 网络安全竞赛试题 绵阳网站建设 网络营销必看 书籍推荐 顺的品牌网站设计信息 厦门app网站设计 怎样学好网络营销 网络营销手段 全面的手机网站建设 国家信息安全认证服务资质 个人信息安全案例 公安部信息安全中心 怎么建网站 网络营销营销理念 微博营销的swot 互联网内容分发网络安全防护检测要求 网络安全相关的暗网 漯河做网站 2017年网络安全大会 信息安全网络安全 绿盟网络安全 重庆网络安全测评机构 湖南衡阳网站建设 连云港网站建设 公安部网络安全保卫局v 钦州网站建设 厦门app网站设计 东莞长安网络营销招聘信息 网络营销资讯站 河北网络安全周直播 信息安全风险管理策略 产品展示型的网站功能有哪些 idc信息安全 网络营销的优势和模式 互联网内容分发网络安全防护检测要求 济南营销型网站公司 网站赚流量 山西网站制作公司 微网站备案佛山新网站建设特色 淘宝网络营销工作 温州微网站制作公司推荐 诊断式营销 网络营销网上观察法 信息安全风险管理策略 自动发货 北京云主机网站源码 phpcms_v9_utf8 请问如何对以上传的网站进行内容的维护需要注意哪些事项 网络安全攻防演练平台 怎么做自己的网站? 数据信息安全 通知 营销对企业的重要性 阿图什网站 网络安全法与网信工作 营销推广的含义 松原做网站 计算机网络安全课程设计报告 无锡网站建设哪家专业 网站赚流量 领域网站建设 河北网络安全周直播 网络安全归哪个部门管 绵阳网站建设 莆田网站建设 斗门网站建设 个人信息安全案例 自动发货 北京云主机网站源码 phpcms_v9_utf8 网络安全技术模块开发 京东校园营销 网络安全攻防演练平台 个人信息安全案例 国家网络安全管理员的认证 华为网络安全测试工具 电商商城网站建设 国家网络安全管理员的认证 网站建设公司平台 松原做网站 连云港网站建设 社会化营销