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
设计型网站国家网络安全局巡视《信息安全服务资质》安全工程一级网络安全法 等保测评账户信息安全管理的核心内容,-1网络营销资讯站重庆大足网站制作公司推荐企业展示型网站怎么建安卓网络安全协议网络与信息安全实验教程网上营销代理都说商场如战场,可是有多少人知道期货市场是战场上刺刀见红的前沿阵地? 人生就像k线图,有阴线,也有阳线。 是怎样的人生经历,让男主角发出了“向左看,一目了然;向右看,一片茫然!”的感慨? 请走进这部小说,走进书中人物的内心世界,一窥主人公在漫山遍野芬芳中的情感历程,回望期货市场波诡云谲的变化,体会一飞冲天的快乐,也品尝泥沙俱下的痛楚。 本故事人物﹑情节均为虚构,若有雷同,纯属巧合。如果知道那是最后一次见你,我一定不会让你离开 樱花树下的约定,是故事的开始;他永远的失去了她,却意外穿越了平行时空,来到俩人最初相遇的时候,与此同时;以前的自己也来到了以后,一个完全陌生的世界。 事情会发生什么改变呢?历史是否还会重来,一切都拭目以待。九五后小县城协理员高煌在一次拍摄风景时偶尔入梦,结果在梦里获得了一座古老的神庙。通过这座神庙,高煌每一次在梦里都能垂钓上来不同的改变他命运的东西。那么,高煌会通过这座神庙,能让他的生活有什么变化? 而这座神庙的背后,又隐藏了什么故事? 请打开这本书,让我们踏上一段不同于他人的美好旅程!某个现代一个神秘的少年韩霄被一个神秘的世界穿越到武朝时代,但他来到末曾见过一个不一样的古代世界里。 他帮助武朝完成统一,实现了他未曾相识的世界。万年轮回,黑暗再临,千万年的阴谋,谁能破局?……一柄神秘的古剑,一处尘封的遗迹,当世界的真相展现在世人眼前,人们该何去何从?是反抗还是妥协?……手中的剑为什么挥动?只有靠你自己寻找答案![泛科幻·爽文·末世·丧尸]2199年,地球上的人类被迫通过各种方式重新认识“自己”。 原来,他们并不是地球原本的主人,或许,地球原本就没有主人。 苏美尔人与海王族人第一次星际战争延宕了100年之久 2199年, 战争和恶劣的自然条件使得人类数量迅速下降,从2099年的40亿暴风骤雨般地消减至1亿1千万 元世界被地球M国、约等国等瓜分为紫微星、太白座HDD等十三个区域,新的秩序即将来袭。。。 陈建国,这个D类人不知怎么就被推了上来。丧尸、修炼、称霸外星球。。。。 在地球,一亿多人被划分为A B C D四个等级,规则意识无处不在,为了保证生育质量,只允许A B 等级的人结婚。。 回到古代,成为一个小小的家丁,楚尘开始了自己的逆袭之路。 啥?被人当做童养夫,媳妇还不待见? 无妨,无妨,第一才女还在痴心等候呢,要不然考虑给一次机会? 啊?番国国师还要来登门辩经? 不怕,不怕,丢给一本《西游记》让他参悟,没准就能白日飞升了。 咦?燕国女帝又来密信要讨论人生哲理? 何必,何必,陛下要不我们还是躺下聊吧。 一剑转身三千里,一言可退百万师。 哥虽然不在江湖,但江湖上处处都有哥的传说。 我楚尘来了,就注定要名震天下! 见千年前的那场旷世大战,将这片大陆的格局重新改变。 几千年的进步,这片大陆步入了现代社会,却依然有人在追寻仙法的本源,最终他们得到了这样的答案。 金、木、水、火、土、风、雷、冰、光、暗、音、以太,十二种已知最直接的元素力量,是仙术?是法术?还是是魔法? 不!在这个世界里,它们就是纯粹的元素,是规则衍生出来的力量。 谁能坚持到最后,谁能更好的使用这种元素之力,谁就能成为这片大陆的传说。人类自诞生以来一直在与灾难较量,而人类的自私、贪婪、邪恶从未改变过。 最终人类终将会为自己所种下的恶果买单。 一场席卷全球的超级病毒疯狂肆虐!一切的平静被狠狠打破,脱掉文明袈裟的人性将暴露无疑,不止病毒,还有各种神秘组织,甚至是其他文明在背后慢慢张开他们邪恶的黑手。。身患绝症的叶文偶得太极拳的真传,并且觉醒了弘扬武学系统! 只要他用武学影响更多人,就能获得积分,兑换顿悟机会,获得各种高阶武学! 甚至,治好自己的病。 从此,叶文开启了他的练武直播! 拳震所有武林宗门,脚踏世间不服之人! 只有你想不到的招式,没有我治不了的高人! 所有人都要恭恭敬敬地,在键盘上叫一声“武神”。 叶文:“货真价实的太极拳要不要学?飞檐走壁的梯云纵要不要了解一下?不要?早晚你要跪地求着我要!”
网站打模块 中山精品网站建设信息 青岛制作网站 烟台网站建设设计 贵阳网站优化 企业平台网站建设 网站设计风格 网络营销有哪几种 北京网络营销培训网络安全威胁的分析 先进网站 营养不良导致的头脑混沌咨询【www.richdady.cn】 如何超度婴灵?【www.richdady.cn】 家庭关系的和谐共建咨询【www.richdady.cn】 强迫症的环境影响【www.richdady.cn】 缺心眼咨询【www.richdady.cn】 去世的母亲的咨询技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 官司的调解技巧咨询【www.richdady.cn】√转ihbwel 什么原因意外的原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 精神不振的原因分析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 如何化解冤亲债主的干扰?咨询【企鹅383550880】√转ihbwel 孩子不爱读书的阅读习惯咨询【企鹅383550880】√转ihbwel 投资项目的选择方法【微:qq383550880 】√转ihbwel 财运不佳的财富管理方法有哪些?【σσЗ8З55О88О√转ihbwel 前世今生的修行方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何知道自己是否有前世缘份?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何应对冤亲债主的干扰咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的重逢故事【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 大龄剩女的婚恋建议【σσЗ8З55О88О√转ihbwel 孩子不爱读书的阅读计划【σσЗ8З55О88О√转ihbwel 孩子压力大的环境影响咨询【σσЗ8З55О88О√转ihbwel 手机网站界面设计 网站设计风格 青岛网站设计报价 网站制作的收费 上海建设网站制作 利用网络新段子营销 顺义手机网站设计 网络安全缺陷 网站建设学习 设计师个人网站 宁夏网站设计在哪里 网络安全系统对数据库 杜蕾斯 社交媒体营销案例 信息安全技术研究中心,-1 网站建设 php 互联网产品营销 整形美容医院网络营销 企业平台网站建设 信息安全 是哪三者紧密结合的系统工程 营销知名安例 先进网站 chinasec安元可信网络安全平台 网络营销可以分为 济南营销型网站公司 重庆网站设计制作价格 国家网络安全局巡视《信息安全服务资质》安全工程一级 网络营销资讯站 安卓网络安全协议 网站策划方案 网络营销能力秀的作文 顺义手机网站设计 太原网站建设 手机网站开发技术 做网站资讯 企业 网络安全 案例及分析 网络营销网上观察法 乐清英文网站建设 成都网络安全公司排名 售后服务网站 2016信息安全审计发展趋势 国家信息安全师 公安部 营销型企业网站 信息安全专题宣贯手册 中山精品网站建设信息 编织网站建设 创新型的顺的网站制作 如何提高网络营销ar值 动力无限做网站 营销手机号 网络安全态势感知综述 先进网站 苏州企业网站建设 怎样学好网络营销 上海网网站建设 网络安全态势感知综述 珠海动态网站制作外包 西安做网站个人信息安全案例 网站建设学习 珠海动态网站制作外包 营销信 2016信息安全审计发展趋势 大连微信营销 南京网站设公司 互联网文化营销 可信网站验证 如何用网络营销的方法有哪些 网站网络架构 互联网产品营销 青岛网站设计报价 营销邮件标题 网站设计风格 南通营销网站建设 小米海外代理营销模式 国内外网络安全论坛 域名与网站建设 优秀网站制作 2014年网络安全发展现状 北京网络营销培训网络安全威胁的分析 辽宁网站制作 政府与机构类网站 企业网站seo 京东校园营销 番禺网站建设培训 信息安全 是哪三者紧密结合的系统工程 微网站备案 信息安全 院士 京东校园营销 绿盟网络安全宣传手册 网络营销网上观察法 网站区分 信息安全技术研究中心,-1 营销知名安例 南通营销网站建设 中原郑州网站建设 营销信 南京信息安全测评中心地址,-1 信息安全风险管理介绍,-1 维护网站 搜索引擎营销创意分析 网站设计风格 负责信息安全等级保护工作的监督 乌鲁木齐网站设计 网站制作的收费 网站打模块 科站网站 利用网络新段子营销 计算机信息安全检查 信息安全基础实验内容 网络安全缺陷 网站怎么写 网站策划方案 设计师个人网站 青岛制作网站 济南营销型网站公司 网络安全系统对数据库 4i营销理论的优缺点 成都建网站公司 信息安全技术研究中心,-1 杜蕾斯 社交媒体营销案例 高端的佛山网站建设 互联网产品营销 昆山网站制作哪家强 湖北省信息安全中心地址,-1家居企业网站建设平台 企业平台网站建设 网站打模块 cms网站 营销知名安例 网站网络架构 网络营销能力秀的作文 chinasec安元可信网络安全平台 互联网文化营销 在线购物网站功能模块 济南营销型网站公司 信息安全主要研究内容 营销环境