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
商城网站功能模块有哪些内容营销 软文营销营销发展课网站文风重庆微信线上营销方案网络安全 销售公司信息安全等级保护要求手机付费咨询网站建设安庆网站制作佛山做网站公司“队长,队长,醒醒…”“我的指挥失误了,让队友一个一个离去…”在这个世界中,人们想要生存,想要生存,就只有战斗。意识的模糊,该让我归于死亡之中。“想好这次复活的人选了吗?没有人比那对兄妹更能指挥队伍,也没有人比那对兄妹多承受好几把灵武。这是最后的复活核心,必须在这对兄妹之中选择一位。改变这个世界的规则!”这里是黑暗与光明鏖战千年,上古的神明都要为此陨落,其余诸神将神陨之罪视为极大的罪恶,因此赐给这个世界永远都不过结束黑暗。 “无数次,在人世间的焦土上,祈望光明” “神魔无情,还有人在祈祷神明” “天地不仁,大道无光!看看像我这样的凡人,都怎么诛灭神魔” “成神如何,成魔又如何!就由我来击碎千年的黑暗” …… 顾楠穿越平行世界,此世文娱不复前世繁华,正值百废待兴之际。   一首歌,顾楠拉来千万投资!   执导第一部电影,轰动整个娱乐圈!   导演、写歌、小说……   以前世文娱之繁华,顾楠创建了此世最富有盛名的文娱帝国!龙神之子龙熠被留在下界,面对悲惨的命运,龙熠又该如何面对?实习生林天意外获得祖先的传承,看林天如何在都市逍遥...现代佣兵周文意外魂穿到民国学生周文身上。他利用穿越带来的一颗佛珠的神奇功能,再加上后世带来的经验、知识和技能。打造了一只武功高强、军事技术顶尖的佣兵团队。 他带领这支佣兵团,历经中原大战、淞沪抗战、称雄上海滩。装备了当世最先进的各种武器,最后投身于伟大的抗日战争中。带着兄弟们杀鬼子......什么是江湖?有人的地方就有江湖,有恩怨情仇,一人一笔,言语之间,瞬间一招毙命,出手不留情,爱恨情缘,醉心醉脾,人在江湖,身不由己,一场重大的秘密将展现出来……何为末世?丧尸?魔怪?虫族?不!唯有当人类所恐惧的,所崇拜的,甚至是所幻想的一切都成为现实之时,才是人类真正的末日!灵气回涌,信仰重铸,这是神佛妖魔的饕餮盛宴,也是人类有史以来的最大浩劫!丧尸,异形,贞子,怪形,妖精鬼怪,神魔仙佛,这一切的一切,都将降临于世!这是真正的末日,这是末世……神魔纪元!——————这是不冷的第四本书,已完本三本共1500W字小说,无太监,人品保证,新书期急求支持!加更规则:打赏满100加更一章,鲜花满1000加更一章,加更的章节会在上架后爆发!狠心小姨 你莫跑一段爱恨情仇,一代精神领袖,横跨三界,携美女畅游九州,奋战疆场,金戈铁马,策马奔腾,穿越万里河山,与夏王开华夏一统,与褒姒调丝竹之情,领勇士救刘邦,出入汉宫,霓裳羽衣,再现华夏文明,助太宗杀兄泡嫂,与李治共享武媚,环肥燕瘦,皆出其手,他,是英雄、是败类、是奸雄、还是淫贼,上下五千年,皆无定数,一切皆有后人评说……
手机付费咨询网站建设 网络安全规则 b2c网站建设 重庆微信线上营销方案 网站设计模板免费建站 网站背景怎么弄2016年信息安全大会 杭电信息安全专业怎样 信息安全等级备案 网站推广费用 营销热门话题 突然过世的原因有哪些咨询【www.richdady.cn】 干扰的预防与化解咨询【www.richdady.cn】 儿子抑郁症的心理调适【www.richdady.cn】 精神不振咨询【www.richdady.cn】 与女友前世的前世案例【www.richdady.cn】 祖灵的超度仪式【企鹅383550880】√转ihbwel 缺心眼的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 忧郁症的自我提升【企鹅383550880】√转ihbwel 婴灵咨询【微:qq383550880 】√转ihbwel 公司破产的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何预防过早离世威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 有官司的解决方法【微:qq383550880 】√转ihbwel 前世老公的前世解析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世今生的修行方法【微:qq383550880 】√转ihbwel 如何知道自己有前世缘份?【微:qq383550880 】√转ihbwel 前世今生的缘分再续咨询【企鹅383550880】√转ihbwel 精神不振的原因分析咨询【www.richdady.cn】√转ihbwel 人际关系不好【σσЗ8З55О88О√转ihbwel 耳鸣的自我提升【σσЗ8З55О88О√转ihbwel 事业不顺的原因有哪些?【www.richdady.cn】√转ihbwel 信息安全实例 星巴克的微博营销案例 织梦dedecms网站热门关键词hotwords标签 安庆网站制作 营销型网站的基本模板 网络安全基础:应用与标准 4p营销理论图解 建立企业官方网站 信息安全与对抗赛 零售网站建设 网站营销方案 重庆网络安全检测公司排名 我国信息安全形势 免费kingcms模板影视制作公司网站模板+原程序下载 服装软文营销策划 关于网络信息安全 经典新媒体营销案例分析 信息安全相关竞赛 无锡网站推广网络安全 src 国家信息安全测评中心待遇 手机网站制作服务机构 株洲网站建设 陕西信息安全网络协会,-1 宁波网上营销网 星巴克网络营销的价值 网站都是每年续费的吗 腾讯信息安全运营中心 网站都是每年续费的吗 中国信息安全 江苏省信息安全等级保护网 宁波网上营销网 2013年进行互联网营销推广的企业各种网络营销方式的渗透 中国网络安全宣讲 中国网络安全宣讲 安庆网站制作 三只松鼠新媒体营销 余额宝网络营销 您的首页文件及网站程序需上传至ftp下的htdocs目录下 网站欣赏】 营销软件设计 授权管理 信息安全,-1 公司网站传图片 内蒙古 网络安全和信息化领导小组 大数据与信息安全报告 网络安全新生态 微博营销运营 网络信息安全组织机构 星巴克网络营销的价值 淘宝如何实现网络营销 airbnb 中国营销 网站主题网 信息安全等级备案 美国 信息安全标准 互联网营销百度百科 网站营销方案 授权管理 信息安全,-1 中国网络安全宣讲 网站营销方案 山西网站制作公司 网络安全 销售公司 专业网站建设 信息安全相关竞赛 网络营销方法的概念 网站文风 个人信息安全评估报告 网络营销工资 网站欣赏】 互联网品牌营销专员 微博营销运营 网络安全和信息安全的区别 内蒙古 网络安全和信息化领导小组 南阳网站建设 中国信息安全 网络安全等级保护评定 网站设计模板免费建站 网络营销基础知识 南山网站建设 网络安全新生态 宁波网上营销网 齐齐哈尔网站建设 无锡网站推广网络安全 src 湖南手机网站制作公司 媒体营销 2013年进行互联网营销推广的企业各种网络营销方式的渗透 怀旧营销的案例 湖南省信息网络安全协会 4p营销理论图解 网络营销及就是seo 国家信息安全测评中心待遇 内容营销 软文营销 齐齐哈尔网站建设 网络安全基础:应用与标准 大连网站制作公司 广东网络安全和信息化领导小组网站关键词排名提高 营销型网站的基本模板 网络安全和信息安全的区别 网络安全练习 南京做网站 怎么创建网站/ 聚美优品营销方案 齐齐哈尔网站建设 国家信息安全测评中心待遇 梧州网站优化 网络安全攻防竞赛 经典新媒体营销案例分析 自建网站 网络安全和信息安全的区别 宁波网上营销网 网站建立费用 信息安全等级备案 中国信息安全行业协会 湖南省信息网络安全协会 网路营销是什么 网站建设优化文章 群营销素材 中国信息安全等保网 部队网络安全协议书 网络安全 销售公司 airbnb 中国营销 广东网络安全和信息化领导小组网站关键词排名提高 网络信息安全组织机构 上海集团网站制作 无锡网站推广网络安全 src 您的首页文件及网站程序需上传至ftp下的htdocs目录下 推广营销策划 互联网品牌营销专员 常州做网站 网络专业的网站建设 网络营销基础知识 服装软文营销策划 国家信息安全测评中心待遇 微博营销运营 中国信息安全 网络营销的4c是什么意思 成都信息网络安全协会