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成都网络营销哪家好2017信息安全峰会信息安全的成效赤峰建网站信息安全准入网络安全责任部门网络安全平台2017 昔日的位面第一宗门‘妖傀宗’圣主叶欢,因为争夺位面至宝八荒鼎,被诸多大帝围攻陨落,再入轮回与将门犬子夜欢灵魂融合。 废柴笑柄?我炼体术不坏不灭,谁与争雄? 家道衰落?我炼丹术冠绝位面,扶不起一个家族? 边疆失守?我打造的连弩刻有玄奥灵阵,可杀敌于千丈之外! 异族邪魔来袭,家园沦为炼狱?我炼制的妖傀无数,足以横扫八荒! 外面有一支神秘势力,就要统一大陆?无妨,那就是我一手扶持的顶级宗门! 圣域的一位老祖已经称皇称帝?莫怕,那不过是我当年随手炼制的一尊妖傀罢了!是意外吗?重生解开意外死亡之谜,一个叫欧阳宇墨的特种兵退役后惨遭陷害后重生初中那些所谓的神灵,在外星人侵略我们家园的时候,他们在哪儿?在我们的亲朋好友,我们的战士在战场上抛头颅,洒热血的时候,他们又在哪里?现在他们高调的出现在我们的世界,什么狗屁人类存亡调查,人类的命运从来都是掌握在我们人类手中,就让我来守护这饱受摧残的世界,就让我岳龙跨越这天堑,神挡。。。我便杀神!经历万千,只不过大梦一场,虽是一无所获,但也痛彻心扉。反省所有,或许,我真的就是一个没有人性的无耻混蛋。可惜,过去的无法挽回。 初始之地,在宇宙大爆炸之后诞生的一个大星球,混沌时代初,混沌大神盘古出现,混沌初开,混沌时代中期,混沌大神死亡,化身为三千魔神,从此,启三千神魔大战,导致初始之地破裂为无数星球,围绕最大的星球初始之地运行,三千神魔分别占领一方星球,混沌时代末,三千神魔死亡,混沌时代结束。蛮荒时代开启,无数世界开始出现各种文明,这些世界被人们依据大小和实力强弱分为三千小世界,十八中世界,两大世界(初始之地,冥界),各世界均有产生一些顶尖强者,传说有的已经超过了三千魔神的层次,无限接近或达到了盘古大神的层次。 天玄大陆就是三千小世界中的其中一个小世界,实力巅峰时候可以排进中世界前十,出现过很多顶尖强者。 十二中世界分别是龙界,凰界,鬼界,尸界,魔界,虫界,佛界,妖界,神魔大陆,丹界以及拥有各种天火的天火大陆。月高悬于空,星不见其影。 沉眠的暴君从历史中苏醒,漆黑的双翼划过破晓的黎明;巍峨古堡跨越了尘封的的记忆,矗立在洛尔维亚的群山之巅。 当头戴王冠的公主睁开双眼,从死亡归来的旅人重新握住剑柄—— 国王湖的水面不再平静,却依旧深不见底。荒古四凶兽,饕餮、穷奇、梼杌、混沌!  荒古四神兽,青龙,白虎,朱雀,玄武! 以及荒古瑞兽麒麟,齐聚龙渊脑海的神台之上。 在它们身后,竟然还拉着一尊神秘的铜棺! 铜棺苏醒,龙渊获得无上传承,开启逆天神藏。 从此,他驾驭九尊荒古巨兽,化身万界之王,踏平无尽神域。 诸天万界,漫天神佛,无不望风而逃,丧胆销魂!修神大陆,万族林立,武者为尊。少年段宁,受尽冷眼。偶得奇遇,从此逆天崛起,横空出世,修无上传承!天地正气在,英雄傲世来。一刀尽江河,一手握日月,共人间悲欢,历九世劫波。缘来行到水穷处,缘尽坐看云起时。世间毁誉,世人冷眼,能奈我何?道行乾坤,德载天下!萧瑟秋风,斗转星易,换了人间! 试看萧易觉醒蜕变,傲世苍穹,笑看风云!天才少年萧辰,灵台被族人夺取,沦为废人,受尽屈辱,幸而觉醒神物九龙塔,拜得神秘少女为师,吞噬九天之灵,融万族血脉,以九龙之体,战尽天下英豪!
农产品的软文营销案例 常德网站优化 网站推广公司 美国网站空间 好的数据库网站 华为 网络安全特性 专业的内蒙古网站建设 网站制作中企动力 企业一站式营销 成都网站建设电话 忧郁症的前世记忆【www.richdady.cn】 官司的心理调适咨询【www.richdady.cn】 去世的父亲的影响分析【www.richdady.cn】 忧郁症的改运方法咨询【www.richdady.cn】 为什么过世的前世故事咨询【www.richdady.cn】 前世老婆的前世影响威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 外灵对人的影响咨询【σσЗ8З55О88О√转ihbwel 前世缘份的前世缘分咨询【www.richdady.cn】√转ihbwel 为什么过世的前世缘分咨询【企鹅383550880】√转ihbwel 心慌胸闷头晕的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵干扰的前世因果【企鹅383550880】√转ihbwel 莫名其妙感伤的解决方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 感情纠纷的情感疏导技巧有哪些?【微:qq383550880 】√转ihbwel 意外事故对家庭的影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 学习成绩差的咨询技巧威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 学习成绩差的家庭教育【www.richdady.cn】√转ihbwel 性压抑的前世记忆咨询【www.richdady.cn】√转ihbwel 孩子厌学的自我提升咨询【微:qq383550880 】√转ihbwel 纠纷的案例分享咨询【微:qq383550880 】√转ihbwel 婴灵对家庭关系有哪些影响?【微:qq383550880 】√转ihbwel 电子工厂网站建设 网络安全研究 设备平台 青岛外贸网站建站公司 沈阳网站建设公司 网络营销推广协议 网络安全有哪些职业 国家网信网络安全应急 信息安全准入 大学 网络安全治理 网站访问者 重庆建设网站 衡水如何做企业网站 福州做企业网站的公司 普集网站制作 信息安全师等级 拉萨网站建设 网络安全软件 网站制作中企动力 阿拉丁微营销 兼职网站制作 建网站代码 上海营销策划 西安手机网站建设 中央网络安全和信息化领导小组成员 互联网信息安全 网站建设排版规定 青岛网站制作公司 阜阳网站设计 美国网络安全中心主任 互联网内容营销公司 武汉国家网络安全中心 信息安全服务认证资质证书 天津网站制作 简述网络营销漏斗原理 网络安全法 2016 techcrunch 来个网站 网络安全情报e-mail营销的内容 网站的申请 做网站前景网络安全权威认证 it企业信息安全 建设手机网站费用 直接营销优缺点 联想 信息安全 网站维护与建设内容 如何让百度收录网站 做个人网站 网络安全 四个层次上考虑. 网络安全宣传网站 湖南微营销 上海网站设 建网站代码 引擎营销教材 东莞网站建设推广 信息安全内审员培训内容 上海网站设 正规的搜索引擎营销企业 企业一站式营销 大学 网络安全治理 正规的搜索引擎营销企业 长春做网站电话 信息安全相关政策 b2b网络营销的过程 网络安全与信息办公室 九九建站-网站建设 网站推广 seo优化 seo培训 网络安全检查方案 公用网络安全吗 信息安全实验室简介 制作网站的流程 青岛外贸网站建站公司 拉萨网站建设 杭州网络安全厂商 网络和信息安全 外交政策 如何设计网站banner 网络安全是什么专业 在无线网络中 哪种网络一般采用基础构架模式 信息技术与信息安全 网络安全 个人隐私 文章 网络营销事件介绍 衡水如何做企业网站 合肥市做网站的公司有哪些 信息安全的成效 常德做网站 有经验的宁波网站建设 做个人网站 阿拉丁微营销 人员管理是信息安全 哇哈哈营销环境分析 烟台网站设计公司推荐 网络安全保护 青岛网站制作公司 网站竞价信息安全实验 pdf 无锡网站制作 常德做网站 2017信息安全峰会 重庆网站建设优化 长春做网站电话 网站建设 建个网站 国内营销公司 搜索引擎营销的产生 网络安全研究 设备平台 邮件列表营销的方式 支付宝的网络营销案例分析 沈阳网站建设公司 微博营销的方案总结 网络营销什么软件好使 网络安全有哪些职业 营销投稿 常德网站优化 信息安全准入 网络与信息安全现状,-1 美国网络安全中心主任 免费建网站 e点营销 网站都需要续费吗 武汉国家网络安全中心 中山市网络营销 微营销有什么特点是什么 营销型网站建设概述 互联网信息安全 公用网络安全吗 网络安全极客 美国网站空间 网络安全软件 邮件营销推广 网络营销媒体包括 微博营销的方案总结 网络安全技术培训 赵县网站建设 网络安全法与信息安全 网站色调 高端网站建站公司 建网站代码 网站都需要续费吗 北京网站排名制作 美团内营销