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
网站和app的关系网络安全的危害有哪些基于基因网络安全检测百度网站安全检测信息安全外包评估方法青海做网站公司昆明网站建设排名重庆专业网站建设费用建网站主机台州卫浴网站建设【无限流+诸天+主神】本在国家会展中心领奖的李景,睁眼发现自己晕倒在一间毛胚房中。 冰冷,封闭,死寂的环境让他惊疑不已。 待他跑至窗口往外看时,他才发现…… 他竟被困在了一栋即将爆破倒塌的大楼中!流水线工人意外穿越至异界,开启了他的一段传奇人生。 2003年至今的真实娱乐圈大事“爽文演义”。 用半纪实的春秋笔法描绘作者一线文娱工作时的真实人生投影。 主角尚云从文娱江湖小虾米到顶级策划人的爽利不凡人生,秘辛频爆,异彩纷呈。 镁光灯下的娱乐圈, 上位者铭撰本纪,称王称霸; 高位者书写世家,纵横捭阖; 我们白手起家,努力靠双手奋斗出—— 属于自己的人间列传! ——娱乐圈之云上耕耘 纪实的手法记录生活,丰富的剧情白描梦想。 把人生写成一篇散文诗,近二十年的真实文娱经历,化作轻描淡写的一笔激情。 《娱乐圈之云上耕耘》上菜!公元2154年,一家工厂发生了核泄露,该核能可以把人感染成僵尸,联合国在世界各地建立了许多冷冻仓。主人公张博前往一个冷冻仓里冷冻。十年后,冷冻结束,张博前往联合国建立的军事据点,并且还当了一名士兵。可是好景不长,据点里出现了感染者,据点沦陷了。张博和据点指挥长前往一艘船上研究解药,但是由于没有帮手,他们只好前往另一个据点,途径一个小镇时得知那个据点早已陷落,并且最近出现有一个奇怪的帮派彩虹帮,并且这个帮派的彩虹破坏者决定攻打小镇,危机时刻,又出现了十万多僵尸。张博他们能抵抗僵尸吗?他们能否打败彩虹破坏者?他们能否能研制出解药,拯救世界呢?想了解更多精彩内容请看《僵尸之灾》。 (改编于作者"柯宇游戏"的《丧尸之灾》,已授权。)凌凡左思右想,打算给金剑起个名字,总不能一直叫金剑吧?这样太没面子了,就叫“行天剑”听起来就够霸气,凌凡很是满意。苏启蛰与自己的老六系统在各个次元之间的冒险故事,但随着逐渐的强大,一个巨大的阴谋也慢慢浮出水面为了世界而献出生命的英雄隐没在人海之中,故事便从此开始,一个失去了记忆的人从长眠中醒来,在这以上天为敌的混乱世界,他是否能找回真正的自己以及领悟所谓“来自世界的精神攻击”的真谛呢?那么,集中无限的精神之力,踏进这个世界的大门苏陌,白慕雅两人因王者荣耀而相遇相识,会碰撞出怎么样的火花呢?让我们拭目以待吧。陈寻怎么也想不到,自己机缘巧合参加的一次相亲经历,竟然就此翻转了他的整个人生。如果知道那是最后一次见你,我一定不会让你离开 樱花树下的约定,是故事的开始;他永远的失去了她,却意外穿越了平行时空,来到俩人最初相遇的时候,与此同时;以前的自己也来到了以后,一个完全陌生的世界。 事情会发生什么改变呢?历史是否还会重来,一切都拭目以待。
搜索型网站 信息安全防护方案 精美网站 济南专业做网站 深圳网络安全木马培训 何为信息安全 台州卫浴网站建设 家具公司想组建一个电商团队做一个b2c网站需要那些人员 百度网站安全检测 网站制作教程 失业的咨询技巧咨询【www.richdady.cn】 大龄剩女的婚恋故事【www.richdady.cn】 家庭中常见的意外事故原因【www.richdady.cn】 失业的案例分享【www.richdady.cn】 不爱读书的教育建议咨询【www.richdady.cn】 心理咨询与灵性指导【微:qq383550880 】√转ihbwel 阴间生活的前世故事【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 财运不佳的财富转运【微:qq383550880 】√转ihbwel 家宅磁场的检测工具【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 感情纠纷的改运方法咨询【σσЗ8З55О88О√转ihbwel 有官司的解决方法咨询【σσЗ8З55О88О√转ihbwel 如何知道自己有前世缘份?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 学习成绩差的辅导方法【企鹅383550880】√转ihbwel 前世老公的识别方法咨询【微:qq383550880 】√转ihbwel 构建和谐亲子关系的方法咨询【微:qq383550880 】√转ihbwel 感情纠纷的原因有哪些?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婴灵的安抚有哪些实用技巧?咨询【企鹅383550880】√转ihbwel 失业的前世因果【微:qq383550880 】√转ihbwel 如何改善财运不佳的情况?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 人际关系不好的表现及原因【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 建一个免费网站 大连网络安全公司 网站建设三合一 建网站主机 深圳网络安全木马培训 昆明优秀网站 网络安全的危害有哪些 网络信息安全服务能力,-1 国家计算机网络安全中心 营销环境调研周口网站建设 公司不需要做网站了 互联网公司 营销 启明星辰 网络安全 宜昌做网站 网络安全与管理 ppt社交媒体营销要不要做 电商网站前台模块 网络安全实验室 设备有哪些 手机微信的网站案例 建网站资料 网站建设超链接字体变色代码 网络营销新闻稿 家具公司想组建一个电商团队做一个b2c网站需要那些人员 网络安全年检信息表 评测依据的行业标准名称 手机应用网络安全 国家信息安全服务资质查询 铁岭网站建设 优秀网站案列 铁岭网站建设 网络安全服务资质认证 专业的西安免费做网站 百度网站安全检测 无锡网站建设 微信 网络安全风险评估内容 网络安全的危害有哪些 第一部网络安全立法 外贸网站推广方案 四川大学信息安全,-1 同方信息安全 网站销售 微信营销的案例分析 网络及信息安全设计 企业要网络营销 网络安全竞赛平台 信息安全部官网 创新的南昌网站设计 南宁会员网站制作 信息安全攻防技术公司 网站改关键词 网络安全考试认证 什么是网络营销组合 企业网站制作公司 国家网络与信息安全信息通报中心技术支持单位 长安网站建设费用 绿盟 网络安全日 信息安全 控制点 南通网站优化 中国网络安全网站 网络营销人才需求物联网信息安全保护公司 网站学什么 佛山企业网站建设平台 网站改关键词 做响应式的网站 国税网络安全宣传周 营销型网站的作用 西安制作网站的公司有 网络营销新闻稿 含有营销字的宣传语 网络安全通告 企业要网络营销 seo的网站建设 网络安全助理 网站维护说明 国家计算机网络安全中心 深圳网络安全木马培训 青海网站建设 信息安全 控制点 互联网全网营销公司 成都网络安全支队 备案 萧山网站优化 网络安全活动有哪些 第一部网络安全立法 信息安全防护方案 电商网站前台模块 网站建设三合一 网络安全漏洞 大连网络安全公司 基于基因网络安全检测 网络安全对抗大赛 信息安全外包评估方法 信息与网络安全监察 网络安全活动有哪些 网络安全基础知识浅析重庆涪陵网站建设 深圳视频营销推广 精美网站 浙江网络营销好的公司排名 网站页面组成部分 北京wap网站开发 网站建设计划书 建网站资料 武汉大学信息安全所 济南微网站建设 昆明网站建设排名 敏感信息安全性 仙桃网站建设 南宁会员网站制作 宜昌做网站 网站建设超链接字体变色代码 基于基因网络安全检测 集团公司网站方案 秒收网站 什么是网络营销组合 网站精品案例 何为信息安全 互联网全网营销公司 大连网络安全公司 东莞长安网站优化公司 25个网站 什么叫网站的空间感 网站建设三合一 二级域名对网站帮助 公安部信息安全监察 酒店网站制作策划 网络安全 最好的大学 谈谈数据库营销的特点 济南专业做网站 无锡网站建设 微信 中华人民共和国工业和信息化部就业指导中心认证网络营销师 重庆专业网站建设费用 长安网站建设费用 网站制作流程 网络安全具有很强的 信息安全等级测评师证 网络安全监控公司 回顾2012年重大网络安全事件 青海做网站公司