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
微网站怎么制作网站设计规划广告营销推广石家庄企业商城版网站建设东莞市做网站公司信息安全ppt2017年网络安全日网站制作想法中国电子信息安全技术,-1网络安全英文文献主人公是天生黑白瞳,曾有道士说她活不了,可是她奇迹般活到18岁,并且遇到一个“道”的化身,改变了她的一生,可五弊三缺让她在爱情中不断受挫!又为爱下地府!等发生的一系列事我等了七年,只因为有人和我说七年后的今天一切都会不同。我没有问为什么,也没有说任何一句话,我选择相信。我总算等到了这一天,虽然我知道知道这一天的到来会不同,但我没想到我却直接站在了顶峰,是选择高高挂起还是一往无前站在最前沿,这个问题又会有一个答案嘛不一样的江山,不一样的大明,看我王不死如何发财,玩转娱乐圈,嚯嚯大明帝国。他,为爱入狱五年,出来竟发现未婚妻跟别人订婚了,原来他一直在错付!得知真爱父母双亡,瞎了眼睛, 成了家族的弃子!陈九临一怒之下,施针救人扭转乾坤! 摊牌了,老子就是南境之王,这一次我要让你做最幸福的女人! “有请我的世界个人pk赛冠军陆瑜先生上台领奖!” “有请我的世界跑酷竞速赛冠军,陆瑜先生上台领奖。” “有请起床战争总局赛FMVP选手,陆瑜先生上台领奖!” “有请我的世界红石挑战赛冠军,陆瑜先生上台领奖!”  …… 陆瑜:“能不能给我搬一把椅子上来,领个奖跑上跑下怪累的。” “对了,麻烦再给我准备一辆货车 ,我怕奖杯太多,待会带不走。” “谢谢,有请下一位嘉宾给我颁奖。” “你小子莫装逼!装逼可是要……” 轰隆隆—— 全能玩家陆瑜被雷劈死后,竟然转生成方块大陆的村民。 还是个傻子! 幸好,游戏的Minecraft的系统还在,成为傻子村民陆瑜从零开始方块大陆的生活。 【恭喜解锁一键砍树MOD!】 【恭喜解锁食物工艺MOD!】 【恭喜解锁拔刀剑MOD!】 “陆瑜,你怎么做到的?” “阿巴阿巴阿巴。” 陆瑜不知道,不关陆瑜的事儿。 九州大陆,万国林立。   赢云穿越大秦,成为始皇第九子,并获得了咸鱼系统,只要咸鱼,就可以持续不断的获得奖励。   于是,   赢云直接咸鱼起来,默默签到,不仅获得了无数奖励,还顺利突破,成了九州唯一一尊陆地神仙!   ……   有一日,   天降金榜,盘点最强生灵。   只见,   大漠之中,赢云一剑开天门,入陆地神仙,屠数十万军,举世震惊!   帝释天:“什么?这世界上还有比我更强的人?!”   孤独求败:“杀尽仇寇,败尽英雄,平求一敌手而不可得!这赢云,值得一战!”   ……   紧接着,   天道神兵榜、天军榜等相继曝光。   神兵榜第一,圣剑轩辕,属大秦九皇子赢云!   天军榜第一,大雪龙骑,属大秦九皇子赢云!   ……   嬴政:“这是朕那咸鱼儿子?!”   ……这是一个流量玷污的时代! 为了赚快钱,他们只需要改编,抄袭,制作一些口水歌,再加上这个时期扭曲的审美,乐坛早已不复曾经。 凌风穿越到平行世界,一档娱乐节目现场! 公开怒喷评委的评价和批判这种翻唱、抄袭风气! 不出意外,他遭到评委和全网的抵制! 面对抵制和质疑,凌风现场写出《孤勇者》,瞬间燃爆全场,将评委和观众全都唱跪! 之后,《青花瓷》《本草纲目》《赤伶》一首首国风神曲诞生! 凌风一跃成为娱乐圈天王巨星!东晋末年,英雄与大能的崛起,小人与叛徒的滋生一辰,你们家的床大不大呀,介不介意小女子们在此借宿一宿呢 你穿上衣服的样子真好看呢,你也是不穿更好看! 美女事业两不误,他全都,要要要!!!一颗巨大的陨石改变了这个世界,改变全部原有生态环境,可怕高强度辐射之下,人类只能够依靠自己 建立起安全区生存,安全区之外便是可怕辐射。 曾经温和生物在恐怖辐射之下,产生了巨大变异,以杀戮为乐,以毁灭为荣。 可怕陨石不止带来了可怕辐射和生态改变,巨大陨石之内,还隐藏了另一只可怕生物,它们进化出属于自己社会等级团体,拥有可怕数量军队。 人类在灾难之后,面临无数挑战,是否还能够重建属于自己曾经 家园,强大科技是否能够再一次拯救人类。 在这个灾难大地上,人类、异化兽和辐射生物相互之间撕杀。 主角是众多穿越者中一员,这一次他将会携带着红警3内将士们,在一次在这一片灾难之地,重启属于他们自己家园,他们不会在认输,也不会在失败!!! 新坑续写红警系列,请各位看官老爷们,多多支持呀!
网站被旅游业网络营销优势 南京 网站开发 网络安全防护的工作原则 郑州网络安全审核 门户网站 网络安全 网站建设方案 门户网站 网络安全 电商购物网站建设 汽车网络营销 微信营销的模式有哪些功能 祖灵的存在形式咨询【www.richdady.cn】 前世老婆的咨询技巧【www.richdady.cn】 孩子厌学的自我提升咨询【www.richdady.cn】 失业的应对方法咨询【www.richdady.cn】 脑部不清晰的自我提升咨询【www.richdady.cn】 家庭关系的幸福指南【企鹅383550880】√转ihbwel 去世的母亲的去向解析【企鹅383550880】√转ihbwel 失业期间的心理调适方法咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 财运不佳的财富积累方法有哪些?【微:qq383550880 】√转ihbwel 财运不佳的真实案例有哪些?【企鹅383550880】√转ihbwel 前世缘份的缘分再续咨询【σσЗ8З55О88О√转ihbwel 家庭中常见的意外事故原因【σσЗ8З55О88О√转ihbwel 纠纷的调解技巧咨询【企鹅383550880】√转ihbwel 邪灵的防范方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 升迁障碍的心理调适【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 缺心眼的表现及成因咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 感情纠纷的情感疏导技巧有哪些?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 头脑混沌的案例分享威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 什么原因意外威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 官司的法律咨询【微:qq383550880 】√转ihbwel 长春专业网络营销公司哪家好 新田网络营销 新闻网站设计原则 工厂信息安全培训内容 台州网站设计 信息安全服务资质认证公司 建电影网站宁波信息网络安全报警网站 中国信息安全院 海尔的营销理论 国网信息安全试题,-1 网络营销和普通销售 做网站创意 简述黑客攻击与网络安全的关系 网络安全检测公司 池州网站制作 网络安全与大学生 信息安全会议文件 网络对营销的好处 重庆做网站 新闻网站设计原则 英国信息安全硕士认证 网络营销的推销 美国 网络安全机构 国家信息安全实验室 公司信息安全ppt 设计网站需要什么条件 2016网络安全年会 惠州网站推广 南京做网站的有哪些 台州高端网站建设 建电影网站宁波信息网络安全报警网站 搜索营销 国内外信息安全标准 电商购物网站建设 网络安全 数据分析 无线网络安全性如何 大连营销外包公司怎么样 营销的研发和推广 网站建设用哪种语言最好 台州网站设计 信息安全测试方法 网络安全与大学生 2017信息安全大赛 网络营销 实践 信息安全测试方法 360信息安全大赛题目 美国 网络安全机构 闵行做网站 南京做网站的有哪些 网络信息安全的图片,-1 网络安全日实施 功能性网站制作 大连营销外包公司怎么样 在线营销型网站 购物网站建设 网络推广网络营销报价 信息安全需求不包括 集团门户网站建设不足 企业营销中心 网站 域名 互联网信息安全的解决最终还是要 网络营销在哪些行业 信息安全会议文件 网络营销的关注度 旅游网络营销方案设计 旅游网站策划书 北京欢迎你网站建设 重庆营销型网站开发 网络安全综合解决方案怎么保证单位信息安全,-1 北京欢迎你网站建设 网站 域名 网络安全防护的工作原则 天水网站建设 网站的目录结构 工厂信息安全培训内容 网络营销 实践 公安部 信息安全通报中心 高端汽车网站建设 网络安全实验室 wp 网络安全英文文献 设计网站需要什么条件 网络安全测评机构资质 汽车网络营销 郑州网络安全审核 番禺网站建设专家 信息安全服务资质认证公司 快速网络营销 南宁做网站 网络营销 实践 网络营销 你的课 公司信息安全ppt 郑州网络营销策划公司 网络营销与传统营销 信息安全标准化委员会 网站建设用哪种语言最好 网络安全与大学生 营销公司竞争分析报告 台州网站设计 2017 上海 网络安全周 禅城区建网站公司 石家庄企业商城版网站建设 2017 上海 网络安全周 郑州网络营销策划公司 电子商务网站设计 个人信息安全评估办法 网站建设方案 设计网站的优势 信息安全软件有那些 可口可乐网络营销计划 无线网络安全隐患 信息安全工程。 重庆做网站 营销和推销 聚美优品产品营销助理 网站被旅游业网络营销优势 网络营销 你的课 集团门户网站建设不足 沈阳网站推广 做网站创意 中山微信网站 手机网站设计 芜湖网站开发 网络安全综合解决方案怎么保证单位信息安全,-1 网站创建 网站的目录结构 南宁做网站 服务类如何做网络营销 集团门户网站建设不足 网络营销的推销 重庆綦江网站制作公司推荐 公安部 信息安全通报中心 百度教育山东营销 一个网站的主题和设计风格山东小孩信息安全 无线网络安全性如何 深圳推广营销策划 互联网信息安全的解决最终还是要 池州网站制作 美国 网络安全机构 闵行做网站 国际网络安全立法情况 购物网站建设 整体营销 网络营销策划的特征 东莞市做网站 营销的研发和推广 购物网站建设 深圳营销型网站建设 微信社群营销工具 信息安全会议文件 深圳营销型网站建设 国际网络安全立法情况 信息安全软件有那些 国内外信息安全标准 功能性网站制作 赢天下 网络营销 重庆做网站 网站建设方案 宝安网站设计公司 青岛高端网站开发公司 网络营销 你的课 高端汽车网站建设 网站 域名 中国网络安全委员会 中山微信网站 2016网络安全年会 新田网络营销 铜陵做网站 网络营销与传统营销 电商购物网站建设 重庆营销型网站开发 网络安全防护的工作原则 旅游网络营销方案设计 营销公司竞争分析报告 大连营销外包公司怎么样 国网信息安全试题,-1 网站建设方案 信息安全标准化委员会 商城推广人际营销 南京 网站开发 网络营销的推销 网站建设用哪种语言最好 关于网络安全的新闻稿网络世界 网络安全 网上营销策划公司 聚美优品产品营销助理 免费建站网站大全 如何保护自己的信息安全在网络上 义乌做网站 国家网络安全管理办法 网络营销引流软件 网络安全的漫画 360信息安全大赛题目 网络营销干嘛的 2016 网络安全ppt模板 互联网信息安全的解决最终还是要 高端网站设计建设 网络安全类的公司排名 信息安全工程。 宁夏网站设计 2017年网络安全日 南京 网站开发 网络安全日实施 禅城区建网站公司 电子商务网站设计 昆明网站制作 做网站创意 番禺网站建设专家 商城推广人际营销 网络营销引流软件 网络安全行业招聘 信息安全软件有那些 上海 网络信息安全评定 isms 网络安全 数据分析 闵行做网站 网络安全工程师课程 营销公司竞争分析报告 龙岗网站建设公司 昆明网站制作 北京欢迎你网站建设 郑州网络营销策划公司 大连营销外包公司怎么样 青岛高端网站开发公司 网站的目录结构 网络营销的关注度 网络营销策划的特征 2016网络安全年会 高端汽车网站建设 美国 网络安全机构 关于网络安全的新闻稿网络世界 网络安全 重庆做网站 网络安全测评机构资质 池州网站制作 南京专业做网站的公司哪家好 网络营销和普通销售 信息安全服务资质认证公司 做网站创意 网络安全综合解决方案怎么保证单位信息安全,-1 信息安全需求不包括 英国信息安全硕士认证 食品类b2c网络营销 关键信息基础设施网络安全检查填报系统 池州网站制作 信息安全标准化委员会 自己怎么做网站 北京欢迎你网站建设 网上营销策划公司 闵行做网站 网络安全的漫画 信息安全标准可分为 网络营销引流软件 2017 上海 网络安全周 网络营销与传统营销 高端汽车网站建设 无线网络安全隐患 信息安全测试方法 国际网络安全立法情况 中国电子信息安全技术,-1 2017信息安全大赛 无线网络安全隐患 赢天下 网络营销 汽车网络营销 国家网络安全管理办法 赢天下 网络营销 南京做网站的有哪些 网站不收录 镇江企业网站建设 网站被旅游业网络营销优势 网络营销策划的特征 石家庄企业商城版网站建设 网络安全实验室 wp 唯品会的营销策划方案 重庆做网站 360信息安全大赛题目 H5建网站 网络安全行业招聘 如何保护自己的信息安全在网络上 深圳网站制作公司 讯 营销公司竞争分析报告 网络安全防护的工作原则 新闻网站设计原则 长春专业网络营销公司哪家好 苏州网络营销公司 中国网络安全附属 铜陵做网站 关键信息基础设施网络安全检查填报系统 整体营销 简述黑客攻击与网络安全的关系 集团门户网站建设不足 北京欢迎你网站建设 网站制作想法 微信营销的模式有哪些功能 信息安全需求不包括 信息安全标准可分为 公司信息安全ppt 免费建站网站大全 网络安全 律师 高端汽车网站建设 郑州网络安全审核 深圳营销型网站建设 旅游网络营销方案设计 一个网站的主题和设计风格山东小孩信息安全 手机网站设计 功能性网站制作 东莞市做网站 信息安全服务资质认证公司 重庆綦江网站制作公司推荐 中国网络安全发展史 360信息安全大赛题目 响应式网站设计的要求 设计网站的优势 360信息安全大赛题目 龙岗网站建设公司 信息安全标准化委员会 东莞市做网站 可口可乐网络营销计划 国家网络安全管理办法 营销软件网 网站被旅游业网络营销优势 长春专业网络营销公司哪家好 台州高端网站建设 2017 上海 网络安全周 英国信息安全硕士认证 网络营销宣传推广方案 百度教育山东营销 苏州网络营销公司 食品类b2c网络营销 商城推广人际营销 汽车网络营销 无线网络安全隐患 昆明网络营销的发展 在线营销型网站 营销公司竞争分析报告 宝安网站设计公司 网络安全的漫画 如何保护自己的信息安全在网络上 微网站怎么制作 网站被旅游业网络营销优势 网络信息安全的图片,-1 营销的研发和推广 个人信息安全评估办法 广告营销推广 聚美优品产品营销助理 网络营销的关注度 信息安全等级保护测评师,-1 上海 网络信息安全评定 isms 信息安全服务资质认证公司 网络安全实验室 wp 大连营销外包公司怎么样 网站不收录 集团门户网站建设不足 网络安全日实施