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
国家网络安全标准化机械网络营销2015年信息安全报告制度网络营销经典案例小型企业网站建设的背景网络营销商家公共信息网络安全监管网络注册信息安全工程师培训重庆网络营销战略设计信息网络安全等级保护工作自检自查报告彼时的少年已经站在了成长尽头,回首过去,一切崎岖早已繁花盛开。 神魔横行,仙尊镇世!地星,是一个仙道大昌之地!然修行者只为一己私欲,破碎山河,湮灭了这繁盛的修仙界! 天道伤隐,灵气绝迹,地星进入了漫长的枯寂岁月! 数十亿年后,外太空超新星爆发,突然而至的神秘物质,引出了地星久违的天道,灵气出,武(仙)道现。 杨东望,一名普通的大学副教授,偶得上一个纪元遗存的造化法宝玄天塔残骸,在灵气新生时就占据先手,并利用小宝塔中的残破记忆,逐步引导武(仙)道进入、改变了科技社会的方方面面,从而开启地星科武新纪元。 2022年世界处于爆发的未知灾害之中,百鬼索命,丧尸横行……就在人类面临种族存亡之时,世界面临毁灭时刻。一股神奇的力量在人类种族中爆发,力量拥有者有与其灾害抗争的能力,于是人与灾害的战斗就此展开。截止目前2070年,人类已然掌握了与灾害对峙的能力。而在世界的一个角落,钟源绑定了末日生存系统,从此踏上了不断变强的生存之路!一段感情,一个误会,一个等待,一个注定   落天?改夺小妹天命,牺牲自己成为所诛之害。 这条孤独路你能走多远?一个人孤行的滋味如何?将自己逼成一个阴深的魔鬼,你注定是一个失者,弃者。 落秋雪,由兄长血肉铺成的路,走的可是舒服? 安卿言,身为七微古丹星,你能除魔护世吗?如果那人是是你之至交呢? 冷寒秋,少了注定一世悲绝的命运,多了一世安然,如何呢? 尘月,你,又如何? 落天九辰,你又为何? 落天,谋算自己的死亡如何呢,是何兴致万分? “落所做之事,无人能改易,纵是执笔的你也无能改变!” “小妹吾,一定记得恨吾!” 哦?牺牲万千,却只希望她用恨记得你?你真是惨忍啊,落天,不我应叫你心病寻医,还是天暇无枢,又或上虚无辞?算了,古今一记,帝君神心,安泽儿,玄玄子,墨心无藏,神殊,鬼劫,这些名字中你自选吧。 “千面之主,尔何敢知道吾之本质?” “仙洲灭亡与七方三本一净之计,亦无人可挡这是一个称作《灵脉大陆》的神奇世界,这个世界没有魔法,没有武术,没有战斗力,却有着神奇的灵脉。这个世界的每个人在10岁的时候都会在灵脉大殿中,在灵兽师或灵斗士的帮助下进行灵脉觉醒。灵脉可以增强体魄,辅助人们的日常生活。有特殊天赋的人可以通过自身灵脉或召唤灵兽进行修炼并进行战斗,这些人被称为《灵斗士》和《灵兽师》 亡国遗珠沐岚(女主),一步步修炼灵脉,在灵兽(男主)望天君的辅佐下,由凡人之躯修炼成神界监察人界的使者判官,最终铲除了灵脉大陆上的邪恶力量,报了亡国之仇,成为了灵脉大陆上强者。古烬在创造女神的空间中醒来,发现自己失去了大部分记忆。在被女神的帮助下,他恢复了记忆,并与女神度过了一段快乐的时光。 一切止与古烬和女神的一场赌约。 他穿越到了女神创造的世界之一,在其中展开了冒险。 (敬请期待)逍遥自然,离奇古怪,理性奇幻。未世来临,无数人变异,无数人死去。人类只能在夹缝中生存,与各种异种周旋,混出一条生路来。姜丰是个小人物,没有什么大志向,可偏偏命运不会放过他,在他的生存路上,无数的危险,无数的恶梦,通通让他碰到,他拼命挣扎,要保全爱人、家人、朋友的生命,也要保全自己的生命,非常难,特别难,但是必须做。 人生逍遥路漫漫,慢修吾心妄烟云, 运极命数皆注定,鼎立混沌独自清。 罄音撩灵安坐钟,终了余生残破魂, 魂归故里望长生,深入宇空宙已寂。 漫定钟生,慢鼎终深。 人运罄魂,云清魂寂。真不是本人经历。  伟大的意志使得世界的尽头诞生了众神,他们即是整体又是无限,其意志和权能无处不在,无所不及。   当游戏降临现实,有这么一行人打开了基因的枷锁,爆发出神之力,有人觉醒成魔法师、有人觉醒成剑士、有人觉醒成圣职者、有人觉醒为刺客、有人觉醒为格斗家。   而秦长安却觉醒了最稀有的职业散人,可以说他全能,也可以说他是平庸。   那些被命运之手选中的人,可能会认为那些灾难是偶尔发生的悲剧...   但...这其实是巨大的命运齿轮,并按早已契合的轨道开始缓缓转动的信号。
重庆网络营销战略设计 外贸网站的建设 国家信息安全师 高级 小型企业网站建设的背景 国家信息安全测评认证 网站建站 seo 网上电话营销培训 2016网络信息安全事件 宣城网站建设 南昌的网站推广公司牛肉干营销 忧郁症的环境影响【www.richdady.cn】 官司的法律咨询咨询【www.richdady.cn】 去世的父亲的前世修行【www.richdady.cn】 忧郁症的前世记忆咨询【www.richdady.cn】 儿子不读书的原因分析【www.richdady.cn】 亲子关系的心理建设方法有哪些?咨询【www.richdady.cn】√转ihbwel 缺心眼的前世记忆【σσЗ8З55О88О√转ihbwel 为什么过世咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 心慌胸闷头晕的原因分析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 亲子关系的教育理念有哪些?咨询【企鹅383550880】√转ihbwel 孩子不爱读书的家长引导咨询【企鹅383550880】√转ihbwel 婚姻生活不顺【微:qq383550880 】√转ihbwel 事业发展的灵性视角咨询【企鹅383550880】√转ihbwel 家庭关系中的矛盾解决【www.richdady.cn】√转ihbwel 儿子不读书的心理调适咨询【企鹅383550880】√转ihbwel 儿子不读书咨询【微:qq383550880 】√转ihbwel 家庭关系咨询咨询【σσЗ8З55О88О√转ihbwel 孩子不爱读书的原因有哪些?咨询【企鹅383550880】√转ihbwel 前世缘份的故事有哪些真实经历?咨询【企鹅383550880】√转ihbwel 前世今生对现世的影响咨询【微:qq383550880 】√转ihbwel 洛阳网站设计 网上电话营销培训 免费申请网站 制作一个营销型网站 信息安全研究院 网络营销的作用是什么意思 网络安全保护设备 网络注册信息安全工程师培训 如何认识互联网营销 多个zencart网站收款邮箱绑定到同一个paypal主账号 360wifi网络安全密钥 上海客服营销外包公司 网络营销与网络销售的关系 机械网络营销 企业营销型网站案例 简述网络营销内容 建网站程序 网络安全英文新闻 外贸网站的建设 网站建站 seo 网站手机版制作 网络与信息安全认证资质证书 我国网络营销环境现状 信息安全对抗赛要求 信息安全的cia 中国信息安全认证 win7网络安全模式上qq 信息安全顾问视频,-1 idc网络安全 郴州网站设计 网络营销实训ppt 网站国际化 好的免费网站建站平台 网络营销信息传播效果 网络营销个性化服务 万网搜域名信息先看域名申请时间这个应该是最早的网站时间 做网站销售 网上营销渠道 国家信息安全师 高级 重庆网络营销战略设计 信息安全管理局 网站的形成网络安全与文明 网站类型案例 广州做网站信科分公司 汽车软文营销案例 西电信息安全录取分 互联网信息安全平台 计算机网络安全的访问控制技术主要有基于信息与网络安全监察 网络信息安全基础实施细则 建设官方网站 银川制作网站 下载建网站 网络营销可信吗 长沙企业网站 天津信息安全平台 优秀个人网站欣赏 沙井做网站 网站的排名和什么因素有关系 三合一网站建设 东莞企业推广网络营销 网络营销电话 营销证 河南信息安全对抗赛 金华安信信息安全检测技术有限公司 南昌的网站推广公司牛肉干营销 南昌的网站推广公司牛肉干营销 商业网站建设 雅虎网络安全 东莞企业推广网络营销 网站套餐 信息安全的威胁主要来自于,-1 网站开发流程深圳专业集团网站建设 重庆搜索引擎整合营销 公共信息网络安全监管 网络安全人才奖 2016 如何做好网络营销投资 美团网的营销特点 深圳信息安全认证中心 网络营销策划师 河南信息安全对抗赛 星巴克微信营销现状分析 高端大气的综合性网站 南通动态网站建设 中国信息安全认证 中小企业网站制作 金融网站开发方案 常见的网络营销策略有哪些 2017 网络安全 宣传 建一个政府网站 舆情监控 网络安全 网络安全设备 网什么 网站类型案例 小型企业网站建设的背景 常见的网络营销策略有哪些 上国外网站的dns 网上电话营销培训 洛阳网站设计 洛阳网站设计 公共信息网络安全监管 汽车软文营销案例 免费申请网站 病毒式营销淘宝 外国黄色网站 信息安全研究院 北京做网站的公司 我国网络营销环境现状 网络安全保护设备 郑州专业做网站 制作一个营销型网站 海尔最新营销模式 郴州网站设计 论坛如何做病毒营销 好的免费网站建站平台 万网搜域名信息先看域名申请时间这个应该是最早的网站时间 网络安全相关知识 信息安全的cia 郑州专业做网站 中央 信息安全工作会议 建行企业网站 信息安全顾问视频,-1 保定市网站制作公司 谷安 信息安全意识手册 信息安全网站 网络安全艺术字 信息安全测评项目 建行企业网站 陕西手机网站建站 高端大气的综合性网站 商业网站建设 2016网络安全教师 信息安全对抗赛要求 外贸模板网站深圳网络营销策划的分类 网络安全工程师和黑客 青岛设计网站的公司哪家好 cms企业网站