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
自己创网站郑州手机网站推广公司信息安全销售总监邢台建一个网站多少钱网络整合营销套餐番禺网站建设怎么样无锡建设网站制作长沙手机网站建设团队营销案例引导营销如何建设公司门户网站(杀戮果断+外挂+无圣母+后宫)主角叶安凭借前世三年末日经验从人性与丧尸与无数变异生物展开了剧烈的杀戮。 重生一世,蓦然发现这一世能看到所有物品信息包括各种前世未出现的不知名怪物。看到了物资箱,看到了几万年甚至几万年乃至几百年的隐藏古墓(遗迹) 叶安:这一世有了准备,一定要超然所有生物之前......   这辈子我都不会让你抢走她的。这辈子我要一报还一报。让你尝尝我上辈子受的苦。   汤文一觉醒来。天呐!(⊙o⊙)啥? 保家卫国是我们的职责! 起来!不愿做奴隶的人们!把我们的血肉,筑成我们新的长城!………………魔主?我的乖乖,想不到本公子竟然会是最大的反派 宋江:那是我的梁山? 萧禾:梁山?星主的?谁说的,靠边靠边,我先来的 宋江:可是,九天玄女给我说的 宋徽宗:吾的九鼎何在 道长:在梁山本文基于《阿给姆传奇》。 继肖国辉从避难所矩阵苏醒之后,在现实的地表世界生活了三十几年。在最后一次对海外避难所的远征之中受伤,回到77号避难所之后,在基础医疗设施的帮助下准备安度残生。此时的避难所已经是人去楼空,唯有曾经的保守派首领,避难所人类管理员代表科拉还在坚守岗位。作为迎来送往现实世界和阿给姆之间桥梁,科拉也在垂暮之年和基本瘫痪的肖国辉谈起了管理员之间代代相传的秘密,而内容和肖国辉几十年前在阿给姆大陆上每晚重复的怪梦有关。。 除了外表肢体的残缺,肖国辉的内脏器官也收了无法复原的重伤。眼看生命已经流淌到最后一滴,唯一的办法就是再次回到阿给姆世界之中,靠着“先知”的特权和矩阵中与现实不同的时间比例来继续曾经荒诞的传奇。【女帝+系统,全新世界观,不是完美同人】 开局穿越玄幻世界,叶辰获得女帝养成系统。 但在系统进行绑定之时,周围并没有人族 生灵,叶辰的养成对象,被迫绑定为一棵柳树! 更让他没有想到的是,洛神界的一位无上女帝,竟然重生在这棵柳树上。 于是… “叮!鉴于宿主的养成对象于绝境中重获新生,宿主受到反馈获得混沌体传承!” “叮!鉴于宿主的养成对象进化为草木精灵,宿主受到反馈获得至尊骨传承! “叮!鉴于宿主的养成对象蜕变为九天神女,宿主受到反馈突破到神王境界!” 多年以后,叶辰于神路尽头,俯视着芸芸 众生,心中不免有些感慨。 唉,本想好好养成而已,没想到一个不小心,我竟然成为了无上神帝! 面对死灵族,封印着怪兽八梼的佣兵,最后能否成为拯救世界的力量?神秘的空间系元素亲和力,诡异的星辰剑,亚夏人的先祖吴道轩视乎留下了什么秘密……古神大陆自诞生以来便流传着一个传说,命运之门会在一个时代结束时降临,得见命运之门者,可以登临神境,进入命运之门者,可获永生。 …… 杨凡天生道骨,却被家主算计和爱人偷袭,落了个修为全失,道骨被夺的下场,正当奄奄一息时,遇到了曾经见过命运之门的鬼圣阴无虚,并夺了对方的一身机缘…… 境界划分:炼体、苦海、神宫、仙台、破虚、同体、大圣、大帝、半神、神……这个世界充满了奇幻,无尽大陆上的事物总是充满了奇幻,人族、妖族、天使族和恶魔族为主要的族群当然还有少数族群,一次次奇幻之旅在这里将此展开。少年被家族遗弃,遭受刺杀修为被废。 危难之际开启镇魂世界,神秘女子百般磨练,终修剑道。 自此修行坦荡,领悟无上剑道,修不灭剑体。 修武技,破苍穹,入圣域,掌握天下权,醉卧美人膝,翻手为云,覆手为雨, 轻挥手中剑,剑出移山镇海,诸天星辰陨落,横断八荒四野; 九洲雷霆动,剑气侵万古,临绝世剑神。天赋不够,系统来凑。 穿越异界的顾言喜提回收系统。 世间万物回收之下都可以超级加倍? 那岂不是无敌了? 信心满满的顾言当即就决定这一世一定要不同凡响走向世界之巅。 本故事纯属虚构,如有雷同,恭喜恭喜,所见略同。
电子商务网站建设内容 信息安全等级保护综合管理系统 新手可以自己建网站吗 购物网站如何推广 网站样式 网站建设售前说明书 技术支持 网站建设 信息安全实训总结 单仁营销 如何建设公司门户网站 升迁障碍的职场建议【www.richdady.cn】 脑部不清晰的生活习惯【www.richdady.cn】 学习成绩差的自我提升【www.richdady.cn】 邪灵咨询【www.richdady.cn】 纠纷【www.richdady.cn】 什么原因意外的心理调适【企鹅383550880】√转ihbwel 大龄剩女的婚恋规划咨询【σσЗ8З55О88О√转ihbwel 有官司的前世因果【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与男友前世的故事分析咨询【σσЗ8З55О88О√转ihbwel 缺心眼的沟通技巧咨询【企鹅383550880】√转ihbwel 事业不顺的职场调整有哪些方法?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 亲子关系的咨询技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 纠纷的前世因果咨询【微:qq383550880 】√转ihbwel 儿童发育倒退的原因【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 磁场化解服务【www.richdady.cn】√转ihbwel 化解咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 精神不振的自我提升【σσЗ8З55О88О√转ihbwel 感情纠纷的前世因果咨询【企鹅383550880】√转ihbwel 学习成绩差的咨询技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婴灵的超度流程【微:qq383550880 】√转ihbwel 大连网站制作推广 自学营销 新手可以自己建网站吗 国家实行网络安全等级保护 信息安全等级保护三级方案 电子商务网站建设内容 网络与信息安全系统工程师 中国网络安全防护 2017 429网络安全周 番禺网站建设怎么样 权威的网络安全网站 技术支持 网站建设 2.信息安全有哪16个威胁请解释 武汉高端网站建设 2014中国信息安全防护大会 做网站公 2016 信息安全 国际 福州网站制 美国 信息安全人才 长沙 做营销型网站的公司 引导营销 国家网络安全 物联网 东莞市做网站 权威的网络安全网站 北京网站制作公司招聘 网络安全 绿盟 网络安全服务机构资质 网络事件营销 网络安全态势分析 网络营销店铺推广问题 浙江高端网站 地方门户网站建设 北京网站制作公司招聘 2016 信息安全 国际 温州微网站制作公司电话 自助建立网站 深圳建网站公司 深圳建网站公司 微信营销总结主题 自学营销 信息安全服务标准 公司网络安全实施 肥城网站建设 网络安全法中的网络一 购物网站如何推广 企业响应网站 做网站公 陕西信息安全 企业网络安全的现状分析 浙江高端网站 网络安全重大案件 中国网络安全大事件 禅城区建网站公司 禅城区响应式网站 团队营销案例 晋中网站建设 信息安全证书 排名,-1 2.信息安全有哪16个威胁请解释 网络安全检讨书 中国 国家安全局 网络安全 郑州手机网站推广公司 衡阳网站建设 EDM邮件营销营销推广服务 宣传类网站 人大信息学院信息安全排名 王秀军 网络安全与信息化 人大信息学院信息安全排名 企业网络安全的现状分析 2014 网络安全事件 重庆綦江网站制作公司哪家专业 重庆专业微网站建设 无锡建设网站制作 西宁网站建设 信息安全竞赛作品赛 公司网络安全实施 深圳医疗网站建设报价 2017 网络安全 大会 番禺高端网站建设公司 大连网站制作推广 个人个案网站 类型 中国信息安全的法律法规 宣传类网站 国内信息安全问题 网络安全安全大会 郑州做手机网站 郑州做手机网站 网站制作套餐 昆明网站制作 团队营销案例 单仁营销 银行信息安全会议文件 网络安全法分析 网络安全有什么证书 网站配色方案橙色 免费建网站的网站 信息安全等级保护 英文海底捞服务营销数据 网络事件营销 计算机网络和服务器网络安全问题 工业控制系统网络安全 王秀军 网络安全与信息化 工业网络安全企业 网络安全态势分析 网络整合营销套餐 2017 429网络安全周 网络营销行业由来 自学营销 信息安全证书 排名,-1 flash网站 网络安全安全大会 新网站优化 常州网站建设哪家好 微信营销总结主题 自己创网站 陕西信息安全 网络安全侦察 中国网络安全防护 2014 网络安全事件 重庆綦江网站制作公司哪家专业 重庆专业微网站建设 无锡建设网站制作 信息安全等级保护综合管理系统 信息安全实训总结 中国网络安全对抗 成都做网站多少钱 2017 网络安全 大会 地方门户网站建设 大连网站制作推广 网络与信息安全系统工程师 中国信息安全的法律法规 网络事件营销 信息安全 行业新闻 网络安全安全大会 网站建设售前说明书 郑州做手机网站 信息安全销售总监邢台建一个网站多少钱