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
山东网络安全法网络安全 培训内容问答营销平台都有哪些网络营销公司培训互联网经济与网络安全2014 个人信息安全网络信息安全技术ppt工业信息安全产业联盟青岛网站制作金融网站开发网络安全专题徐东发现自己的手机不再耗电,这似乎与他做的一个梦有关,睡前一句普普通通的抱怨竟然让他实现了一个看起来并没什么大用途的愿望。在调查究竟是手机出了问题还是自己出了问题的过程中徐东遇到越来越多的怪事——陌生人对他不理不睬、太阳落山后日期似乎也并没有变更、联系不到自己的朋友和家人。 随着时间的推移,徐东认识到自己陷入了一个奇怪的空间,所有的人都如同行尸走肉。这一切困扰着徐东,直到通过手机通信软件联系到了唯一一个有着正常反应的人,他踏上了寻找同伴的旅程。社畜男主意外穿越获得教团传承, 异界魔兽卷土重来。看似平静的大陆实则暗涛汹涌。百年前的暗黑圣战是否又将重演?是仇恨还是宿命?是利益还是贪婪?让我们言归正传······ 金融大佬曹明义意外身亡,回到上世纪九十年代,身份变成一个混子。 面对糟心的家庭,困窘的生活,看他如何一步步由小做大,翻云覆雨,站立傲世极巅!穿越到平行世界,并且觉醒金牌经纪人系统。   陆晨也因此获得狗仔嗅觉、作曲制片等多项技能。   “听说花抻鱼参加歌手了?”   陆晨:“哦?这是可以说的吗?大法师有个私生子。”   “听说你还会写歌?”   陆晨:“略懂一点点,排行榜前十的歌都是我写的。”   “听说你还会拍电影?”   陆晨:“略懂一点点,全球票房也就200亿。”   “你公司还招艺人吗?”   陆晨:“先不招了,面试都排到瓦坎达去了。”   “你不准备出道吗?”   陆晨:“不准备,毕竟我要是出道了,别的明星还怎么活?”   而此时,陆晨的老板终于忍不住了。   “陆晨你快低调点吧!咱们公司成为整个娱乐圈的大敌了!”   陆晨:“诽谤啊!你诽谤我啊!”“我也不想装13啊,可是人家实力不允许呢~”宁阳市某间早餐店前,一个青年眼前散乱的字符逐渐变成了一道选择题: 即将在三十分钟后遭受致命危险袭击的你,如果要选择以下的其中一个东西救命,你会选择什么? A、地动仪。 B、自行车。 C、一个宽1.8米,长2.4米,厚度为四厘米的棕色木板。 D、一个精致的白色小旗。 E、一把能打出大火的打火机。 F、一扇通往不知名地方的门。 G、随机一把枪。 H、一把砍刀,一瓶水。 I、一块手表。 J、一个不需要电的电风扇。 K、一个随缘的神奇法器。 L、一个不知道效果的果子。 M、不知名神级修行功法。【咸鱼+系统+单女主+御兽+日常轻松】 楚紫:前世我是扑街写手,整日辛苦码字,最终劳累致死,这一世我变成了皮卡丘,化身咸鱼! 黎姝:前世我是女帝,弹指间山河崩陷,这一世同样要走上人族之巅,守卫人族! 楚紫:作为一个有咸鱼系统的皮卡丘,我只想做做每日任务获得咸鱼值,然后买点属性丹,升级成神兽。 黎姝:作为SSS级初代神兽,你不能每天吃饱睡觉调戏我,你要勤奋修炼,与我一同站在人族之巅,驱逐异族守卫人族!等等,你怎么有万千大道了?还有,你怎么把自己躺成天道了? 楚紫:变强非我愿,我只想躺平享受人生!一个被予为天才的少年 一段被命运安排的人生 一场横跨万年的阴谋“又是新书的开始。”王冉推开茶馆的大门,看着陌生的世界,说道。虽然他的故事从未停止......一个震撼万界之物沦落凡尘转化为人。将亿万年来平静的暗流,掀起一股惊天骇浪!! 一个千古难得一见的废物体质,却拥有万古无人能及的惊天悟性。且看,他在这被人觊觎的世界里艰难的开辟一条新的觅道之路……原本吴向东作为医院高新人才引进计划的成员而备受瞩目,却因为一场突如其来的医疗事故坠入深渊,不但被医院打上“推诿病号”的烙印,更是在同窗的推波助澜下被医院发配到乡下干起了赤脚医生,耽误了前程。 虽然多年后他凭借精湛的技术在医疗行业中闯出属于自己的一片天地,却始终因为那件事被人诟病,无法将自己的健康理念推向全国,而后在某次醉酒中他发现自己重新回到1999年的那场医疗事故的当晚。 于是那个男人回来了,他凭借前世经验,在那个单纯以治疗疾病为目标的年代,始终坚持以病人本身为治疗原则,在他的带领下,医疗行业发生翻天覆地的变化,而他和自己的团队也在一次次医疗事件中,逐步登上世界医学的舞台并伫立在世界之巅。
信息安全等级保护大会 网络信息安全技术ppt 网络安全专家:计算机网络安全 网络专业的网站建设 国外 信息安全管理 北京信息安全服务资质咨询,-1 互联网经济与网络安全 快速网络营销费用 网络专业的网站建设 长安网站优化 前世老公的前世记忆【www.richdady.cn】 祖灵的祭祀方法咨询【www.richdady.cn】 亲子关系的咨询技巧【www.richdady.cn】 前世缘份如何影响今生?【www.richdady.cn】 生活中的无形干扰有哪些咨询【www.richdady.cn】 财运不佳的咨询技巧咨询【微:qq383550880 】√转ihbwel 婴灵对家庭关系有哪些影响?【企鹅383550880】√转ihbwel 升迁障碍的职场策略有哪些?咨询【www.richdady.cn】√转ihbwel 老公家暴【微:qq383550880 】√转ihbwel 婴灵的超度方法【微:qq383550880 】√转ihbwel 前世缘份的重逢有什么迹象?【微:qq383550880 】√转ihbwel 与公婆前世的故事分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 阴间生活的前世因果【σσЗ8З55О88О√转ihbwel 发育倒退的环境影响【www.richdady.cn】√转ihbwel 升迁障碍的改运方法咨询【σσЗ8З55О88О√转ihbwel 提高情商的方法【www.richdady.cn】√转ihbwel 前世缘份的故事有哪些真实经历?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 事业不顺的职场心态威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 阴间生活的前世修行威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 冤亲债主的干扰原因咨询【微:qq383550880 】√转ihbwel 网络信息安全电信,-1 落地页网站 国家信息安全工程技术研究中心官网 营销与广告的区别与联系 网络安全信息安全 如何建设好英文网站 制作企业网站 济南做网站公司有哪些 加强个人网络安全意识 企业无线网络安全 微博营销网 昆明网站设计 网络营销是什么意思是 随机数在信息安全 网络安全服务机构指 京东金融营销策略 网络营销中广告的策略有哪些 论营销 网络计算与信息安全 信息安全等级培训教程 辽宁省网络安全协会 免费建个人网站 问答营销平台都有哪些 主流网站风格 衡水网站设计怎么做网站管理 网络信息安全技术ppt 邮件营销推广案例 信息安全培训 下载 对于网络营销的看法 信息安全技术与产品 网络安全和信息化建设实施方案 中企动力官网网站 企业网络安全发展 百度知识营销是什么 营销扣扣软件 商贸公司营销网站建设 国内比较著名的网络安全及防护论坛或网站 工业与信息安全 深圳网络安全招聘 深圳网站建设 独 网络营销要做什么 信息安全等级保护大会 网站建设成本 口碑营销法 信息安全管理文件控制程序 个人网站怎么建立 2017最新网络营销方式 东莞网站建设培训 衡水网站建设 上海营销型网站 信息安全竞赛官网 呼市网站制作 无线网络安全实例 广州响应式网站制作 世界各国网络安全 总结网络营销的案例 2014 个人信息安全 国外 信息安全管理 网络安全 活动 门户网站 网络安全 信息安全集成资质查询 昆明企业网站建设公司 定制版网站建设费用 营销扣扣软件 邮件营销推广案例 网络安全和信息化建设实施方案 企业网络安全发展 网络安全 培训 济南做网站公司有哪些 免费建个人网站 合肥网络营销外包公司排名 淘宝网店营销培训 信息安全技术与产品 2014网络安全报告 信息安全培训 下载 婚纱店网络营销 免费建个人网站 启明星辰网络安全 网络营销的微观因素 2017最新网络营销方式 北京信息安全服务资质咨询,-1 网络安全重点保障单位 企业无线网络安全 网络信息安全技术ppt 门户网站 网络安全 网络营销专业可以接本 落地页网站 网络专业的网站建设 公司通过信息安全认证 大数据信息安全分析师 营销管理培训课程 深圳网站建设 独 无网站网络营销 青色系网站 对于网络营销的看法 京东金融营销策略 青岛网络营销学院 信息安全等级保护大会 国家信息安全检测中心 济南做网站公司有哪些 网络安全产品培训方案设计 英雄联盟网站设计 网站建设新闻 阳谷建网站 网络信息安全 ppt 营销优势 2016 网络安全ppt模板 新网站制作平台 英雄联盟网站设计 广州响应式网站制作 长安网站优化 合肥网络营销外包公司排名 总结网络营销的案例 网络信息安全要求 什么是网络营销 中国网络安全委员会 网络安全从业者 衡水网站设计怎么做网站管理 营销与广告的区别与联系 顺德网站建设公司信息 酒店网络营销具体方案 信息安全 云安全 发展趋势 网络安全英文文献 网络安全 活动 主流网站风格 戴尔网络安全上海研发中心 广州响应式网站制作 长沙网站空间 大数据信息安全分析师 什么是网络营销 借助事件营销的案例 网络安全英文文献 营销项目的推广技巧 上海做网站 网络营销 微信 医疗