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
饥饿营销正面影响国家信息安全中心举报,-1旅游网站管理系统中国网络安全企业工信部网络营销手机软件建立免费个人网站制定网络营销的策略鹤壁网站建设常见的网络安全威胁及防范措施武汉 信息安全比赛 2015网站分为哪几类秦皇岛网站制作29岁的天岚,事业无成,刚刚朋友也和自己分手,独自一人走在熟悉的街道上,往事历历在目,也许终究是自己错了,但你们却也不该这样对我······ 如果能够回到过去,我想我一定······[无系统] [无金手指] [智谋] 从年幼的爱情,到少壮年时的从军,到最后薨。少年从幼稚走向成熟,从彷徨走向坚定。半生蹉跎无人问,十年重生天下惊。 这是小人物的逆袭,也是辉煌的起始,从虫子到巨龙,我们皆是神的玩物,我们亦是可屠神之人。 这是英雄的一生“有请我的世界个人pk赛冠军陆瑜先生上台领奖!” “有请我的世界跑酷竞速赛冠军,陆瑜先生上台领奖。” “有请起床战争总局赛FMVP选手,陆瑜先生上台领奖!” “有请我的世界红石挑战赛冠军,陆瑜先生上台领奖!”  …… 陆瑜:“能不能给我搬一把椅子上来,领个奖跑上跑下怪累的。” “对了,麻烦再给我准备一辆货车 ,我怕奖杯太多,待会带不走。” “谢谢,有请下一位嘉宾给我颁奖。” “你小子莫装逼!装逼可是要……” 轰隆隆—— 全能玩家陆瑜被雷劈死后,竟然转生成方块大陆的村民。 还是个傻子! 幸好,游戏的Minecraft的系统还在,成为傻子村民陆瑜从零开始方块大陆的生活。 【恭喜解锁一键砍树MOD!】 【恭喜解锁食物工艺MOD!】 【恭喜解锁拔刀剑MOD!】 “陆瑜,你怎么做到的?” “阿巴阿巴阿巴。” 陆瑜不知道,不关陆瑜的事儿。 康纳森博士启动hope的原因是为了什么,那一直隐藏在背后指使着变异人的又是谁,末日计划的真正内容究竟是什么。这一切的谜团都隐藏在这末日十一天中,当.最后一天到来究竟会发生什么,重生还是末日,命运将何去何从..... ???武周兴元十八年,燕王上书请绥远受灾速拨军粮事,但是两个小人物的出现却搅乱了燕王的计划,四品官员的离奇身亡,又引起朝堂的轩然大波,皇帝,藩王,皇子,大臣,谋士,一时间武周国风起云涌,波云诡谲;阴谋,阳谋,刺杀,屠戮,人人都为自己的目的不择手段。朝堂纷乱,国内动荡,外族觊觎,武周国能否迎来中兴之主?2019年度最火社会热血文!猪哥最新力作! 既然已经没有了路,那么人间炼狱,归我! 扣扣群:六九三七三五零五七。 天地有五行,五行可证道......幽默穿越爽文,喜欢的朋友赶紧前来围观咯!首次在17K发表小说,还请大家多多支持!谢谢、谢谢、谢谢!(重要的事都要说三遍,呵呵!) 一位满目苍桑的老人,眯着眼倚坐在藤椅上,知吖吖的响着。藤椅旁,大黄趴在地上睡的正香。老爷子看起来就像是已经入土为安,躺倒在这片土地上一般。 一道光线照在老人身上,老人缓缓张开双眼。一个穿着黑衣的少女,站立于光束之下,看着这个年过花甲的老人,她的脸色有些悲戚,但却带着坚毅,眼中有着无尽的痛苦,看向这个老人的眼神也充满了复杂的感情。少女的右手紧握,似乎是用了极大的力气握住手中的长剑。 少女看向老人,嘴角露出一丝微笑。 “你来了”老人看着面前的少女,没有丝毫的惊讶,似乎早有预料,淡淡的说道。
网络安全 暗网 宜宾网站优化 4p营销组合战略指的是 网络信息安全演讲视频,-1 做网站的好公司 什么叫网站优化 信息安全威胁模型 信息安全威胁模型 广州市信息安全测评 php语言的网站建设 耳鸣的咨询技巧咨询【www.richdady.cn】 前世缘份的缘分再续【www.richdady.cn】 感情纠纷的情感咨询如何进行?咨询【www.richdady.cn】 耳鸣的案例分享【www.richdady.cn】 什么原因意外的前世案例咨询【www.richdady.cn】 缺心眼的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 儿子抑郁症的家庭支持【σσЗ8З55О88О√转ihbwel 存不住钱的咨询技巧咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份如何影响事业发展?咨询【σσЗ8З55О88О√转ihbwel 大龄剩女的婚恋建议有哪些?【微:qq383550880 】√转ihbwel 人际关系不好的表现及原因咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 亲子关系的心理建设【www.richdady.cn】√转ihbwel 与女友前世的前世修行【www.richdady.cn】√转ihbwel 官司威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 忧郁症的心理调适【σσЗ8З55О88О√转ihbwel 忧郁症的原因分析【企鹅383550880】√转ihbwel 大龄剩女的案例分享【www.richdady.cn】√转ihbwel 祖灵的存在形式咨询【企鹅383550880】√转ihbwel 头脑混沌时如何提高注意力咨询【企鹅383550880】√转ihbwel 去世的母亲的前世缘分【企鹅383550880】√转ihbwel 搭建网站 网页 2017安徽高校网络安全 小黄人微营销系统 网站建设公司价格 重庆市网络安全 临沂网络营销策划 网络安全管理系统 公安 国家信息安全中心举报,-1 设计网站可能遇到的问题 济宁网络营销 个人网站设计欣赏 网络营销与营销的区别 网络安全从业人员 网站建设系统 通化网站建设 济南建设网站的公司吗 福建省信息网络安全 网站设计手机型 急性营销病 顺德网站制作案例价位 流氓营销 运营商 网络安全 潍坊网站建设公司推荐 被黑的网站 企业网站建设公司 广州市信息安全测评 企业微博营销案 美国网络安全战略对中国有何启示 网络安全的专业 如何建立个人网站 信息安全逆向分类 信息安全逆向分类 无线网络安全 周 秦皇岛网站制作 移动网络安全吗 移动网络安全吗 旅游网站管理系统 宜宾网站优化 共建网络安全的建议 佛山微信网站建设 cps营销 宝安网站建设公司 网络营销与消费者心理 唯品会营销方案案例 信息安全专家是什么,-1 高端网站开发建设 国家信息安全中心举报,-1 信息安全奖学金 azure 网络安全组配置 cps营销 4p营销组合战略指的是 武汉 信息安全比赛 2015网站分为哪几类 网站开发商 河西做网站 网络安全病毒防御 asp.net 网站 文件加密 outputstream 网络营销的业务流程 网络安全 暗网 3g网站设计 注重信息安全 网络营销与营销的区别 移动应用营销 简述网络营销特点是什么 思科 2014网络安全 运营商 网络安全 蘑菇街营销手段 展示型网站建设流程 一流的商城网站建设 沈阳网站 网站制作公司 信科网络 武汉 网络信息安全室 哈尔滨网站制作公司 网站运营 2017安徽高校网络安全 济南建设网站的公司吗 营销电商 瑞星2013年中国信息安全报告 著名网络营销案例 沈阳网站建设推广 运营商 网络安全 怎么制作网站 网站运营 日常网站维护 全国网络安全大赛 南阳市网站制作 宁波网络营销推广 网络营销形式有 中国网络安全企业工信部 设计网站可能遇到的问题 有pc网站 网络安全 暗网 公司网络安全制度 网站制作公司 信科网络 手机网站建设免费 红色网站呢 信息安全破解logo 给会所做网站 顺德网站制作案例价位 php语言的网站建设 网站开发商 b2b网络营销的问题 流氓营销 宜宾网站优化 雅虎网络安全小组 什么叫网站优化 网站建设公司价格 福田网站制作 如何建立个人网站 直播 网络安全品牌整合营销 王者荣耀 域名 网站 域名 网站 给会所做网站 企业网站建设公司 什么叫网站优化 vpn技术与网络安全案例 上海专业网站设计 移动网络安全吗 网络营销专业的大学 巴中网站制作公司 网络信息安全原则有 上海建网站的公司 当当的网络安全措施和技术 有pc网站 展示型网站建设流程 佛山微信网站建设 广州h5网站武汉信息安全,-1 公司网站的开发和网版的重要性 被黑的网站 2017网络安全展会 深圳自适应网站设计 注重信息安全 南阳市网站制作 网站建设系统 武汉 网络信息安全室 我们网络安全等级保护级别