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
企业h5网站建设网络安全监测方案设计教网络安全的博客万和城网站360与中国国家信息安全被通知公司网站域名到期双色调网站张家港专业的网站制作公司石家庄网站建设找哪家网站漏扫世间修行之法万千,体修,元修,剑修,魂修,血修,魔修,佛修……皆有移山填海,斗转星移之威能! 且看少年如何凭借肉身的极致,以力破万法,从一个被迫成为炮灰的底层修士,一拳一拳击碎所有阻碍,让诸天神魔臣服,直至登顶这无尽巅峰,成就不朽!“哥哥你说他们为什么这么讨厌我们呢” “鸣人,这件事情等过几年我在告诉你” “可是我现在就想知道” “乖”灵气复苏,天地巨变,世界晋升,万族争霸。 陆渊踏足万族战场,获得神级天赋【进化之眼】 一眼便可到武将的隐藏进化路线!  【花木兰+雷鸣刃+进化水晶+神隐斗篷,可进阶剑舞者】  【花木兰+司命+迷雾斗篷+暗影之心+碎星,可进阶传说之刃】 【花木兰+破军+不详征兆+龙鳞利剑+极影+燃愿玛瑙,可进阶瑞麟】 在万族还在辛苦为了一个武将而奋斗的时候,陆渊已经带着无数神将横推诸界! 这是一部送给我认识的每一个人的小说,来纪念一下这些关系之类的吧。 因为没有能力元而不能修炼的恒浩被家族抹杀后,意外生还,原本没有修为的自己只是想一辈子隐藏在这座山里,过着日常的生活,可那一天……热血的战争,痛苦的坎坷。 为报仇,他杀人如麻, 进入仙界,他修炼无上仙法,仙路坎坷,正邪难分,勇夺皇位,为了天地,他遇神杀神,遇魔降魔,他勾心斗角,出卖兄弟,残杀无辜, 但是他却是个好人.......嘿,我回来了……唐虞帝国宇宙中人类也只是一抹看不见的尘埃,数百亿年前的地球是否有着同样的文明,又为何消失。 时光倒流回到如今或者过去,你是否会后悔曾经的选择,或者你想改变什么。 时光如火苗刹那的流光便是千百年,星空下又有多少未知的文明世界,是否各种结局早就已经注定。 是人类,还是未来科技,或是其他的文明在谱写宇宙中的轨迹与衡和。 地球仅仅只是宇宙中的一粒尘埃。 那为何你我一样在争渡,渡什么,过去,还是未来,或者是现在。 其他僵尸可以通过尸毒,让自己手下出现无数僵尸小弟。江流逝的尸毒只对女性有反应,这辈子做僵尸,想要僵尸小弟是不可能了,只能拥有一群僵尸妹子。 其他僵尸忙住修炼,忙着躲避世俗,忙住寻找食物。江流逝却在贩卖尸体,忙着发财,忙住泡妞,忙着打架。 或许,这是僵尸历史上最奇葩的君王吧! 很久很久以前,有一座山,名为葬灵山;葬灵山的西边有条渊,名为无相之渊;无相之渊的西边,有一座学府,名为真武院;而故事,则要从葬灵山东边的那座凌天帝国讲起……
大连做网站 信息安全大赛题库 昆明响应式网站制作 做一个营销型网站 网络安全现状与问题 网站制做公司 北京网站页面设计 婚庆网站建设 魔兽世界 网络安全任务 信息安全管理流程 内心恐惧胆怯的原因分析【www.richdady.cn】 缺心眼的咨询技巧咨询【www.richdady.cn】 脑部不清晰的前世记忆【www.richdady.cn】 性压抑的前世影响咨询【www.richdady.cn】 如何应对冤亲债主的干扰?咨询【www.richdady.cn】 事业不顺的职场建议有哪些?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 耳鸣的原因分析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婚姻生活不顺的环境影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 升迁障碍的原因有哪些?【www.richdady.cn】√转ihbwel 构建和谐亲子关系的方法咨询【微:qq383550880 】√转ihbwel 前世缘份的奇妙重逢【企鹅383550880】√转ihbwel 与老公前世的故事分析咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子压力大的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 意外事故对家庭的影响咨询【微:qq383550880 】√转ihbwel 婴灵的超度过程【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 脑部不清晰的咨询技巧咨询【企鹅383550880】√转ihbwel 前世今生的奇妙经历咨询【微:qq383550880 】√转ihbwel 财运不佳的财富管理方法有哪些?咨询【www.richdady.cn】√转ihbwel 升迁障碍的职场规划如何制定?【企鹅383550880】√转ihbwel 升迁障碍的前世因果【微:qq383550880 】√转ihbwel app设计网站 网站推广报价 dnc网络安全 360与中国国家信息安全 兰州网站制作 网站建设背景怎么写 日本 网络安全 可信网站认证 网络安全管理组织机构 南昌个人做网站 信息安全大赛题库 南昌网站建设公司 国家信息安全管理体制 网络安全测评公司 facebook个人信息安全 信息安全服务中心隶属 信息安全认证包括 深圳做网络安全公司排名 网络整合营销 网络安全未通过认证 网站模板和定制的区别 网络信息安全博览会,-1 信息安全管理流程 大连做网站 广东网站建设 国产网络安全产品品牌 淘宝店铺营销推广方案 网络安全月 网络安全主要功能 移动网络安全前景 没有任何漏洞:信息安全实施指南 计算所信息安全 互联网络安全 魔兽世界 网络安全任务 信息安全等级测评师培训教程(中级) 辅导资料 网络信息安全博览会,-1 可信赖的南昌网站制作 兰州网站制作 上海网站建设网络公司 密码技术网络安全公司 3g网站开发 网站要多钱 营销活动培训 产品型网站 网络安全现状与问题 石家庄网站建设找哪家 有经验的南昌网站设计 信息安全服务中心隶属 电子政务网络安全 如何建一个网站 课程商城网站模板 网站降权怎么办 企业h5网站建设 电子政务网络安全 婚庆网站建设 移动网络安全前景 网站设计书 婚庆网站建设 网络营销管理的内容 广东网站建设 信息安全管理流程 营销反馈 国家支持什么参与网络安全国家标准 营销推广点 营销热门话题 国产网络安全产品品牌 互联网络安全 网络安全管理组织机构 南昌网站建设公司 实战全网营销是干什么 呢图网站 杭州集团公司网站制作 营销推广的优点 自个网站 计算所信息安全 如何维护网站 网络营销实训方案 网络营销直通车 教网络安全的博客 管理营销网餐饮网络营销策划方案 南京电商网站建设公司排名 信息安全媒体 网络安全测评方法 中国网络安全调查报告 免费企业网络安全系统 定州网站建设 网络营销战略 案例分析 北京信息安全认证中心徐州建立网站 双色调网站 网络营销战略 案例分析 管理营销网餐饮网络营销策划方案 万和城网站 网站制做公司 网络营销管理的内容 dnc网络安全 网络营销战略 案例分析 网站制作公司 番禺 广东网站建设 营销外包效果 北京国际互联网科技博览会暨世界网络安全大会 可信网站认证 响应网站 网络安全未通过认证 做网站实验体会 网站设计时应考虑哪些因素 网络安全管理组织机构 事件营销要素 跨境网络安全预备案 网站内页 网站怎么创建 国务院 信息安全 南昌个人做网站 营销起源于什么时候 网络信息安全博览会,-1 网络与信息安全的建议,-1 企业应用 移动设备丢失 如何保证信息安全 校园网站建设 深圳哪家网站建设好 网站的设计流程 网站首页特效 梅州网站建设 哇哈哈 营销方式 网站模板和定制的区别 网络安全未通过认证 中央网络安全管理小组 提高网站安全性 济南之美营销策划有限公司 北京网站页面设计 公司网站设计与制作 营销产品定位 如何建一个网站 营销起源于什么时候 上海??公安局网络安全总队 facebook个人信息安全 南京电商网站建设公司排名