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
物理安全网络安全应用安全信息安全等级保护的基本流程网络营销策略模式爱民网站制作网络安全公众号无敌邮件营销软件为什么发送的邮件被qq邮箱直接送到了垃圾站国家 信息安全 标准国家网络安全日商业网站模板厦门响应式网站制作企业 网络安全 案例分析五年前,叶尘被暗害沉江,侥幸不死,穿越到其他位面,医武双修,达到巅峰之时重归都市,却发现自己有了女儿,但女儿却患了先天心脏病,妻子姜若雪也被抓走,叶尘怒了。他一怒,血流成海,江河撼动,让天地都为之变色。没有比这个更离谱的事情了! 陈墨只不过喝了几口水,居然马上就要死了? 【你如果还想活命,来,献祭十年寿命,我告诉你方法。】 陈墨愣愣的看着脑海中,一盏青铜灯表面浮现的血色文字。 他登上一艘被黑气环绕的豪华游轮,没想到青铜灯上的文字却立刻更新。 【我不会告诉你,这艘船上能造成你死亡的因素,大概有六千多万个……】 他吃了一颗仙气盎然的果子,以为是主角光环降临,获得了奇遇,从此走上人生巅峰! 结果青铜灯浮现文字。 【你吃了一颗充满污染气息的水果,等着死吧……】 陈墨有点控制不住下巴,这是金手指? 点燃灯芯,可以获得超凡能力。 他充满期待的盯着青铜古灯。 【抱歉,你的脑袋进水了,点燃失败。】 陈墨没有穿越,但是他一直赖以生存的世界病了,他也病了。 “如果我还有得选,我希望继续以人类的身份活下去。”金卷在手,天下我有! 文曲星下凡降世啦! 头脑简单,四肢发达的陈抟竟一夜之间成为文物双全之人?! 武曲星?文曲星 陈抟学渣的逆袭之路 架空历史,从古至今 敬请期待!这里没有玄幻,没有穿越;只有新活的生命,逻辑的真实。 这是一个虚构的故事;一个关于生意与情怀的故事。一群年轻人,在小说主人翁李非的带领下,历经千辛万苦,克服重重困难,在小城香州,书写了一段商业传奇。香水星河酒店,一个给予了无数客人美好记忆,承载着一群酒店人理想的航器,在到达了它辉煌的顶峰后,突然掉头…… 结果怎么样?为什么会这样?是历史的悲剧,还是人生的释然?——一千个读者就有一千个哈姆雷特——如果你想得出自己的结论,请阅读天界无际的小说《香水星河》。尽管不想承认……但这个世界已经如你所见……腐坏不堪。在适者生存的丛林法则里,墟界的人类单纯如蛆虫一般,在一切彻底崩坏之前,贪婪地吸食着最后一丝养分,于苦难的滋养之下,妖魔肆虐。有的人认同了这种不幸,并甘之如饴,玩弄着卑微者的生命。有的人开始醒悟,在这种看不到未来的境况中寻求解脱。他们想要逃离现世的苍白,远离这些令人窒息和疯狂的欲望,前往一个没有痛苦的理想世界……“我对这一切并没有太多的想法,深处这样肮脏的地方让我的性命平白遭受污染,我只想和我的伙伴们一起……活下去,然后找到出路。据说,在我的眼中有一方净土,其名为——归墟。”购物返家的途中,清许空被不知名的「某种物体」紧追在后。熟悉又似乎陌生的街道,三轮猩红的月亮,空气中牙酸的味道,无人应答的求救,跨越不过去的高墙和死胡同,这种超值组合让他想哭....绝望中,拯救他的是一名白发少女?!?!明末边境倭寇匪患猖獗,朝廷剿灭不力,黎民水深火热,时事从民间择选了一草根步步成王,力挽狂澜,只是这个成长过程有些让人惨不忍睹。神魔的游戏,养蛊人类,是举刀拿剑逆战万族,还是低眉俯首甘为奴仆,普通人的野望,你我是否都幻想过打破秩序,生与死,血与泪,离别与重逢,种种的选择,这是一部笑中含泪的作品,且看普通人如何末世中挣求活,选择自己的人生。陪朱棣走过最艰难的一段路。 这是个赘婿奋斗在乱世的故事。召唤到异界,校园生活,恋爱,战斗,朋友,生死,召唤兽,魂主魂奴
超市网站建设 优秀网页设计网站 佛山网站设计资讯 亳州网站制作 重庆微信营销的公司 网站结构 如需手机网站建设 聊城市网站制作 首都网络安全周 职业教育 信息安全 忧郁症的自我提升咨询【www.richdady.cn】 感情纠纷的情感疏导技巧有哪些?【www.richdady.cn】 通灵老师预约【www.richdady.cn】 头脑混沌的原因分析【www.richdady.cn】 无形干扰的前世因果咨询【www.richdady.cn】 意外事故的主要原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 大龄剩女的婚恋现状【σσЗ8З55О88О√转ihbwel 感情纠纷的咨询技巧咨询【σσЗ8З55О88О√转ihbwel 特殊学校的课程设置【σσЗ8З55О88О√转ihbwel 迟缓儿的症状与诊断咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵干扰的前世记忆威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 莫名其妙感伤的前世因果咨询【σσЗ8З55О88О√转ihbwel 感情纠纷的情感咨询【www.richdady.cn】√转ihbwel 如何化解婴灵带来的负面影响?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 暗恋的情感表达咨询【www.richdady.cn】√转ihbwel 缺心眼的案例分享【企鹅383550880】√转ihbwel 孩子学习不好的环境影响【www.richdady.cn】√转ihbwel 前世老婆的前世修行咨询【企鹅383550880】√转ihbwel 与女友前世的影响分析【微:qq383550880 】√转ihbwel 失业的环境影响【企鹅383550880】√转ihbwel 专业企业网站建设定制 企业 网络安全 案例分析 如何创建网站 c 网络安全 政府网络安全通报 开展网络安全认证检测风险评估等活动 职业教育 信息安全 icp网络安全防护 怎样给网站换空间 网络营销的策略是什么 网络营销策略模式 违反计算机信息安全条例 企业手机网站建设策划方案 网站制作好在百度里可以搜到吗 网络信息安全周,-1 淘宝营销技巧 网站有哪些分类 企业 网络安全 案例分析 网络微信营销公司简介 关于写策划的一个网站 信息网络安全 考试 深圳建网站 贵阳网站优化公司 安全牛 2016网络安全 企业网站 三合一 绵阳建网站 移动商城网站建设 深圳 信息安全逆向和渗透信息安全如何实现,-1 信息安全等级保护的基本流程 网络安全分类标准 2017信息安全 新闻 厦门响应式网站制作 西安营销推广 牛蛙网络营销怎么样 网络信息安全周,-1 网站双域名 湖南营销型网站建设 湖南营销型网站建设 网站首页被k e春秋网络安全实验室 cncert网络安全对抗赛 rsa信息安全大会 2017 网站需求 网络营销课程整体设计 网络安全公众号 优秀网页设计网站 对营销专业的认识 信息安全 混淆 扩散 网络安全局长郭启全 筑巢网站 网络安全 存在问题 济南做网站的公司有哪些 西安营销推广 职业教育 信息安全 佛山网站设计资讯 丹东网站建 信息安全年会 网络营销面试邀请电话 互联网营销调研 湖州网站设计 信息安全政策文件 如需手机网站建设 如何创建网站 信息安全事件记录 怎样给网站换空间 网络安全管理员 二级 网络安全的电视剧 物理安全网络安全应用安全 策划营销 策划营销 优秀网页设计网站 网络安全排名 银监会 信息安全标准 网站建设七点 电子邮件营销优缺 企业网站 三合一 淘宝营销技巧 政府网络安全通报 昆明企业网站开发 信件营销 高端的网站 网络营销编辑是什么 国家 信息安全 标准 网络安全软硬件 网络营销的策略是什么 微博营销运营方案 西安做北郊做网站 找柳市做网站 互联网营销讲师 内江网站建设 上海网站建设app 多语言外贸网站设计 网络营销工具的运用 谷歌网站建设 建站员工网站 对营销专业的认识 网站有哪些分类 上海网站建设app 营销环境的概念 网络 营销 设计 网站 广电网络营销实战营 政府网络安全通报 网络安全局长郭启全 网站关键词排名提高 网站生成软件 重庆微信营销的公司 自己创建网站 国家网络安全日商业网站模板 网络安全大赛 第二届360杯全国大学生信息安全技术大赛,-1 昆明高端网站建设公司 建外贸网站 贵阳网站优化公司 网络营销面试邀请电话 网络营销工具的运用 互联网事件营销ppt 长沙网站推广 安全牛 2016网络安全 icp网络安全防护 内江网站建设 简述局域网中网络安全设计的原则 企业网站 三合一 网站制作好在百度里可以搜到吗 关于写策划的一个网站 信息网络安全制度 互联网营销软件有哪些 石家庄网站建设公司 门户类网站费用 企业网站建站意义 广电网络营销实战营 网络营销品牌含义 乐清网站建设 虹口做网站价格 网络安全管理小组