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 in Bootstrap utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically.

<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

p>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="span6">
        Level 1 column
        <div class="row">
            <div class="span3">Level 2</div>
            <div class="span3">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>

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>

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: 767px) { ... }
  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) { ... }
  /* 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 hiding 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
邢台网站制作有哪些西安做网站的公司禅城区网站建设公司网络营销计划书上海营销网络信息安全小组成员信息安全培训目标搜索引擎营销模式特点互联网营销事件网络营销能力秀是传销公安部信息安全等级保护中心张伟一笔落下,半卷人间;仙人对奕,胜负何谈! 一个初出茅庐的捉妖师,一段热血的故事。横推都市无敌手,轩辕重开林仙人。 灭门之仇,断腿之恨,血海深仇,不报难安! 我林枫修仙归来,你们这些练武的也配?平平无奇的法师,不一样的冒险之旅。叶峰穿越到特种兵世界,因为是关系户不受待见,被派去当垃圾新兵连队的连长! 仅用三个月时间,就将这垃圾连队打造成了堪比特种部队的特战连! 团长:让你随便练练这些新兵,特么你全给我练成特种兵了? 狼牙:到底谁才是特种部队啊? 范天雷:求求你带着你的兵全部加入我狼牙吧! 何晨光:这辈子我墙都不服,就服叶教官! 冷锋:我才不加入战狼,我要降级去叶峰的野战部队! 从铁拳团新兵连开始,叶峰打造一支又一支可怕的幽灵部队,名扬全军。 传奇,从此开始!齐等闲只是一个普通人,在一座牢房里,关押着无数的强者。当他的未婚夫将这份婚姻给撕掉的时候,他就已经明白了………. 这个天地,将会因为他的离开而跳舞。兼任宇主的万物皇降临灵汉恢复盛世,转眼间到了转移回原本宇宙的时候,万物皇创造出一个猫形移动储物库,命其成为自己小儿子的爱宠,便将传国之宝·敬天法祖大玉圭等多种神器存放于储物库,等待小儿子继任宇主大位,持宝玺名正言顺的继续完成他的大业……从小便受尽生活的屈辱,而为了活的更好只能隐忍努力,为了活的有尊严又不得不奋起反抗,然而在命运的安排之下,竟然踏上了一条更为艰险的修行之路,这便是狄峰卑微而又惊奇的人生。修行不为富贵,不为长生,更不为称霸天下,只为活的有尊严、活的无拘无束、活的无怨无悔!穿越成大明最后一个皇太子,朱慈烺觉的压力很大。 在这个非外挂不能救的大明,还好神级选择系统降临。 【怒怼当朝首辅,奖励两千戚家军,奖励项羽之力!】 【斩杀贪污正三品府尹,奖励秘鲁铳制作工艺。】 【斩杀临阵脱逃赵国公,奖励神机大炮。】 【不破不立,清洗腐败朝堂,奖励世界地图!】 射程即是真理,口径即是正义。 破敌蔻,除跶掳,解海禁,让大明的荣光响彻世界!神明布下游戏,每个人都可以参与并拥有变身铠甲的能力,不同的召唤器散落世界,获得它的人会变得如何呢?天道之下的人,在追求着天道。只是,天道又是什么?人在追求什么?
洛阳网站制作 微信营销的总结 我国网络营销发展阶段 南山的网站建设公司 互联网传统营销模式 网络营销机会分析报告 网络安全大讨论 贾君鹏营销 深圳网络安全快速考证建立政府公众网站的目的的 物理安全 网络安全 精神不振的心理调适咨询【www.richdady.cn】 婴灵、邪灵、祖灵咨询咨询【www.richdady.cn】 头脑混沌的原因及对策【www.richdady.cn】 精神不振的解决方法【www.richdady.cn】 阴间生活的前世故事咨询【www.richdady.cn】 个人专属前世因果分析咨询【www.richdady.cn】√转ihbwel 感情纠纷的情感沟通【企鹅383550880】√转ihbwel 大龄剩女的前世记忆咨询【企鹅383550880】√转ihbwel 学习成绩差【企鹅383550880】√转ihbwel 暗恋的情感表达咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 亲子关系的心理调适咨询【www.richdady.cn】√转ihbwel 大龄剩女的婚恋规划【企鹅383550880】√转ihbwel 孩子厌学的咨询技巧咨询【σσЗ8З55О88О√转ihbwel 儿子抑郁症的心理调适【σσЗ8З55О88О√转ihbwel 化解婴灵的最佳时间咨询【企鹅383550880】√转ihbwel 前世今生的故事解析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 化解【企鹅383550880】√转ihbwel 意外事故的主要原因分析咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 头脑混沌【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世今生的因果关系【微:qq383550880 】√转ihbwel 赣州网站建设 四川省计算机信息安全行业协会 网站建设推广 物理安全 网络安全 epr营销 网站建设:翰臣科技 网络营销机会分析报告 江西网络安全金华安信信息安全检测技术有限公司 营销知识点 网络安全十三五规划 搜索引擎营销模式特点 网络安全 ips 长春网站建设 手机网站免费 网站设计品 信息安全机构认证 网站域名组成 陕西省信息安全公司,-1 南山的网站建设公司 南京电商网站建设公司排名 epr营销 网站建设:翰臣科技 网络营销机会分析报告 江西网络安全金华安信信息安全检测技术有限公司 营销知识点 网络安全十三五规划 搜索引擎营销模式特点 网络安全 ips 长春网站建设 手机网站免费 旅游线路的营销推广 我国信息网络安全现状分析 网站如何被百度收录 网络营销配送 营销工具书 信息安全专家,-1 qq网络营销策划 电子商务 网络安全 做网站收费 网络维护网站美工 东莞市策划营销顾问 信息安全识别 小米网络营销应用分析 网络安全 打击 2016年网络安全年会 侧导航网站 澳洲网络安全挑战赛 网站数据库 网站关键词长度 贾君鹏营销 贵阳有哪些可以制作网站的公司吗 深圳网站建设外包公司 苏州网站推 移动营销有哪些特征 360公司信息安全大会 网站数据库制作 网络安全去哪里学 网络安全十三五规划 被通知公司网站域名到期 网络安全产品备案 陕西省信息安全公司,-1 禅城区网站建设公司 网络安全 打击 途牛网的营销模式 邢台网站制作有哪些 网络营销销售渠道 网站建设推广 美国国家网络安全联盟 英文营销网站建设 徐州建立网站 亚马逊服务营销 被通知公司网站域名到期 信息网络安全评估 中国 局网络信息安全 网络安全评审 物理安全 网络安全 手机模板网站开发 密山网站 网络安全最基本技术是 苏州网站推 做外贸网站 网络营销的作用和职能 个人网站自助建站 网络信息安全小组成员 epr营销 我国信息网络安全现状分析 视频网站设计 全球网络安全50强 信息安全意识评估系统 澳洲网络安全挑战赛 上海营销 安庆网站制作 网站建设:翰臣科技 手机企业网站设计 物理安全 网络安全 网络营销配送 太原免费网站建设 sem搜索引擎营销案例 简单网站制作 网络信息安全管理经理,-1 网络营销机会分析报告 epr营销 旅游线路的营销推广 常用的网络安全措施 怎样建立自己的网站 《网络安全》2017 四川省计算机信息安全行业协会 杭州公共信息安全系统 南京电商网站建设公司排名 2017年网络安全趋势 北京代建网站 无锡网站推广 信息安全厂家排名 视频网站建设方案 禅城区网站建设公司 长春市网站推广 网站域名组成 病毒营销的特点是什么 sem搜索引擎营销案例 山东大学网络信息安全 市场营销网络调查法 陕西省信息安全公司,-1 西安做网站的公司 建湖建网站的公司 网络安全大讨论 太原免费网站建设 杭州公共信息安全系统 营销型平台网站建设 网络维护网站美工 做外贸网站 赣州网站建设 微信公众号营销缺点 深度科技商业官方网站 营销知识点 邢台网站制作有哪些