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 in Bootstrap utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically.

<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

p>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="span6">
        Level 1 column
        <div class="row">
            <div class="span3">Level 2</div>
            <div class="span3">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>

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>

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: 767px) { ... }
  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) { ... }
  /* 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 hiding 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
重庆信息安全产业股份有限公司网站结构全响应网站制作网络安全专家和黑客好未来信息安全规范正式实施重庆整合营销那家最好天融信网络安全学院信息安全邀请赛无锡全网整合营销外包专业的网站开发公司王珂,一个普通的社畜,末世来临之际意外获得超能力,从此在末世混的风生水起,称霸一方。鲜血淋漓的战场,神秘的第三方势力,未完待续的故事…… 意外穿越进游戏世界的楚昱和盛追,在诧异和激动下开启了他们的游戏人生。 在不断和域界人洛羽的相处下,他们逐渐发现了这个世界里和游戏的不同之处,剧情中的漏洞究竟是bug还是阴谋? 友情、立场。 信仰的冲突下,他们的冒险究竟会如何发展呢。天地间有气运万千,每个人生来都背负着属于自己的气运,当一些人不满足于自身的气运之时,争运者便诞生了......一曲长歌动天下 一剑光寒十九州 救苍生,斩邪魔 宋鸾不负天下人蓝星人族降临无尽大陆,成为县令,这里万族争霸。 降临之初,每位县令都会随机获得一座县城和兵营。 招募兵种,掠夺资源,建立王朝,争霸万族! 而白源发现,自己竟然可以给兵营、建筑、文臣武将甚至是自己刷词条! 金色词条【真龙天子】【治世贤臣】【乱世虎将】【天官赐福】 紫色词条【破军煞气】【金戈铁马】【平定一方】 白源将自己的麾下全部刷出神级词条,带领着自己的文臣武将,从一介小小县令开始,踏上万族争霸的无尽征程,慢慢的,他站在了世界的最高处,从零开始打造了无上神朝! 规培医生王磊应聘失败,却获得透视脏器能力,更有神级手术技巧。 幼儿误诊,即将死亡,王磊:我看到了,支气管断裂,马上手术。 主刀医生误伤主动脉,鲜血喷到天花板,王磊轻松搞定。主刀:幸亏王磊在。 农庄爆发奇怪病症,全市医生晕头转向,大佬:快去请王磊! 小小的乡卫生院逐渐成为世界医学中心,无数患者和名医云集于此,周边房价超过市中心。 这一切,都是因为一个人。 张启,一名高二的学生。母亲在一年意外去世了,父亲伤心过度之后被查出有精神疾病每天卧床不起。在很多地方都试过治疗父亲的病,却没有多大的效果。同时也欠下了许多债务。但张启并没有放弃父亲,周一到周五上课,周末有空就做做兼职,用来补贴家用,却远远不够。某一天,债主找上门来。知道张启没能力归还,便将他绑到小黑屋,准备咔腰子。但过了三天,却什么也没发生。于是张启变逃了出来,却发现大街上没有一个人。只见漆黑的夜空上。六道红光划过,从此张启的人生发生了巨大的改变。讲述一个年轻人何晓娟重生回到高中的故事。一个出身贫寒的人 ,进入警局有多大的用处当代毕业大学生在床上睡觉,窗外天雷滚滚,魂穿到一个充满元素的修真世界,修雷法,对强敌,结好友,泡妹子,揭开一个世界的隐秘,究竟是大梦一场,还是真实存在。
淄博微网站 网站建设陕icp 山西信息安全 渐变网站 亚马逊网营销策略 方案网站 温州建网站 网站空间租 信息安全自评估报告 小米手机网络营销推广方案 提高情商的方法咨询【www.richdady.cn】 前世缘份的案例分享【www.richdady.cn】 性压抑的前世记忆咨询【www.richdady.cn】 “缺心眼”对人际交往的影响【www.richdady.cn】 家庭关系的和谐共建【www.richdady.cn】 莫名其妙感伤的情感释放【企鹅383550880】√转ihbwel 财运不佳威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 有官司的预防措施咨询【微:qq383550880 】√转ihbwel 升迁障碍的职场规划如何制定?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 心慌胸闷头晕威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 感情问题咨询专家【σσЗ8З55О88О√转ihbwel 头脑混沌的原因及对策咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 儿子抑郁症的心理调适咨询【企鹅383550880】√转ihbwel 意外的前世缘分【企鹅383550880】√转ihbwel 亲子关系的前世记忆咨询【微:qq383550880 】√转ihbwel 亲子关系的案例分享咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 儿子抑郁症的前世因果咨询【www.richdady.cn】√转ihbwel 孩子厌学的自我提升【σσЗ8З55О88О√转ihbwel 纠纷的法律咨询【σσЗ8З55О88О√转ihbwel 婴灵对家庭的影响咨询【企鹅383550880】√转ihbwel 外贸家具网站首页设计 娃哈哈的营销方式 免费网络营销课程 公司关于网站设计公司的简介 信息安全自评估报告 重庆整合营销那家最好 九江网站建设 网络营销最成功的品牌 网络营销 的概念 手机网络安全技巧 模板建站影响网站的优化排名 营销在线 网络安全研究所 微信手机网站 医院网站建设方案 专业网站运营托管 四川省 网络安全 网络安全会议2017 南昌 四川省 网络安全 网络安全 测试网站 VPN与网络安全 如何免费建网站 方案网站 宣传网络安全 网络安全的专业版 网站推广方案 网络安全的专业版 信息安全宣传作品,-1 信息安全等级保护 步骤 外国教程网站有哪些 小米手机网络营销推广方案 与信息安全相关的岗位 大连网站优化公司 天融信网络安全学院 网站建设营销排名方案 服务好的网站建设 渐变网站 网络营销策划的方法 企业可以申报的信息安全证书 网站建设陕icp 营销网站建设 网络安全公开课2017 网站结构 外部营销 九江网站建设 网络安全实时监控 威海网站优化 信息安全保护技术措施身边的营销 网络信息安全备案表 网站建设颜色注意事项 企业网页设计网站案例 渐变网站 手机微信网站建设 九江网站建设 网站建设营销排名方案 昆明购物网站建设 关于应用安全可控信息技术加强银行网络安全和信息化建设的指导意见 验证码与信息安全 网络安全积极防御技术 深圳电商营销策划公司排名 科技公司网站设 网络安全产品品牌 天融信网络安全学院 个人网络信息安全 网络安全事件 2017 自己开发网站需要什么技术 网站搭建方案 怎样给网站换空间 福州网站建设网络公司 网络营销专业建设指南信息安全竞赛证书 深圳企业网站建设公司排名 web网络安全培训机构 网络安全会议2017 南昌 免费网络营销课程 中山网站设计外包 邮件营销优势 广州网络信息安全测评中心,-1 医院网站建设方案 昆明的房产网站建设 重庆信息安全产业股份有限公司 个人网络信息安全 建手机网站 专业网站运营托管 福州网站建设网络公司 徐州网站制作如何定位网络安全以后去什么单位上班? 广州网络信息安全测评中心,-1 网络营销能力秀是传销 四川省 网络安全 上海有名的做网站的公司 亚马逊网营销策略 信息安全服务认证中心 如何免费建网站 手机网站制作时应该注意的问题 网络营销环境包括哪些 网络与信息安全管理人员配备情况 企业可以申报的信息安全证书 国防信息安全的老大,-1 服务好的网站建设 银行 网络安全主任 网络安全预警中心 网络安全 测试网站 病毒性营销的实例 网络营销最成功的品牌 什么网站流量高 网站推广外包 成都做网站 网络安全公开课2017 简易的网站 网络营销实训课程ppt ie8 中网站后台编辑器ewebeditor不能发布文章 营销小知识 营销在线 信息安全应急处理办法 中央关于网络安全 中央关于网络安全 网络安全 测试网站 gb/t 20984-2007 信息安全技术信息安全风险评估规范 网络营销实训课程ppt 外国教程网站有哪些 商城网站作品 网站建设陕icp 四川网站制作哪家好北京微信营销培训班 与信息安全相关的岗位 高端网站建设 怎么做网站信息 南京网站制作哪家专业 南昌市建网站的公司 小米手机网络营销推广方案 外部营销 公司关于网站设计公司的简介 模板建站影响网站的优化排名 网络安全研究所 信息安全宣传作品,-1 福州建网站 做网页 网站制作系统