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
考研网络信息安全网络广告营销华为 信息安全email 营销国家信息安全通报营销技巧网络安全法颁布的意义北京网站建设公司运用政府职能 网络安全四川网站制作哪家好赵德芳驾驶核动力货轮穿越到南宋末年,组建特战队,发展经济,改善民生,提高生产力,驱除鞑虏,振兴华夏,扬我中华。睁开眼,林浩强重生到和妻子离婚的当天。 上一世的他,五毒俱全,抛妻弃女。 弥留之际的他,得知老婆积劳成疾,早已亡故,女儿叛逆,十年牢狱之后,死于街头。 林浩强死不瞑目。 上天给了他一个重生的机会,还给了他一方小世界。 为了弥补上一世的罪孽,林浩强起早贪黑,拼命工作,把老婆和女儿宠上了天。林萧,一个年近四十的中年落魄男人,也曾风光无限,而如今却是众叛亲离。美丽的妻子竟然也早就背叛了自己,并且夺走了他的一切。面对着未知的前方,他又该何去何从呢?命运多舛的少年,不谙世事的灵智,两者的结合在九州大陆掀起了阵阵腥风血雨。 在这里也许会看到华夏神话的延续,也许会看到超强的灵宝,也许会看到上古遗迹,也许会看到各种稀奇古怪的异兽,也许会看到魔之本相……清末民初是个动荡不安的年代,同样也是英雄辈出的年代。李氏家族由无到有,由兴盛再到衰落,时间鉴证了这一切。他们不屈不挠,拼搏奋斗的精神,将永远激励我们不断前行。威武华夏!什么?七月穿越了!去写生还能遇到歹徒?傻子是吧?很好,都来看看什么是傻子! 谁能告诉我,为什么这副身体里住着一位大神?好吧,实力强横就行! 三修,奇异吸收技能,修炼简直不要太逆天,碾压的就是你们这些天才。报仇?救人?那不是分分钟的事!铁杆小分队给我组起来,腹黑美男,妖孽娘炮,这么逗趣的组合如何拯救即将毁灭的小世界? 神族,魔族,人族,都不是事儿,挨个儿给我臣服!什么,开辟新领域?普通大学毕业生,没人脉,没势力,通过自己的努力,成为国内工控行业的先行者。深居野林神秘老道,一手培养出七位足矣撼动华夏的绝美女徒弟。今日,又一名最小男徒儿罗峰顺利出山。 罗峰:“我是老逼灯培养出最垃圾的徒弟,没什么本事,就想吃吃软饭,苟且度过这一生。” 师父:“什么,他说他最弱?难道我没有告诉过你们,那小子身怀诡秘?” 师姐:“我好像发现我们的小师弟越来越不对劲儿了,为什么世界各大强者都来跪舔他?” 一位来自于世界黑暗深处的顶级势力后裔之子,出生便被抛弃做弃子,偶遇华夏旧时代战力天花板老疯子和七位倾城倾国的大背景七位师姐,从此掌握七大绝学误入都市豪门,卷动江湖风云,走上自证强者之路。陈寻怎么也想不到,自己机缘巧合参加的一次相亲经历,竟然就此翻转了他的整个人生。杨辰一朝穿越,回到东汉末年,成为杨彪的侄儿,弘农杨家的下一代家主。 开局杨辰就觉醒了气运图录系统,只要迎娶美人或者收服名臣武将就能激活气运人物图录,就能获得专属人物奖励。 汉室的根已经腐朽,杨辰决定离开洛阳,前往并州发展。 之后,杨辰一路壮大势力,灭了南匈奴、鲜卑、乌桓。 一年后,杨辰带着麾下并州强军,一路杀回洛阳,一举成为天下最强军阀。
网络安全及解决方法 深圳企业网站建设公司排名 营销技巧 seo的网站建设 深圳网站制作公司人才招聘 网站设计流程 合能营销公司 信息网络安全与管理 重庆专业网站建设费用 国家信息安全宣传周 有官司的预防措施【www.richdady.cn】 缺心眼咨询【www.richdady.cn】 老公家暴的案例分享咨询【www.richdady.cn】 无形干扰的解决方法咨询【www.richdady.cn】 灵魂化解的仪式咨询【www.richdady.cn】 暗恋的心理调适【σσЗ8З55О88О√转ihbwel 婴灵对家庭有哪些影响?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子学习不好的解决方法咨询【www.richdady.cn】√转ihbwel 前世老公的前世解析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 外灵的干扰特征【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 财运不佳的财富管理【企鹅383550880】√转ihbwel 前世今生的故事是真的吗?【微:qq383550880 】√转ihbwel 前世老婆的前世缘分咨询【企鹅383550880】√转ihbwel 前世今生的缘分解读【微:qq383550880 】√转ihbwel 孩子学习不好的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子学习不好的原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 莫名其妙感伤的案例分享咨询【微:qq383550880 】√转ihbwel 提高情商的方法咨询【微:qq383550880 】√转ihbwel 财运不佳的理财技巧【企鹅383550880】√转ihbwel 什么原因意外的前世记忆咨询【微:qq383550880 】√转ihbwel 网站建设 选中企动力 广东营销网站建设服务公司 企业营销信息平台构建 中国可信计算与信息安全会议 山西网站制作公司哪家好营销案例分析 运用政府职能 网络安全 网站空间租 青岛市网络安全办公室 最大的网络营销公司 网络安全文章 杭州网络安全公司 地址 超简单网站 信息安全与管理警校,-1 晋城网站建设 网站规划 青岛做网站建设的公司 网站跳出率 中国网络安全行业 信息安全测评服务 晋城网站建设 成都做网站 互联网营销要学什么软件下载 考研网络信息安全 审计网络安全 国家信息安全宣传周 某某白酒进入南方市场请用4p营销理论为它制定销售策略 网络广告营销 网站设计流程 深圳企业网站建设公司排名 沧州网站制作 中国石油信息安全网 对于网络安全的建议 营销的误点 信息网络安全监察工作 考研网络信息安全 江西企业网站建设 番禺网站优化 网站红色 怎么做sem营销 网站 体系 网络安全在哪设置 网站设计流程 网络安全性是什么协议 龙岗网站制作 最大的网络营销公司 绵阳公司商务网站制作 分析企业网站和搜索引擎两者在传递网络营销信息方面有何不同福州做网站 老王解读网络安全法 单位信息安全等级保护工作 网络安全性是什么协议 中山移动网站建设报价 改网站标题 不正常营销 昆明网络营销策划 购物网站推广 网络安全及解决方法 网络安全小工具 seo的网站建设 信息安全测评中心 凌晨 企业手机网站建设策划 深圳企业网站建设公司排名 我们国家网络安全吗? 电信诈骗与网络安全 国家信息安全测评认证中心 营销技巧 网络安全文章 信息网络安全监察工作 中山移动网站建设报价 对网络营销弊端的看法 信息安全国际会议 网络安全及解决方法 计算机安全与信息安全 国家信息安全测评认证中心 信息安全模型 内容营销工具有哪些内容 实战网络安全免费阅读 如何来做全网营销 如何让外部的人员能够访问企业网站了解企业的产品及相关信息 信息安全孤岛 2016 信息安全大学排名2016 网站首页页面设计 单位信息安全等级保护工作 成都网站编辑 网站中如何嵌入支付宝 信息安全咨询服务 审计网络安全 信息安全 体系 互联网大会 网络安全 中国石油信息安全网 北京网络安全协会开发软件网站建设 信息安全与管理警校,-1 国家信息安全通报 如何进网站 中国可信计算与信息安全会议 南宁网站推广 信息安全 攻防 平台 石家庄医院网站建设 信息安全大学排名2016 网站规划 事件营销优点 北京展览馆 网络安全日 电信诈骗与网络安全 国家网络安全主题 昆明网络营销策划 信息安全模型 济南优化网站 网站跳出率 珠海政府网站建设公司 1、大型门户网站服务功能 企业信息安全 厂商,-1 广东营销网站建设服务公司 微信营销的效果数据分析 做网络安全的公司排名 网站跳出率 莞城网站制作 开网站公司 信息安全技术包括哪些主要技术 盈利模式和营销推广 中国可信计算与信息安全会议 太原网络营销师培训 编程和网络安全哪个好 在线教育营销策划方案 产品网络安全 网站首屏 国家信息安全文章 超简单网站 老王解读网络安全法 如何让外部的人员能够访问企业网站了解企业的产品及相关信息 大连建网站公司 网络安全技术研究所 网络安全的目标是什么 1、大型门户网站服务功能 芜湖网站建设公司 改网站标题 信息安全分类分级指南