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
邮箱营销软件哪个好用吗做内贸现在一般都通过哪些网站上海创意型网站建设保定php网站制作网站建设公司net2006成都网站优化深圳网址网站建设公司广警转网络安全网络安全培训可见开网站程序横死之人,皆失亡忆,府下不收,久而为游魂。汉初年间,游魂肆虐,民间四乱。为治其乱,王召志士收魂灭魄。然适得其反,引阴阳之战,人死为魂,如涛涛江水难以断绝。是时,民间兴起一众,灭魂不作,却助其亡忆,所收府下。历年,平阴阳战,民得以栖息,人皆呼其摆渡人!年轻的边防警察军校成长史,爆笑的军校生活,无畏的禁毒,反恐等打击犯罪的战斗,生动反应了首战用我,用我必胜的豪迈誓言。世界浩瀚无测,但不一定有你期望的…… 但无限世界亦有无限的一切,亦是说一切的渴望都可在那寻找。 掠夺、守护、杀戮、正义、贪欲、恪守…… 无数的欲望在一根丝线的牵引下相聚在一个平台,激烈的碰撞形成一个巨大的混乱漩涡。 而一块石头在一个不合适的时机,被丢入了这个漩涡,引起了一阵波荡。而这时某些存在要小心些了,这块石头很喜欢拦路,别被摔个鼻青脸肿了。 乱世的群雄、无限的远航者、揉捏天地的神魔……这是李明的无限旅程,亦是铁血之人的归家之行。 这是一个魔法与科技并存的世界,这里有人类,精灵,同样也存在着魔族,数百年前,封闭了数万年之久的冥界大门开启,魔族来到了现实世界,并对现实世界的人类展开报复,人类为了抵抗外族入侵,纷纷建立了以魔法师为主体的抵抗力量,但现实世界的威胁不仅仅是只有魔族一个,关压着邪恶力量的封印正在逐步瓦解,年轻的少年掌控着来自其他世界的力量,他该如何解决这场威机?一切都是未知数。雪域,一处极其寒冷的地方,寒风冷冽,白雪皑皑,洛无期洛家长子,一个视为之天才少年,却因无法正常修炼被称之为洛家废物,还无情地剥夺了家族长子之位,并逐出家族,本来已走头无路的他选择自杀时,但天无绝人之路,被一神秘人所救走,从此一遇风云便化龙,翱翔九天, 掌控苍穹。一段未知星球讯号的发现,彻底改变了苏飞的命运,二十五岁的苏飞被带回八年之前,面对重复的人生,苏飞赫然发现自己的体内竟然存在一个外星智能生物……这一次,他不再平凡!林洛在上班回家途中被异界召唤系统砸中所穿越的故事。五年后叶云天重返都市,发现当年帮他的美女被害成了瘫子,当年青梅竹马的婚约女友骂他下等人,当年埋葬父母的坟头不许祭拜! 但谁人清楚,他已再不是当年的废物,而是人间最大势力诸天的王者!京城齐宝阁,无意当中得到一块神玉,掀起京城腥风血雨,神玉丢失,齐家被灭。三年后,齐远携神玉强势归来,重建齐宝阁;当年来犯者,死!抢我齐家宝物者,死!拦我者,死!我乃计都星下凡,先天便拥有阴阳眼。未出生就遭人算计,不足月被人挖出母体,先天有缺,易招恶鬼,命格犯煞,注定活不过百日。在奄奄一息之际,幸得牛四海相救,从此跟随其生活在一起,耳濡目染,终成一方守界人,自此可与神灵交流,可随意出入地府,逆天改命!
不备案网站 2016年网络安全形势 微信营销的关键步骤 深圳营销型网站 西安信息安全公司,-1 临沂学营销 网络安全专业的介绍 网络安全攻防演练平台 企业网络安全学校 微博营销运营网络安全 移动防御 冤亲债主干扰的表现咨询【www.richdady.cn】 儿子抑郁症的咨询技巧【www.richdady.cn】 缺心眼的前世记忆咨询【www.richdady.cn】 前世缘份的改命技巧【www.richdady.cn】 冤亲债主干扰对生活有哪些影响?【www.richdady.cn】 纠纷的自我保护咨询【企鹅383550880】√转ihbwel 与老公前世【www.richdady.cn】√转ihbwel 外灵的干扰特征咨询【微:qq383550880 】√转ihbwel 感情纠纷的原因分析【微:qq383550880 】√转ihbwel 孩子压力大的改运方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世因果咨询咨询【微:qq383550880 】√转ihbwel 为什么过世的前世记忆咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 邪灵的防范方法【企鹅383550880】√转ihbwel 心特别累的环境影响咨询【www.richdady.cn】√转ihbwel 灵魂化解的意义【www.richdady.cn】√转ihbwel 化解【σσЗ8З55О88О√转ihbwel 大龄剩女的婚恋建议有哪些?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 无形干扰的解决方法咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 发育倒退的前世记忆咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 亲子关系的家庭氛围咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 2012年中国互联网网络安全报告 企业信息安全事故案例 顺德手机网站设计咨询 信息安信息安全 网络营销的价值是什么意思 主流信息安全产品和服务包括,-1 外网网络安全 网络安全攻防演练平台 钢琴网站建设原则 信息安全测评费用 运营商投资网络安全 个人注册网站.com 饮料食品营销策划方案 信息安全资产管理 信息网络安全技术培训 网站的不同类学了网络营销能做什么 南京企业网站制作价格 2012年中国互联网网络安全态势报告 鹤岗做网站 济南网站建设优化 西安信息安全公司,-1 网站建设公司net2006 承德网站建设 注册网站的免费网址是什么 珠海专业机械网站建设 网络营销的4c是什么意思 手机网站设计开发服务 网站中文域名续费是什么情况 青岛建网站 网站请人做的 域名自己注册的 知道网站后台 怎么挂自己的服务器 虎门做网站 网络安全大事 网站换域名 承德网站建设 北京市重大网络安全事件 成都网站优化 信息安全大会2017 网络安全相关的暗网 网络营销讲师介绍 网络营销软件代理 2012年中国互联网网络安全报告 通信网络安全管理员技能大赛 多边形网站 北京招聘网络安全 计算机网络安全研究所 信息网络安全管理培训 成都网站优化 提供网站建设搭建 快速做网站 衡水做网站公司 成都国家信息安全中心 网站建设公司 长沙做最好网站 保定php网站制作 信息安全 最新消息 中国国家信息安全政策 2012年中国互联网网络安全态势报告 中国信息安全 淄博网站建设有实力 单位信息安全等级保护 龙岩网站制作 app网站公司 三只松鼠干果营销方案 多边形网站 邢台网站建设 网络安全大事 好网站的标准 网络安全攻防演练平台 论在线营销 临沂学营销 通信网络安全管理员技能大赛 长沙做最好网站 钢琴网站建设原则 国家 网络安全 信息 网络安全企业 深圳 网络安全案例题 信息安全审查员 网络安全企业 深圳 网络安全攻防演练平台 科技平台网站建设 运营商投资网络安全 南昌做网站 网络营销软件代理 中国十佳企业网站设计公司 广警转网络安全 山东济南网站制作优化 群营销素材 2012到2013中国信息安全状态及发展趋势 网站链接数 北京市重大网络安全事件 衡水网站优化 长沙百度做网站多少钱 提供网站建设搭建 网站参数 创手机网站 与营销相关的公众号 开网站程序 网站请人做的 域名自己注册的 知道网站后台 怎么挂自己的服务器 国家信息安全等级保护工作协调小组办公室推荐测评机构名单 邮箱营销软件哪个好用吗 衡水企业做网站推广 杭州整合营销企业排名 国家 网络安全 信息 广警转网络安全 全国公安机关网络安全保卫工作会议 .网站建设的目标 清徐网站建设 2012年中国互联网网络安全态势报告 万户网络网站顾问 清徐网站建设 信息安全二级认证,-1 上海整合网络营销javascript 识别手机并跳转到手机网站 并可回到电脑版 中山营销型网站设计 2016年网络安全大事记 ppt网站空间租赁 济南网站营销 网络安全顾问 信息安全专业岗位 国家信息安全办公室 网络安全法 启明星辰 西安信息安全公司,-1 网站参数 中石油信息安全~ 企业网络安全学校 南通外贸网站制作 科技平台网站建设 广东汽车品牌网站建设 互联网信息安全产业基地 红酒网站模板 清徐网站建设 网络安全建设规划 网站换域名 2017年网络安全宣传周 哪些博客网站好用?怎么编辑信息才容易被百度蜘蛛抓取到 与营销相关的公众号 网站建设收费