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
简约型网站网站有后台更新不了创新的购物网站建设2012年网络安全个人网站模板上海的外贸网站建设公司排名网站建设报价单营销软文范例建设网站具备的知识制定攻防结合的网络安全战略梦中被仙女杀死,意外穿越到修真世界,努力变强,探寻自己的的梦中仇人(情人)杨小乐在推销的途中,误入城市一间隐秘的房子,在听到一声秒针的哒哒声之后,脑海里传来一个甜美的女声。 :恭喜宿主成功开启无问系统。。。 从此主角的开挂人生正式开启,拥有了所有平凡人穷极一生也无法拥有的财富,美女,神功; 当他轻而易举的站在了世界的最高处,却看清了这个世界的真相。 :“我命由我不由天,如果天道不公,那我就换了你这老天!” 。。。生命就是一场经历。没了高中的紧张,大学里放松了很多。 思想上的经历,可以通过多读书来实现。但生活上的经历,只能是自己切身体会。 大学四年,在酒吧兼过职,处了舞蹈系最漂亮的女朋友,球场上跟体育生比过武,跟英语专业最牛逼的男生交了朋友,社团招新上出名全校,也受过其他学生的欺凌,看到过同学生命的逝去,也一直结识更多新的朋友。 小说来源于现实,现实又何尝不是一部小说。货运物流是现代社会里不可或缺的一环,但很多读者朋友不了解这个行业,对这个行业可能有些疑问或误解。所以动手写了一部小说,以市区送货的货车司机视角向大家展示真实的货运物流生活。不仅想让读者朋友在阅读的时候能身临其境,更想在小说里加入车辆驾驶和保养技巧、人生感悟、防止被坑的技巧等等,希望读者朋友们能喜欢。(PS.第一次写小说,小说里有很多地方可能会不尽人意,欢迎提出意见和建议。)“那就让我来宣布对你的审判结果吧。”军事法庭上,一名身着盛装的法官对着面前的蓝发少年说着,纵使是他们在审判这个男孩,纵使法庭外驻扎着一只军队随时防备着,但仍旧掩盖不住他们眼里的恐惧,只有旁边的一位白发红装少年和金色长发绿色荷叶裙的少女能带给他们安全感。 “南宫星辰,故意发动战争,致使伤亡上万人,鉴于其知错能改,并在后来的战争中发挥了巨大作用,宣判:南宫星辰流放荒地,不得王命,永世不得入法斯。”‘’南宫星辰,领罪矣‘’温鹏捡到一个粉色手机, 然后就开始了一段被迫的“好人好事”之旅, 起初他是拒绝的,直到发现自己凭借这个手机,居然在妖界混的风声水起,成为了人间顶流......王晓与王明意外下触发了传承血脉洗淬一瞬突破,又在种种机缘之下得到了父母的信息,踏上仙踏,为亲人报仇。云燃与鹤念相识百年,结怨百年,一场大雪吹散了恩怨。 雪夜过后,不论恩怨,不论旧情,在这片星海繁花中,落花随流水流去远方,从此千年,世间再无鹤仙燃心农村青年陈春,因离异后,经人介绍与离异女张佳华建立恋人关系。因张佳华提出再婚后不想再生孩子,陈春父亲陈冬生对张佳华提出的条件很不满意。后来,经刘姨儿介绍,陈春又认识了周少龙的遗孀赵秀萍,而且,刘姨儿代表女方,说可以答应陈家一切条件,一定生孩子。陈冬生动了心,要儿子退了张佳华,接受赵秀萍…… 此小说情真意切,主人公经历悲欢离合,最后,陈春还是和赵秀萍在一起了。当汪柯在玩《隐形守护者》点下第二个选项后,看着屏幕上结局达成的提示,整个人都斯巴达了,他竟然是个活不过三分钟的男人?带着这样的疑问,他被一个谍战求存直播系统丢到了魔改后的谍战世界,开始了他的求生直播。系统告诉他,他的任务很简单,只要活过一集就够了。
网络营销运营部 数据及网络安全 建立免费个人网站 淮南网站建设好 句容网站建设 淮南网站建设好 潍坊网站建设 马 数据及网络安全 防火墙技术在网络安全防护方面存在哪些不足? 网站中如何嵌入支付宝 儿子抑郁症的症状与诊断咨询【www.richdady.cn】 婴灵的超度仪式【www.richdady.cn】 特殊学校的环境影响咨询【www.richdady.cn】 3. 情感与心理咨询【www.richdady.cn】 与公婆前世的因果关系【www.richdady.cn】 强迫症的自我提升威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 内心恐惧胆怯的咨询技巧咨询【σσЗ8З55О88О√转ihbwel 不爱读书的改运方法咨询【微:qq383550880 】√转ihbwel 邪灵的定义与特征咨询【企鹅383550880】√转ihbwel 前世因果化解方法咨询【微:qq383550880 】√转ihbwel 外灵对人的影响咨询【微:qq383550880 】√转ihbwel 前世缘份的咨询技巧咨询【σσЗ8З55О88О√转ihbwel 事业不顺的职场瓶颈如何突破?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 无形干扰的解决方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世缘份的常见类型【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 公司破产后的员工安置问题咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子不爱读书的原因【σσЗ8З55О88О√转ihbwel 如何改善亲子关系?咨询【微:qq383550880 】√转ihbwel 耳鸣的前世记忆咨询【微:qq383550880 】√转ihbwel 事业不顺的职场调整咨询【企鹅383550880】√转ihbwel 烟台网络营销外包 聚美营销 内存信息安全 潍坊网站建设 马 网站建设系统 2017国内网络安全公司 网络信息安全公告 本溪网站建设 高端上海网站设计公司价格 北京大学信息安全实验室 网络营销教学软件 信息安全服务规范 网络安全 销售 营销软文范例 网站开发商触屏版网站开发 甄别网络信息维护网络安全 网站中如何嵌入支付宝 杭州 网站建设公司 无锡网站 个人网站模板 茶叶蛋营销 瑞星:2013年上半年中国信息安全综合报告 上海公司做网站 徐州公司网站制作 2017国内网络安全公司 网络安全是黑客吗2017全球华人网络安全 如何定位网络营销渠道 网络营销教学软件 网站有后台更新不了 g20网络安全 网站托管 自学网营销运营 常州网站优化 网络安全需要编程么 淘宝营销策略是什么 嘉兴网站制作 g20网络安全 1.什么是网络安全 台州网站设计外包 沈阳做网站 做网站公司 甘肃网站制作公司有哪些 瑞星:2013年上半年中国信息安全综合报告 网络信息安全主题 网络安全与物理安全 网络营销环境包括哪些内容 福田网站制作 如何定位网络营销渠道 互联网营销 培训大师 重庆整合营销哪里好 潍坊网站建设 马 厦门全网营销 网络安全防护公司 网络安全行业销售怎么做 南京互联网营销公司排名 网络信息服务 网络安全保护 上海的外贸网站建设公司排名 青岛微网站建设 网站建设报价单 陕西信息安全管理中心 信息安全服务规范 营销网站案例什么意思 大莲网站建设公司 化妆品 网站建设案例 网络营销实战课程下载 计算机信息安全等级划分准则,-1 合肥做网站 合肥做网站 网络信息安全主题 大数据网络安全测试题 天津高端网站建设 信息安全管理职能部门 网站客户评价 网络专业的网站建设价格 国家网络安全专题 网络安全威胁类型 新潮网络营销 怎么给自己的网站更换域名 甄别网络信息维护网络安全 温州网站制作公司 微信群营销的推广方式 网络营销实战课程下载 衡水做网站找谁 深圳品牌模板网站建设 我们国家网络安全吗 信阳做网站 高端上海网站设计公司价格 上海信息安全等级培训 上海公司做网站 短信营销渠道 2017国内网络安全公司 网络与信息安全 网络信息安全面临的威胁 上海学网络营销的地方 网络安全与物理安全 2017年网络安全 上海公司做网站 有没有关于网络安全的工具 贵阳有哪些可以制作网站的公司 青岛微网站建设 互联网信息安全解决方案当中完善互联网信息安全的法律制度去的方法有 网络安全威胁类型 福田网站制作 南天信息 信息安全 网络营销渠道整合 一个虚拟主机在原网站根目录下加个子目录用域名转向怎么操作? 重庆搜索引擎营销工具 实行信息安全等级保护 o2o网站建设 网络营销的分析方法 北京大学信息安全实验室 徐州公司网站制作 数据及网络安全 网络信息服务 网络安全保护 2017国内网络安全公司 信息安全测评收费标准 新的网络信息安全法 建立免费个人网站 句容网站建设 上海信息安全等级培训 网络营销应当实施以 为中心的产品开发策略 网站的模板 高端网站开发建设 网络信息安全项目 网站中如何嵌入支付宝 佛山购物网站建设广州营销策划 优帮云 新潮网络营销 零基础学习网络安全 网站的模板 美国信息安全15万美元 系统网络信息安全 短信营销渠道 游戏的营销 o2o网站建设 甄别网络信息维护网络安全 微信营销培训