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
开展网络安全认证检测sem整合营销工具整合营销上海网站优化全网营销策划方案途牛网营销网络安全审计措施西安网站开发互联网营销学习达内 微软营销深圳it企业信息安全幸运与不幸,冥冥之中自有定数。幸运也好,不幸也罢,既然来到了这世间,怎么也得好好看看,这是个怎样的世界!一个失去小时候小子,阴差阳错的和小时候帮助的人走到一起 ,是否穷小子能翻身呢?一个初入社会的普通大学生,如何凭借这自己的头脑和魄力,在传奇世界里掀开一页属于自己的传说。白飞,穿越到游戏行业第一的世界后,发现自己欠了两千万的债务,绑定系统后发布了爆火的神作,同时开始靠着系统里的游戏,逐步走向了这个世界的行业巅峰…… 盛夏的夜晚,随着蝉鸣此起彼伏一个年轻男孩从樱花树下醒来,旁边似乎躺着一个年轻的小女孩,透过月光依稀的看到那两个兔牙,他不仅没害怕,浑身颤抖着说:“薄荷兔,谁…谁杀…杀了你,不……不是我,谁杀了……你,不是我……。”一直摇着,奇怪的是一直重复着,以为这样就能回到从前。 汉朝初期,军中缺少战马,因此匈奴贵族随便组织起一股骑兵队伍,就敢对汉朝边郡抢略。徐迁从小被虏入草原,幸而遇到了教他养马的师父。一个顶尖的剑客,为情遭人陷害,武功禁失,力经千难万险,恢复自己的功夫。 一个失了忆的刀客,初入江湖,想找回记忆,可是江湖险恶让想找回失忆的刀客受尽艰辛苦难。 这样奇葩的一刀一剑相遇了,他们会在江湖中刀歌剑舞着自己的故事主角王斌生活在一个以元素为尊,以科技为辅的世界,但这个世界并非如同表面一样美好,各国之间的战争,魔兽的入侵穿越平行世界,一场车祸让楚天昏迷三年。 醒来时,前女友已成为超级巨星,并即将嫁入豪门。 楚天:我为你们的婚礼献唱一首《嘉宾》。 瞬间红遍大街小巷。 一首《漠河舞厅》,让所有人感动。 一首《消愁》,道尽了人间冷暖。 再一首《平凡之路》,引发歌坛地震。 官媒:楚天是所有年轻人的榜样! 时代杂志:他的才华征服世界! 实在太无聊了,把身边的人都打造成明星吧。 资源? 我就是娱乐圈最大的资源! 庆历十三年,北方连年大旱,百姓食不果腹。又遇局势动荡,边境战火不停,本就苦不堪言的生活,更是雪上加霜。 武陵城裴家二公子,乃将相之后,却不争功与名,想着来此一生,好不容易有个富贵家庭,何不躺平,逍遥快活?谁曾想,朝堂上的一顿酒,把他卷入了历史的滚轮中,竟下不了车。 于是便见;诗书三千里,惊了天上宫阙! 更是见;南走十里遇黄马,黄马瘦如柴,马背少年背剑匣,一剑断了瀑布流。 世人皆叹:二公子有大神通啊!
制作外贸网站的公司 引擎营销收费 信息安全规划 国外的网络安全如何落地 网络安全对大学生的 开展网络安全认证检测sem整合营销工具 珠海网站营销 南昌个人做网站 广东市政府网站信息安全 免费网站域名申请 升迁障碍的职业发展如何规划?咨询【www.richdady.cn】 无形干扰咨询【www.richdady.cn】 外灵【www.richdady.cn】 升迁障碍的职业发展【www.richdady.cn】 财运不佳的投资建议【www.richdady.cn】 婴灵的前世今生【www.richdady.cn】√转ihbwel 事业不顺的职场突破技巧有哪些?咨询【www.richdady.cn】√转ihbwel 如何改善财运不佳的情况?【微:qq383550880 】√转ihbwel 感情纠纷的情感沟通方法有哪些?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵干扰的咨询技巧【微:qq383550880 】√转ihbwel 强迫症的自我提升咨询【企鹅383550880】√转ihbwel 大龄剩女的自我提升【微:qq383550880 】√转ihbwel 有官司的调解技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 事业不顺的职业规划【σσЗ8З55О88О√转ihbwel 亲子关系的教育建议【www.richdady.cn】√转ihbwel 亲子关系的改运方法【σσЗ8З55О88О√转ihbwel 前世因果化解方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 阴间生活的前世因果咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 儿子抑郁症的自我提升【微:qq383550880 】√转ihbwel 投资项目咨询【σσЗ8З55О88О√转ihbwel 大理网站建设 顾问营销系统 信息安全相关政策 常州制作网站信息 网站关键词排名 石家庄网络营销推广 湖南的商城网站建设 书法网站建站目标 设计网站多少钱 国家信息安全资质认证 信息安全和网络安全的区别 深圳网站维护 免费网站域名申请 顾问营销系统 人口健康网络与信息安全风险评估 网络安全产品国外品牌 信息安全的实现有哪些主要技术措施,-1 引擎营销收费 it企业信息安全 建网站主机 西安网络技术有限公司网站 wifi网络安全机制 支付宝网络营销成果 网信办 网络安全 句容网站建设 公共网络安全专项检查 华为 网络安全特性 珠海网站营销 西安网站开发 网站设计价格 公安部网络安全员 工控企业信息安全 互联网营销学习 网络营销理解不正确的是 2016网络安全国际会议 网络营销实践报告 题目 南昌个人做网站 2016网络安全国际会议 上海做网站 公司 达内 微软营销深圳 网页设计 教程网站 个人怎么做病毒营销方案 北京建设网站的公司 网络营销人群分析报告 网络营销促销策略 信息安全相关政策 加强信息安全培训 广州企业网站建设 属于网络安全服务 大理建网站 网络安全产品国外品牌 网站关键词排名 建网站主机 海珠营销型网站制作 西安网络技术有限公司网站 国家信息安全资质认证 营销软件培训 国家网络安全体系 信息安全测试工具 网络安全保护 网络营销事件地产网络安全保卫局官网 中国计算机网络安全网 国家网络安全宣传 网络安全产品国外品牌 制作网站公司唐山 珠海专业医疗网站建设 做网站要多少钱 网络营销的市场前景 湛江有帮公司做网站 信息安全规划 镇江网站建设公司 贴吧营销 网络营销经理线上 广东市政府网站信息安全 网络市场营销方式 网站的作用 五级网络安全状况 网络营销实践报告 题目 国家安全下的网络安全 湛江网站设计 信息安全相关政策 德清做网站 企业网站案列 功能类网站 公共网络安全专项检查 互联网营销学习 网络营销服务包括什么 引擎营销收费 莱西做网站 柯力士信息安全怎么样 病毒防范与网络安全 山东网络营销 中国信息安全认证中心邮箱 智能电网信息安全 联想 信息安全 企业网站案列 湖南的商城网站建设 网站建设联系电话 深圳网站维护 大理网站建设 佛山网站建设是哪个 大市场营销组合构成6P 合肥网站制作 五级网络安全状况 大理网站建设 直接营销缺点 信息技术与信息安全网 属于网络安全服务 直接营销缺点 青岛微网站 网站添加百度地图 长安建网站公司 信息安全和网络安全的区别 镇江网站建设公司 网络营销理解不正确的是 采用邮件营销的广告 大理建网站 宁波信息安全公司排名 网站设计价格 学信息安全考研 微信营销软件招代理商 首都网络安全 三星网络营销策划书 国家安全下的网络安全 网信办 网络安全 双色调网站 极速营销软件 网络营销理解不正确的是 信息安全准入 北京设计公司网站分析一个网站 关于网络安全协议 全网营销策划方案 创意网站建设公司 信息安全广东省大学,-1 怎么进网站