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
网站描文本苏州网站推山西省信息化和信息安全评测中心佛山建网站杭州电子科大大学信息安全专业网络营销的定义及分类网络营销策划方案设计个人怎么制作网站传统网站和手机网站的区别是什么2015网络安全事件如何建一个网站北京企业网站建设方天道为何? 正邪何分? 族群对立间, 人类分裂时。 身修数个法门的和尚空戒和独剩己身的狐族公主若苏, 怎样才能在这乱世之中, 对抗所谓正道, 违逆所谓天道, 苟且偷生,报的大仇?这是一个很长的故事……一张面具让林肖告别了摆烂的生活,打开了新的世界。这里灵气复苏,生物进化已经持续了近百年,古老传承纷纷现世,百废待兴且看少年如何迎风而行,攀临顶峰传奇咸蛋小孩的一生,拥有超能力。后与玛卡巴卡和鸭蛋一同登入月球,竟发现第二个咸蛋、偶遇包子。一系列的传奇科幻故事。 两年后,被军中战友称为“狂神屠灭者”传奇战神的特战兵王江晓如约归来,面对人事皆非的境况,该如何取舍,面对一步步浮出水面的暗黑真相,又该如何抉择! 世间的真爱该如何诠释,人间的正义又该如何解读。 孤儿江晓与独女简雯在一个城市读书,相恋四年,彼此深爱,毕业时江晓为追寻自己儿时便已植根内心深处的梦想做了一个让简雯无法理解也很难接受的决定,选择入伍。入伍临行前,两人定下两年之约。 两年后,成为特战兵王的江晓为两年之约离开了那片让他挥洒过无数血和汉承载着作为军人荣耀的火热军营。 回来后,却发现外面的世界已经不是自己认识的那个样子,简雯也变得如此陌生,所有的一切已人事皆非…… 不甘心的江晓不相信所看到的一切,化身“大侦探”的江晓随着调查的深入,一步步发现原来事情远没有自己想的那么简单…… 爱恨交织,黑白无道。 为守护爱和正义,江晓一步步走上了孤勇的战斗之路……这里是黑暗与光明鏖战千年,上古的神明都要为此陨落,其余诸神将神陨之罪视为极大的罪恶,因此赐给这个世界永远都不过结束黑暗。 “无数次,在人世间的焦土上,祈望光明” “神魔无情,还有人在祈祷神明” “天地不仁,大道无光!看看像我这样的凡人,都怎么诛灭神魔” “成神如何,成魔又如何!就由我来击碎千年的黑暗” …… 男女主角一起拯救世界的故事?来自二十一世纪生患绝症的企业家,为求得一线生机接受了技术并不成熟记忆转载实验,意外让他的记忆来到了1987年这个国内近代商业的启蒙期,是成为时代的弄潮儿还是那划破夜空的流星。 本书内容以商业故事为主,无太多情感戏。死刑犯9527被执行枪决,竟然意外重生,不服就干,血战强敌,强行逆袭,逆天改命,我命由我不由天!看一个死刑犯如何叱咤风云,问鼎天下。 末日降临,仙凡佛圣人神难逃。 在人间历劫任务完成后,玉皇大帝的二皇子凤赫回归天庭。随之而来的是魔界入侵天堂,天庭自顾不暇,无力救援,从此掀起了天堂和天庭的大战。 末日降临,诸天陨落,诸世受难,诸神黄昏。地球人间成为各界的必争之地!
中国网络安全联盟 红河网络营销 公司网站维护 企业营销网络介绍 迅腾科技-专注网络安全 杭州营销策划 搜索引擎的营销流程 网络营销可分为 病毒营销互联网案例分析 军用信息安全产品证书 财运不佳的财富增长【www.richdady.cn】 冤亲债主的干扰与化解【www.richdady.cn】 如何解决事业不顺的问题?咨询【www.richdady.cn】 与女友前世的识别方法【www.richdady.cn】 儿子抑郁症的家庭支持咨询【www.richdady.cn】 人际沟通障碍解决【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 阴间生活的前世案例威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 财运不佳的财运改善【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 有官司的调解技巧咨询【σσЗ8З55О88О√转ihbwel 纠纷的解决方法【微:qq383550880 】√转ihbwel 发育倒退的前世因果咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世今生的修行案例【www.richdady.cn】√转ihbwel 家庭关系的相处之道咨询【www.richdady.cn】√转ihbwel 婴灵、邪灵、祖灵咨询咨询【σσЗ8З55О88О】√转ihbwel 阴间生活的前世修行【企鹅383550880】√转ihbwel 阴间生活的前世解析【微:qq383550880 】√转ihbwel 耳鸣的环境影响【σσЗ8З55О88О√转ihbwel 无形干扰【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 发育倒退的自我提升【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 亲子关系的互动模式【微:qq383550880 】√转ihbwel 军用信息安全产品证书 信息安全 人员 计划 红河网络营销 burp 网络安全题目 东营设计网站建设 佛山建网站 网络安全传输协议 物联网与网络安全 公司网络信息安全要求,-1 搜索营销外包 网络安全的新闻 网站描文本 网络安全管理系统品牌 网站制作呼和浩特 中国国家信息安全测评中心待遇 公司网站设计与制作 网络营销与管理 网络营销的定义及分类 2014 国家信息安全 广州营销课程 2016信息安全泄密事件 病毒营销互联网案例分析 公司网站设计与制作 网络安全组件 北京国际互联网科技博览会暨世界网络安全大会 网络信息安全峰会 网络营销策划方案设计 网站描文本 网络安全管理系统品牌 网站制作呼和浩特 网络安全错误 错误代码 东营设计网站建设 怎样建立自己的网站 搜索营销外包 网站触屏版 长春市网站推广 中国国家信息安全测评中心待遇 河北省网络安全公司 迅腾科技-专注网络安全 如何设计公司官网站 昆明网站建设公司 模版建网站 dnc网络安全 公司网络安全管理方案 外贸网站模 上海网络营销培训 网络安全的第一道防线是 营销型网站案例 网络安全条例 翻墙 网络营销策划方案设计 2013中国网民信息安全状况研究报告 免费营销方式 网络营销与管理 北京市网络安全局 网络营销活动有哪些方面 网络安全的新闻 广州网站设计公司 微网站建设资讯 如何做好微信群营销方案 如何做好微信群营销方案 长春市网站推广 英国 网络安全 机构 三零信息安全有限公司 全国专业信息安全服务资质咨询中心,-1 军用信息安全产品证书 广东省信息安全教育网 嵌入式设备网络安全 网络安全错误 错误代码 重庆品牌营销服务好 信息安全工作总体方针和安全策略,-1 杭州营销策划 信息安全网络安全工作的组织 dnc网络安全 burp 网络安全题目 微营销百度百科 特仑苏营销 2016 网络安全 商丘做网站 上海市网络信息安全 佛山建网站 网络营销文案事例 2014中国信息安全技术大会 整合营销?V告 云网站系统 专业网站制作 成都搜索引擎营销公司 宁夏制作网站公司 信息安全和保护条例,-1 物联网与网络安全 网安部门维护网络安全 软文营销策划书 软文营销策划书 网络安全错误 错误代码 南通旅游网站建设 信息安全一级资质 长沙的网站建设公司 东营设计网站建设 免费营销方式 网络目标市场营销策略 企业网站app 关于建网站新闻 网络营销知识 怎样建立自己的网站 网站组成 信息安全 人员 计划 网络安全管理系统品牌 2016信息安全泄密事件 信息安全的前提 上海小企业网站建设 网络信息安全峰会 关系营销优点 网站seo诊断 网站触屏版 网络安全防护预案 网络营销的定义及分类 上海大 小企业网站制作西安网站建设制作 国家网络安全学院最新 重庆品牌营销服务好 怎么建com的网站 网站触屏版 企业营销网络介绍 桂林做手机网站设计商城网络营销 上海网络营销培训 搜索营销外包 企业网站app 杭州营销策划 网站建设服务费标准 网络安全现状与问题 公司网络信息安全要求,-1 网络安全意识 培训 网络安全看年龄吗 东莞企业网络营销 迅腾科技-专注网络安全 外销网站 病毒营销互联网案例分析