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 as part of Bootstrap is a 940px-wide, 12-column grid.

It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.

<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

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="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">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>
Variable Default value Description
@gridColumns 12 Number of columns
@gridColumnWidth 60px Width of each column
@gridGutterWidth 20px Negative space between columns
@siteWidth Computed sum of all columns and gutters Counts number of columns and gutters to set width of the .container-fixed() mixin

Variables in LESS

Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.

How to customize

Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.

Staying responsive

Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.

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>

Responsive devices

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: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
// 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 hidding 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

Test case

Resize your browser or load on different devices to test the above clases.

Visible on...

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Hidden on...

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop
企业网络营销总裁培训班广告与营销的区别与联系营销策略中的价格策略网络营销渠道的特点是html5网站成都网站制作公司计算机网络安全实训教程济源网站建设菜鸟做网站建网站素材掌混沌太荒之力,修真龙不灭之体,诸天万界,唯吾独尊,觉神脉,修神诀,武道之极,逆天屠神!理智和生命,在战争的狂热焚烧下褪去色彩。天道不公,我便逆天少年被人追杀打入深渊,生死一线之际,少年成功激发了六劫神体,度过第一劫,意外踏上修行之路。 入学府,诀亲情,战诡异,破诅咒,一劫一重天。 手持神剑,背负苍生,剑舞龙蛇,一剑可破山海,一念可动乾坤。 天地依旧在,人非事归尘,茫茫世间无一敌,神主何归去? 三站之后,出现了短暂的平静,三年后,s市事件成为新的导火线,那些潜伏在黑暗中的人,渐渐的开始活跃起来,而这场风暴将会揭开这世界的真相。兼任宇主的万物皇降临灵汉恢复盛世,转眼间到了转移回原本宇宙的时候,万物皇创造出一个猫形移动储物库,命其成为自己小儿子的爱宠,便将传国之宝·敬天法祖大玉圭等多种神器存放于储物库,等待小儿子继任宇主大位,持宝玺名正言顺的继续完成他的大业……自古以来,宗教传承从未断绝,而宗教的故事也光怪陆离,数不胜数,带你看一些你所不知道存在或不存在的怪事。宇宙广袤无垠,充满未知与神秘…… 生命的种子隐匿散落于角落中,它们暗自发展,走向蓬勃…… 谁是,偷偷开启了抑制基因的枷锁,悄悄解开了万物的束缚…… 万物在进化的道路上急速演变…… 三千大种族族、万千世界、从此走向了历史的舞台…… 这是故事?这或许更是一本史记,一部讲述他生平沧海一束的残篇而已……脑海的画面中夕阳射出一束束金光,照在大地上,照在庭院的一草一木上。一阵微风吹过,许多的草轻轻舞动,风轻轻拂过我的脸颊,“你你傻傻的坐在外面看什么,赶紧去洗手吃饭”我温柔的说知道了,清风,明月,走,我们一起去洗手,明月轻声说道,爸爸,我们都洗完了,就等你吃饭了,快点去快点去“这真的是梦吗”詹白云喃喃自语的说道,可是这梦也太真了吧……民国初年,江沪青年司机玄狐,在驾驶车辆走夜路时,因碰撞阴魂煞气而丧命! 在九重天阴司府投胎审核寺,玄狐的鬼魂遇到此处监官铭难改等神仙,在进行投胎运程实验游戏,玄狐有幸被挑选参加这个游戏! 从此,玄狐开始扑朔迷离、危机四伏、艰苦卓绝、无穷无尽的换回磨难历程......
网络安全好学吗 营销型网站搭建的工作 互联网营销培训 网站微博营销哪个好用吗 全国信息安全作品赛 手机网站开发教程工业控制系统信息安全 责任 网站通栏 html5网站 h5网站搭建 国内汽车网络媒体的无差异化竞争严重突破式的营销创新太少 暗恋的情感释放咨询【www.richdady.cn】 长期精神不振的原因咨询【www.richdady.cn】 头脑混沌的前世因果【www.richdady.cn】 冤亲债主干扰的真实案例有哪些?咨询【www.richdady.cn】 事业不顺的前世因果【www.richdady.cn】 孩子不爱读书的家长引导咨询【微:qq383550880 】√转ihbwel 莫名其妙感伤的案例分享【σσЗ8З55О88О√转ihbwel 大龄剩女的婚恋故事【σσЗ8З55О88О√转ihbwel 失业的自我提升咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 冤亲债主干扰的解决方法咨询【微:qq383550880 】√转ihbwel 大龄剩女的情感生活威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 大龄剩女咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何改善财运不佳的情况?【微:qq383550880 】√转ihbwel 不爱读书的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子不爱读书的家庭教育方法有哪些?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世老公的前世记忆咨询【企鹅383550880】√转ihbwel 迟缓儿的环境影响【σσЗ8З55О88О√转ihbwel 儿子抑郁症咨询【微:qq383550880 】√转ihbwel 外灵对人的影响咨询【www.richdady.cn】√转ihbwel 孩子不爱读书的家庭教育方法有哪些?【σσЗ8З55О88О√转ihbwel 江门网络营销外包公司 网络能力营销秀 手机网站开发教程工业控制系统信息安全 责任 电子商务 网络营销培训 建游戏网站 菜鸟做网站 网络营销优化 杭州网站制作 喀什网站建设 网站建设程序开发 网络推广天培营销 网络安全会议 邀请函 信息安全管理体系中要素 车载网络安全 网站建设与维护 中国信息安全杂志官网 如何做到信息安全,-1 高校网络与信息安全检查 网络安全网络信息安全打赏营销 常州网络营销外包 新泰做网站 好文案网站 大型网站设计方案 武汉网络安全学院 中络信息安全有限公司,-1 深圳企业网站公司 网站通栏 html5网站 网站设计公司 南京 手机网站范例 医院网站建设 柳市做网站 建游戏网站 网站需求表 手机网站建设动态 好文案网站 如何做到信息安全,-1 先知网络安全 星巴克和微信营销案例 营销策略中的价格策略 信息安全部 星巴克和微信营销案例 罗湖网站制作 北京高端网站设计外包公司 整合网络营销案例 汽车网络安全攻击视频 2014中国网络安全大会国家信息安全产业联盟 网络推广天培营销 网站建设上市公司 网安信息安全管理员上岗证 做谷歌网站 网络安全攻防入门与进阶 课程培训营销 企业网络安全是什么 信息安全管理体系中要素 大良营销网站建设价格 网络安全网络信息安全打赏营销 云计算信息安全等级保护基本要求 网站建设与维护 互联网网站开发 网络有哪些营销方式有哪些影响 天津微信网站建设 网络安全会议 邀请函 邮件营销反馈率 京网站制作公司 济南网络营销策划 微博营销形式 网站建设上市公司 重庆好的网络营销公司 合肥大型网站制作公司 营销团队的介绍 有设计感的网站 济南网络营销策划 中国可信计算与信息安全学术会议 先知网络安全 北京网站改版 搜索引擎营销包括什么区别 武汉网络安全学院 网站高端网站建设 企业网络安全是什么 建网站素材 信息安全等级保护费用 深圳网站seo公司 广州网站设计公司 番禺网站推广公司 建网站素材 传统营销和内容营销 天津微信网站建设 国内汽车网络媒体的无差异化竞争严重突破式的营销创新太少 网络安全网络信息安全打赏营销 杭州网站制作 中国信息安全杂志官网 合肥全网营销系统 建游戏网站 qq推广营销方案 自己建立的网站 南川网站制作 营销p 网站建设渠道合作 基于区块链的信息安全,-1 衡水企业网站设计 互联网营销案例 互联网营销培训 武汉网络安全学院 html5网站 珠海企业网站制作费用 微信公众号 网络安全 网站高端网站建设 网站设计公司 南京 网络营销的商品按其形态可分为三大类即实体商品软体商品和在线服务 网络能力营销秀 汽车网站模板 网络有哪些营销方式有哪些影响 济南网站建设多少钱 网络安全好学吗 国家信息安全威胁 自己建立的网站 成都网站制作公司 营销机构号 网站需求表 医院网站建设 网络营销零基础培训 网站建设程序开发 qq推广营销方案 广州网站设计公司 网络安全部署方案 赤峰网站建设 厦门网站开发建设 卫龙营销战略 江门网络营销外包公司 洛阳网站seo 互联网营销精髓 手机网站范例 网站建设与维护 有设计感的网站