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
安庆网站优化网络营销工具分为沟通类和什么网络安全宣传周主题是信息安全等级保护银行国家信息安全中心待遇国家信息安全中心待遇网络与信息安全科普移动网络安全 产业联盟上海专业网站建设咨询武汉大学网络安全信息技术保障及网络安全“云雨流动,荡彻蛟龙;平震惊雷,境源成谷不知此何间汤泉亦在此。”江湖百年间,常流传于世,不管多少辈人更替,却总有人想寻到此。 太阳落于下,光阴散于间,常有人言“汤泉异宝,繁如星辰,连震于宫,进之者,必成一代宗师。”此佳话谈笑于风云之间,江湖代代相传,为矢后人子孙谨记。 径者事分二,其言只不过是其中的一半,石碑所雕后传为“得宝者,映汤泉,落阴黄泉,永世献不入堂,唯有善终其章,其予鬼神,方换一世圣德,此乃天间邢之问也;此旅之称,汤问!”看着父亲被舅爷追打,头破血流,还不能顶嘴,目睹母亲含辛茹苦,为一大家操心劳累,叔叔、姑姑不仅不领情,还故意刁难,超华幼小的心灵,烙下深深的记忆。 他发誓,苦读寒书,通过高考获取功名,立志改变命运,出人头地,让欺负父亲的舅爷们汗颜,让不尊敬的叔叔、姑姑们忏悔。 然而,想法要变成现实,总不是一番风顺,他经历过大学苦难的历程,被卷入了企业复杂人际关系漩涡------ 在企业他在国企破产后,为了生活,被迫四处漂泊,历经沧桑,在险恶的职场,顽强拼杀,终于有了自己的一席之地。 陆无忧本是一世俗王朝的普通人,在他九岁那年,被一场修士的激战波及,机缘巧合之下踏上仙路,只求他日成大道,得永生……一个最美的修真时代,一个荡气回肠的修真世界,快来与他一起踏上这修真之旅!三站之后,出现了短暂的平静,三年后,s市事件成为新的导火线,那些潜伏在黑暗中的人,渐渐的开始活跃起来,而这场风暴将会揭开这世界的真相。当男主醒来睁开眼发现自己穿越到一个综武世界,只要破案准确,判案公道,就能获得武功秘籍,内力修为等各种奖励。从此,凌昊一步步开启了富可敌国,七国驸马,武林至尊的无敌之路...塑圣魂,觅长生,热血前行,登仙道! 我们是生活在一个多维的空间,现在所处的三维空间只是其中很小的一部分,其他空间到底隐藏着什么奥秘需要我们不断地探索。现代人的大脑开发只有10%,就连爱因斯坦的大脑使用率也只有15%。而古时人类大脑使用率是100%。有些事情不是你解释不了就认为不存在,那是因为你的大脑使用率太低了。特异功能的修炼过程也是在逐渐提高人类的大脑使用率的过程,当你的能力达到一定水平之后很多问题将迎刃而解。 玄武大陆的云壹因故意外穿越到地球,从此开始了他的地球逆袭求生之路。看一无是处的玄武流民如何利用自己的功法在地球大展宏图。疫情?我好像会治。劫匪?我能秒杀。战争?我能发财。游戏俱现,五开玩家李长生,突然获得五个号的修为! 别人满级200,李长生:“我1000级什么鬼?” 别的玩家只能选一个职业,李长生:“你见过八块腹肌的法师吗?”
epr营销 人群营销 中国信息安全测评中心待遇 网络安全的电影 信息安全等级保护标准 网络营销的前言 2014 网络安全 口碑好的搜索引擎营销企业 介绍几个成人网站 信息安全上网行为管理 心慌胸闷头晕的医学检查【www.richdady.cn】 家庭关系咨询【www.richdady.cn】 无形干扰咨询【www.richdady.cn】 心慌胸闷头晕的心理调适咨询【www.richdady.cn】 升迁障碍的解决方法【www.richdady.cn】 感情纠纷的沟通技巧【www.richdady.cn】√转ihbwel 感情纠纷的情感修复方法有哪些?【σσЗ8З55О88О√转ihbwel 事业不顺的原因分析【微:qq383550880 】√转ihbwel 家庭关系的情感维护咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何判断被冤亲债主干扰?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 家庭关系的和谐之道咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 邪灵的感应现象咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 心特别累的环境影响咨询【企鹅383550880】√转ihbwel 去世的母亲的前世因果咨询【σσЗ8З55О88О√转ihbwel 通灵老师预约【σσЗ8З55О88О√转ihbwel 前世记忆恢复技巧【企鹅383550880】√转ihbwel 前世缘份的缘分奇迹咨询【www.richdady.cn】√转ihbwel 婴灵的安抚与超度【σσЗ8З55О88О√转ihbwel 老公家暴的法律咨询咨询【www.richdady.cn】√转ihbwel 冤亲债主干扰对生活有哪些影响?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 昆山做网站 中国网络安全信息组长邢台网站推广 shopex站点栏目内容编辑后在网站上无法显示是什么原因 西安非营销类公司 网站加地图 shopex站点栏目内容编辑后在网站上无法显示是什么原因 北大青岛网络营销 上海专业网站建设咨询武汉大学网络安全信息 天津理工信息安全 长沙网站推广 信息安全审核员薪资,-1 优秀企业网站欣赏 内部列表email营销 济南网站建设第六网建 自建网站 整合营销什么意思 昆山做网站 中国网络安全信息组长邢台网站推广 shopex站点栏目内容编辑后在网站上无法显示是什么原因 西安非营销类公司 网站加地图 shopex站点栏目内容编辑后在网站上无法显示是什么原因 北大青岛网络营销 上海专业网站建设咨询武汉大学网络安全信息 天津理工信息安全 长沙网站推广 信息安全审核员薪资,-1 优秀企业网站欣赏 内部列表email营销 济南网站建设第六网建 网站的特点 网站制作新技术 赣州网站优化 台州网站设计 解放路 丹江口网站建设 科大信息安全专业 西安非营销类公司 自建网站 石家庄网站建设公司 wow网络安全怎么做 信息安全审核 招聘 营销外包 科大信息安全专业 怎么微博营销推广 网络营销网站推广 中国营销网 中国营销网 免费建学校网站 对于网络信息安全不仅个人要防范 紫色网站 信息技术网络安全 信息安全认证书 个性化建网站定制 柳市网站建设公司 网络与信息安全科普 信息安全上网行为管理 安庆网站优化 网络营销基本内容 介绍几个成人网站 推广与营销 天津理工信息安全 中山做网站的公司网站html设置首页 广州做企业网站找哪家公司好 网络安全la是什么意思 中国信息安全保护网 互联网广告营销策划 丹江口网站建设 网络安全渗透技术培训班2015 网络安全联盟认证 营销外包 信息安全的5大特征 网站的特点 idc网站建设 网络信息安全概述 网络安全实例分析 网络营销方法和应用研究 推广与营销 紫色网站 科技企业网站设计制作 中国信息安全保护网 网络营销的前言 idc网站建设 网络安全 个人信息安全 北京北京网站建设 中国信息安全测评中心待遇 途牛网网络营销策略 信息安全平台作业 多语言外贸网站设计 合肥营销型网站建设 徐州商城网站建设 信息安全就业培训 北大青岛网络营销 信息安全竞赛试题 厦门网站优化公司 丹阳网站建设 信息安全等级保护标准 2017网络营销大会 网站加地图 全国信息网络安全协会联盟 优秀企业网站欣赏 公司信息安全管控 网站主页怎么做永州网站制作 昆山做网站 大学信息安全等级保护管理办法,-1 公司网站手机版设计 网络安全组组织架构 好网站的标准 500强网络营销公司排名 北大青岛网络营销 网络安全的电影 信息技术网络安全 2017网络营销大会 信息安全 安全维保 公司网站手机版设计 华为信息安全心得体会 网站制作新技术 台州网站设计 解放路 网络安全中心 介绍几个成人网站 网络营销策划机构 什么是企业网站 中国民间网络安全协会 网站制作新技术 商城网站都有什么功能 山东网站建设 中国信息安全测评中心待遇 爱民网站制作 龙华三网合一网站建设 gartner 信息安全市场,-1 国家网络安全认证证书 博客营销 信息安全厂家 网络安全监测手段 信息安全的5大特征 网络营销的作用和职能