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
网络安全技术视频2016中国网络安全大事沈阳营销策划 优帮云网络安全分析系统信息安全技术防火墙技术要求东软集团网络安全产品网站怎么设置支付功能网站与网址的区别如何买网站电子商务网站开发李风是个高三就辍学的人,为了奶奶的治疗费选择了送外卖,但奶奶还是走了,而且自己 从小就有心脏病,无意中捡到一个香水小瓶子,竟然把自己的病给治好了,从此靠着香水瓶发家致富综武世界 叶青在三不管地带开黑店。 小昭:老板,你心都是黑的,我才不要给你打工一百年! 师妃暄:黑心老板,休要坏我道心! 欧阳锋:年轻人,我劝你耗子尾汁,莫要将路走窄了。 赵敏:老板,你说那腹黑成功学,教教我,好刺激哦,我好喜欢。 张三丰:年轻人不讲武德,不过,你要不要跟我学修仙? 郭靖:叶大哥,以后我就跟你混了,你说让我干啥就干啥! ...... 叶青笑的五彩斑斓黑:诸位,本店明码标价,童叟无欺。叶凡上一世的仙王老婆重生归来,找到叶凡带他走上修仙路。 斩魔帝,斗五宗,破天穹,打开仙路,直杀天穹,带领全民修仙。 我的时代谁敢称无敌!上来一战! 以双修正道!混沌初开天道始,万族林立生者适。天道如海唤天堑,踏海征途道之巅。 ——洛尘兮 世间万物皆修行,道俱万千谁能赢。百花齐放争天地,唯有强者动乾坤。 ——黄梦燃 天堑海之巅,道祖洛尘兮与仙祖黄梦燃为道统之争一决胜负。最终洛尘兮技高一筹,将黄梦燃打下天堑海之下。自此天堑海上再无仙祖黄梦燃之威名,殊不知这只是黄梦燃借此达到他计划的第一步——重生!平头小子苏禅,带着妹妹苏婉儿到处流浪,岂料命运不济,遭受恶人毒害,身中奇毒,静脉尽断,险些丧命。天不绝人之路,开启系统,提升修炼。一边复仇一边恋爱,顺便带妹修仙。监狱禁闭室中有句话人尽皆知,有朝一日龙抬头,定让黄河水倒流,有朝一日虎归山,定让血染半边天。电影部的学生想打造出一条可以吸引全校人眼球的悬疑恐怖片。可是在他们到达拍摄地点没多久,却有学生遇害了。在找到凶手之前,更多的秘密浮现而出。出身普通家庭的陈少铭来到南方闯荡,好不容易成就一番事业,发生意外,他破产了。独自一人前往江边舒缓心情。眼看一辆飞驰的汽车就要装上一个孩子时,他奋不顾身地冲过去推开那个孩子,自己却被车撞了。当他醒来时,发现自己已经来到唐朝末年。在这里他即将开启一段神奇的人生旅程。方铭入赘刘家三年,成了整个秦州人尽皆知的废婿。 一场诬陷竟意外导致他祖传玉佩被融合激活,方铭一朝觉醒,一双神瞳能鉴世间万物。 奇珍异宝在我手,古玩界里任遨游,纵横都市我为王。 方铭:“我真的只想安静的做个废婿!可实力真的不允许啊!” 有幸穿越了,还是生在地主家,此生不缺吃穿却也不想混吃等死,所以傅小官随意的做了些事情,没料到产生的影响如此巨大。 皇帝要让他官居一品,公主要招他为驸马,尚书府的千金非他不嫁,荒人要他的头,夷国要他的命,樊国要他的钱…… 可是,傅小官就想当个大地主啊!
长期营销策划 网站和手机网站 官网营销 使用微博营销工具应该注意哪些问题 信息安全监管 专业的网络营销机构北京信息安全行业,-1 网络专业的网站建设 神州网络安全 网站怎么设置支付功能 网络安全威胁包括 家庭关系的幸福指南有哪些?咨询【www.richdady.cn】 外灵干扰的自我提升咨询【www.richdady.cn】 冤亲债主干扰有哪些案例?【www.richdady.cn】 迟缓儿咨询【www.richdady.cn】 孩子不爱读书的阅读环境咨询【www.richdady.cn】 前世缘份的识别方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 婴灵对家庭的影响【σσЗ8З55О88О√转ihbwel 升迁障碍的真实案例有哪些?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 灵魂化解的步骤【σσЗ8З55О88О√转ihbwel 财运不佳的风水布局咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 特殊学校的前世因果咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的沟通技巧有哪些?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 纠纷的法律援助【微:qq383550880 】√转ihbwel 有官司的案例分享【企鹅383550880】√转ihbwel 前世今生相关【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel “缺心眼”对人际交往的影响威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的故事有哪些经典案例?咨询【微:qq383550880 】√转ihbwel 与老公前世的影响分析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子厌学的原因分析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 人际关系不好的咨询技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 微网站怎么做 大学网络安全 国家信息安全中心 信息安全管理与监管 网站设计公司 上海 官网营销 深圳整合网络营销推广 网站建设机构 nike传统营销的案例 信息安全实验项目,-1 小型公司网站建设 大良营销网站建设流程 传统网站和手机网站的区别 网络信息安全公司的售后 提供商城网站制作 网站构架图 东软集团网络安全产品 媒体营销群 电子商务网站开发 柳州网站建设 信息安全研究期刊 水资源营销 深圳营销型网站 网络安全语录 网络安全保卫局3所 网络安全论坛 2017 制作企业网站 网络安全技术视频 网络营销所面对的挑战 6p营销案例 迭代思维 营销 中国信息安全法研究中心 微信公众号的营销作用 深圳网络营销公司排行榜 计算机网络安全研究所 水资源营销 做网站设计服务商 中国网络安全案例 深圳网站设计 建设元 网络安全 致辞 有个网站是 asp伪静态 放在空间里无法访问我怎样配置 深圳网站设计 建设元 旅游营销推广是指 网站怎么设置支付功能 网络安全内容大全 网站与网址的区别 信息安全有关的职业 长期营销策划 信息网络安全培训 企业营销助手 合肥微网站 网络安全程序文件 武汉大学网络安全信息 网络安全管理所 网站建设的 提升关键基础设施网络安全 创新型的顺的网站制作 南通网站建设 潍坊网站建设多少钱 网站开发技术方案 网络营销理论分析报告 官网营销 网络安全威胁包括 山西信息安全测评中心 信息安全 风险 合规 信息安全研究期刊 中国网络安全信息小组 信息网络安全培训 提供商城网站制作 信息安全 监控,-1 网络安全宣传周专题 绍兴网站建设公司 nike传统营销的案例 网络安全宣传周专题 银行信息安全等级保护,-1 鹤壁网站优化 课件营销 旅游营销推广是指 近几年饥饿营销的案例分析 微信公众号的营销作用 信息安全技术产业联盟 个人网络安全 2016中国网络安全大事 柳州网站建设 网络安全威胁包括 信息安全等级保护措施 惠普 网络安全 2014年中国网络安全现状 中国网络安全信息小组 美国 关键基础设施 网络安全网络安全排查 网站设计公司 上海 品牌型网站 微信公众号的营销作用 网站转换率 关于信息安全的图片 网络营销一般学多久 使用微博营销工具应该注意哪些问题 网站开发技术方案 信息安全 监控,-1 网络安全意见建议 国网营销 使用微博营销工具应该注意哪些问题 北邮 信息安全 国家线 网络营销的国内外研究现状 免费网站建设 百度一下 网站制作 手机 重庆九龙坡营销型网站建设公司推荐 惠普 网络安全 微网站怎么做 关于网站出现.ldb文件网站打不开解决办法换成sql server 潮州网络营销外包 2018年的网站制作 腾讯网络营销的挑战整合营销传播是什么 负面营销模式 信息安全管理咨询 云南信息安全等级保护 2017北京网络安全周 信息安全项目申请书 网站加网页 印度 信息安全 鹤壁网站优化 浙江省信息安全行业协会 南宁市制作网站的公司 中国联通 信息安全哪些博客网站好用?怎么编辑信息才容易被百度蜘蛛抓取到 中国网络及信息安全法 番禺网站建设培训 营销型高端网站建设价格 泰安网站制作 o2o网站制作公司 深圳网络营销公司排行榜 网络整合营销谁提出的 免费营销信息发布 网站制作 手机 网络安全保卫局3所 计算机网络安全研究所