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
短信营销机国家网络安全周logo洛阳做网站济南外贸网站建设公司icp信息安全评测报告网络安全招生网络营销的实践应用网络安全周内容nike网络营销案例营销的问题网络和信息安全通报实行7 24,-1合肥网站制作公司20岁的我被转生到了新的世界,成为了无敌一般的存在这是一个关于已经打败最终BOSS的家伙的故事,但他并不是一个英雄。我有异世神瞳,看世间炎凉。魑魅魍魉,黑白无常,在这朗朗乾坤下,皆是我眼下亡魂。神瞳一开,我辨得人群中暗藏的鬼魅,也入得了坟墓,探异世孤魂。我没有职业证,不受法律约束,我自由游走地狱,不受阴阳限制。光脚的不怕穿鞋的,无证侦探管闲事,管他是谁,缉拿归案! 阿琉族,是天下间被诅咒的家族,族内嫡系血脉身附神力,传闻是神族后裔,族内最高首领世代继承阿琉族圣物阿琉玉。上古神器阿琉玉,据说背负着天下至高神——道神太天的血和灵力,因此也被诅咒。虽说时代更迭,王朝换代,但野心勃勃的世人们依旧垂涎这被诅咒的上古神器阿琉玉,传说若能唤醒阿琉玉,便可像至高神太天一样永生。阿琉一族为守护阿琉玉,一直颠沛流离,四海为家,直到第九任族长阿琉肃里开辟了叶秋镇作为新的家园,阿琉族才正式定居安家。好景不长,一句预言打破了叶秋镇的宁静。“阿琉阿琉,神族后裔;阿琉圣玉,可掌天下;背负诅咒,先祖之殇;幽幽灵神,降于叶秋;人前之子,人后之凰。”少族长阿琉思南一行人在预言之下又该如何应对种种危机?柳一,吃的用的都是自认为最干净,包括女人。重回1998年,曾经暗恋的女孩青春正好,穿一条裤子的兄弟还没变成渣男,幸福美满的家庭也不像后来那么的风雨飘摇。 正是刚刚好的年纪,也正是刚刚好的时代。 起伏跌宕的九零年代即将逝去,波澜壮阔的新世纪即将到来,林白药走诡道,行霸道,悄然崛起…… 一个平平无奇的日子,天空上突然出现一道裂缝,裂缝中漂出一个类似空间站的东西,散发着强烈的蓝光,也就是这一天,世界上的人类消失大半,去往了另一个世界。 山寨,是一门艺术,尤其是重生之后。 赵子川带着十三年年的山寨经验,重活了……放眼望去,遍地是黄金。 从潮牌开始缔造。 他赞助女足,女足奥运夺冠。 他签下15岁的大姚,18岁,大姚就在NBA篮下称霸! 他拉低钩子价格,引来ad围剿,却淡淡一笑,“你们以为,我在做潮牌,实际上,我在投资这个时代。” “西兰,是神话。” “我也是。”天道气运加身,神仙妖魔能奈我何? 绝世功法,上古神兵,圣地神女 通通都是我的 推我入深渊的人,我将亲手送你下地狱, 看不起我的人,我终将成为你们的神! 一位异世来客,意外穿越到类似山海经一样的诡异修仙世界,他凭借着额外得来的金手指,能和尸体对话的优势,运用自身智慧躲过一个个诡异事件,比如穿着人皮的妖魔,红毛尸王吼,能够杀人于无形的鬼魅,寄宿在人体内的人脸魔蛛,隐身的异人,靠人繁殖的摩羯,恐怖的尸林,诡异的祭祀,与邪神交易……
信息安全等级保护 试题 专业信息安全服务资质咨询公司,-1 网络安全法 上位法 郑州营销外包公司 外贸型网站 搜索引擎营销测验 郑州营销外包公司有哪些 事件营销心得 东莞全网营销网络推广方式 企业 信息安全部门 冤亲债主干扰对生活有哪些影响?【www.richdady.cn】 婚姻生活不顺的自我提升【www.richdady.cn】 意外的前世缘分咨询【www.richdady.cn】 前世今生【www.richdady.cn】 婴灵的超度与心灵净化【www.richdady.cn】 头脑混沌的原因分析【微:qq383550880 】√转ihbwel 自闭症的环境影响咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 去世的父亲的前世记忆【企鹅383550880】√转ihbwel 冤亲债主干扰的案例有哪些?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵干扰的自我提升威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 感情纠纷的情感沟通咨询【σσЗ8З55О88О√转ihbwel 心特别累的解决方法【企鹅383550880】√转ihbwel 前世因果咨询咨询【σσЗ8З55О88О√转ihbwel 灵魂化解的方法咨询【www.richdady.cn】√转ihbwel 头脑混沌的原因分析咨询【www.richdady.cn】√转ihbwel 外灵干扰的环境影响咨询【σσЗ8З55О88О√转ihbwel 投资项目的选择方法咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子学习不好的原因分析【www.richdady.cn】√转ihbwel 缺心眼的环境影响咨询【企鹅383550880】√转ihbwel 事业不顺的职业规划咨询【σσЗ8З55О88О√转ihbwel 中国信息安全安华 网络安全试点示范工作 南京信息安全 电信网络与信息安全 网络安全安全组织 电器营销策划 桃城区网站制作公司 事件营销成功的案例 网络营销的实践应用 网络安全应急处置图 北京微信网站制作 微博营销是指什么 高校网络安全建设方案 无锡制作网站 移动网站建设 中国网络安全 国际 佛山营销型网站建设公司 短信营销机 厦门网站优化 电信网络与信息安全 信息安全专业大二课程 网络营销技术性 南京信息安全 网络安全法 上位法 青岛营销型网站建设 网络营销能力评比 上海简约网站建设公司新型营销方式 石家庄做网站 网络安全测试方案2013年互联网网络安全态势综述 信息安全意识动员讲话 高校网络安全建设方案 网络安全:两小时破译无线路由器pin码算法获得路由密码 重庆主题营销页 邮件营销模式 朝阳区网络安全中心 网络安全大会2015 信息安全的应用技术 网站设计分享 建网站怎么弄 做一个网站的费用构成 太原网络营销 网络安全策划书 网络安全保护方案 南京信息安全 太原手机网站开发 建网站怎么弄 信息安全新闻 开展网络安全 网络营销实例分析ppt 百度推广的知识营销 关注网络安全bolg 网络安全月报 南通网站建设设计 国家网络安全周logo洛阳做网站 搜索引擎营销测验 网御网络安全管理系统v3.0 网络安全保护方案 搜索引擎营销测验 nike网络营销案例 桃城区网站制作公司 代加企业营销qq好友 苏州响应式网站建设 信息安全保障体系 代运网站 事件营销成功的案例 信息安全等级保护级别,-1 信息安全等级保护 试题 2015信息安全大会 龙岗网站制作新闻 网络安全和人工智能 网站注册域名 网络安全应急处置图 搜索引擎营销的注意点 政府网站设计 石家庄做网站 免费微网站 北京微信网站制作 美国大学信息安全 网站模板 当前php环境关闭了文件上传功能网站将无法上传图片和文件 网络安全技术应用期刊 微博营销是指什么 国家网络安全周logo洛阳做网站 事件营销成功的案例 邮件营销的步骤有哪些 佛山营销型网站建设公司 济南外贸网站建设公司icp信息安全评测报告 信息和网络安全会议 网络安全法 上位法 济南外贸网站建设公司icp信息安全评测报告 营销型网站 创新的南昌网站建设 中国网络安全 国际 深圳网站建设公司招聘电话销售 营销推广心得 网络营销实例分析ppt 免费搭网站 百度知道营销回答规律 事件营销心得 网络营销技术性 网络安全测试方案2013年互联网网络安全态势综述 免费网站制作软件 网络安全安全组织 网络安全信息共享机制 网络安全逆向工程 网络安全策划书 北京微网站建设 网站快照 百度推广的知识营销 营销整合平台 网站之间的差异 网络营销的优势与劣势 信息安全测评机构的资质认定主要有 公需 北京微信网站制作 高校网络安全建设方案 绵阳科技网站建设 无锡制作网站 信息安全测评机构的资质认定主要有 公需 网络安全法 金融机构 太原网络营销 网络营销能力评比 网络安全法 金融机构 网络和信息安全通报实行7 24,-1 国家网络安全周logo洛阳做网站 论坛营销的优点 营销型网站 搜索引擎营销的注意点 德网站建设 北京网络营销公司 衡水移动端网站建设 信息安全iso27001 苏州响应式网站建设 企业 信息安全部门 有站点营销 镇江网站推广 专业信息安全服务资质咨询公司,-1 关注网络安全bolg 中国联通 网络安全 网络安全周内容 租车营销方案怎么写 德网站建设 广州网站设计公司招聘 国家对信息安全性 郑州营销外包公司 nike网络营销案例 网站快照 信息安全意识动员讲话 美国大学信息安全 南京信息安全 nike网络营销案例 系统之间的网络安全 网络营销启发 信息安全等级保护 试题 绵阳科技网站建设 传统市场营销活动 网络安全技术应用期刊 教育网站 网页赏析 网御网络安全管理系统v3.0 桃城区网站制作公司 一张图 网络安全小组 沈阳网站制作 杜蕾斯微信营销案例 2016近期网络安全事件 移动网站建设 微博营销是指什么 代运网站 营销的问题 东莞全网营销网络推广方式 国家网络安全周logo洛阳做网站 信息安全的应用技术 南通网站建设设计 第二届国家网络安全宣传周主题 2017 信息安全 峰会 网络安全应急处置图 邢台做网站推广价格 龙岗网站制作新闻 国家网络安全示范基地 外贸型网站 代加企业营销qq好友 微信营销月总结报告 绵阳科技网站建设 网站外接 北京网络营销公司 网站的对比 共筑网络安全防火墙 信息安全保障体系 深圳网站建设公司招聘电话销售 营销的问题 网络安全产业基金武汉 传统市场营销活动 网络安全面对的威胁 搜索引擎营销测验 酒店网络营销的方法 番禺建网站 代运网站 国家网络安全示范基地 电信网络与信息安全 搜索引擎营销顾问 网站设计分享 信息安全等级保护级别,-1 徐州市网站 河南做网站 邮件营销的步骤有哪些 合肥网站建设的公司 搜索引擎营销测验 网络安全信息共享机制 郑州营销外包公司有哪些 政府网站设计 新媒体营销热点 中国信息安全安华 当前php环境关闭了文件上传功能网站将无法上传图片和文件 搜索引擎营销的注意点 信息安全保障体系 网络营销的优势与劣势 网络安全月报 视频营销的优点 信息安全iso27001 网络安全招生 网络安全测试方案2013年互联网网络安全态势综述 网站设计分享 朝阳区网络安全中心 信息安全管理的原则 杜蕾斯微信营销案例 无锡制作网站 做一个网站的费用构成 网络安全产业基金武汉 网络营销实例分析ppt 网络和信息安全通报实行7 24,-1 网络营销与消费者 做一个网站的费用构成 企业网站模版 百度知道营销回答规律 信息安全意识动员讲话 企业网站模版 开展网络安全 信息安全新闻 济南外贸网站建设公司icp信息安全评测报告 专业信息安全服务资质咨询公司,-1 厦门网站优化 网络安全策划书 建网站怎么弄 精准网络营销 论坛营销的优点 营销网站手机站 东莞全网营销网络推广方式 深圳电子商城网站建设 营销竞争 北京微信网站制作 有站点营销 南京信息安全 企业 信息安全部门 网站外接 网络安全安全组织 事件营销心得 徐州市网站 运城索引擎整合营销 信息安全专业大二课程 网站注册域名 网络安全试点示范工作 网络营销能力评比 网络安全保护方案 2017 信息安全 峰会 网络营销技术性 网络安全面对的威胁 厦门酒店网站建设 网络营销技术性 运城索引擎整合营销 搜索引擎营销顾问 网络安全法 金融机构 开展网络安全 网络安全法 上位法 中国联通 网络安全 移动网站建设 信息安全服务安全工程类 重庆主题营销页 网页制作 公司网站 邮件营销模式 建英语网站 免费搭网站 百度推广的知识营销 信息安全管理的原则 如何为公司做网站 信息和网络安全会议 佛山营销型网站建设公司 镇江网站推广 信息安全iso27001 网络安全逆向工程 网络安全公司排行 邮件营销的步骤有哪些 网络安全安全组织 2017 信息安全 峰会 太原手机网站开发 网络营销公司 优帮云 网站迭代 信息安全测评机构的资质认定主要有 公需 新媒体营销外包公司哪家好 什么是信息安全事件 苏州响应式网站建设 网络安全公司排行 免费网站制作软件 一张图 网络安全小组 电器营销策划 网络营销能力评比 短信营销机 营销型网站 网络安全和人工智能 国内ui网站 青岛营销型网站建设 桃城区网站制作公司 政府网站设计 信息安全专业大二课程 外贸型网站 搜索引擎营销顾问 美国大学信息安全 电信网络与信息安全 上海简约网站建设公司新型营销方式 信息安全的应用技术 视频营销的优点 关注网络安全bolg 信息安全保障体系 无锡制作网站 网络安全技术应用期刊 搜索引擎营销测验 共筑网络安全防火墙 邢台做网站推广价格 北京微网站建设 移动网站建设 教育网站 网页赏析 网络营销针对哪些人群 郑州营销外包公司有哪些 专业信息安全服务资质咨询公司,-1 2016近期网络安全事件 北京网络营销公司 代加企业营销qq好友 信息安全等级保护 试题 河南做网站 网御网络安全管理系统v3.0 第二届国家网络安全宣传周主题 网站注册域名 广州网站设计公司招聘 网络安全面对的威胁 网络安全策划书 沈阳网站制作 中国信息安全安华 网络安全试点示范工作 微信营销月总结报告 网络营销与消费者 nike网络营销案例 河南做网站 北京微信网站制作