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
营销学习广元网站建设网络营销的策略是什么意思互联网怎么为影楼营销方案2017网络安全会议搜索企业网站改版新闻医院做网站微信营销软件代理网战网络安全探究信息安全 工具何天傲因为心中的女神,努力赚钱,就为了帮助女神的家人,可是钱凑够了,女神的家人早已健康出院,而且女神早有归属,是一位打着正义的旗号资本家。靠着压榨员工来暴利。何天傲心有不甘,告诉了女神真相。本以为女神会离开,却不想女神依然站在她的另一半那边。回家的路上,被一群人拦截着打,在他快死的时候,突然觉醒了一个奇怪的系统,从此,他的/开挂人生,开始了。平平无奇的小故事一代冰皇的成长日记,接受黑暗之眼的男魔法师,在冰霜洗礼下成就阿拉德大陆最强冰皇颓废的陆回穿越到20年前的初中,重拾激情。在他奋斗的过程中,历史也悄然改变。陆回不仅成就了一番事业,也获得了众多芳心。变成鬼后,我才发现有一只无形的收推动着整个世界带团,我是最厉害的导游! 影视,我是收视的保证! 综艺,我让大家笑口常开! 围棋,我拿了全部世界冠军! 投资,我有的是真金白银! 慈善,我从来不玩虚的! 因为,我有小智啊! 不过,小智,你真的累死我啦!来自星辰的启示, 人与神明相抗争。 超前进化的智慧, 痴迷幻梦不愿醒。 败军之将,梦途惊醒,逆天改命,铸就新(醒)程。 一个神奇的游戏,一次穿越时空的冒险,一个奇异的游戏时空,不可思议冒险。所有的历史人物齐聚于此,展开一场生与死的厮杀嘿,我回来了……唐虞帝国少年陈枫身怀绝世神器,修盖世魔功。战人界、屠魔界、挑仙界、冲神界。打遍诸世界,杀出冲天血路,成就无上至尊。(声明:新书发布,各位新老书友多多支持。群号:158697732)
中国 局网络信息安全 外贸型网站网络安全的法律 简约网站 网络安全完全宝典 移动网站建设 最专业的做网站公司 义乌建网站 2016中国网络安全年会 网站案例 沈阳开发网站的地方 精神不振的咨询技巧【www.richdady.cn】 塔罗牌占卜与心理分析【www.richdady.cn】 儿子抑郁症的前世因果【www.richdady.cn】 不爱读书的原因分析咨询【www.richdady.cn】 外灵干扰的前世故事咨询【www.richdady.cn】 感情纠纷的情感疏导技巧有哪些?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵干扰的前世因果咨询【www.richdady.cn】√转ihbwel 特殊学校的前世因果咨询【σσЗ8З55О88О√转ihbwel 迟缓儿的康复训练【σσЗ8З55О88О√转ihbwel 性压抑的心理调适【企鹅383550880】√转ihbwel 婴灵的安抚有哪些实用技巧?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 暗恋的前世因果咨询【σσЗ8З55О88О√转ihbwel 亲子关系的共同成长方法有哪些?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 冤亲债主干扰的化解方法有哪些?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 无形干扰的自我提升【σσЗ8З55О88О√转ihbwel 与男友前世的记忆解析咨询【σσЗ8З55О88О√转ihbwel 前世老婆的前世影响咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 有官司的预防措施【www.richdady.cn】√转ihbwel 维护良好家庭关系的秘诀有哪些?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 佛教视角下的前世今生【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 网站案例 企业信息安全期刊 外贸营销网站建设 陕西网络营销公司 手机网络安全论文 百度推广的知识营销 学生 网络信息安全 重庆主题营销页 网站建设基本流程备案 企业建网站多少钱 淘宝店铺全年营销方案 重庆网站设计公司排名 2017个人信息安全保护 上海专业做网站公司地址 诸城网站制作 网络安全 被动攻击 公司的信息安全系统 义乌建网站 信息网络安全员 网络营销发展 大连网站制作公司 怎么营销 企业信息安全事故案例 最新网络安全技术 清华信息安全网络安全 广元网站建设 网站seo 广元网站建设 2017网络安全会议搜索 微信营销软件代理网战 公司的信息安全系统 公司营销效果怎么样 2017全国信息安全大赛 网络营销基本程序 长春网站建设推广 2016中国网络安全年会 网络营销实例分析ppt 上海专业做网站公司地址 广州手机网站定制信息 酒店网络营销的方法 重庆营销网站建设 it行业和网络营销 简约网站 委托建网站需要多少钱 企业网络安全平台 服务器信息安全防御案例,-1 美国国际信息安全大会 大连网站制作公司 外贸型网站网络安全的法律 沈阳开发网站的地方 龙岗 网站建设 863信息安全考研 专题类网站 网络安全探究 网站建设基本流程备案 怎样设计网站 网络品牌营销手段 网络营销实例分析ppt 信息安全审核员 响应 信息安全 衡水网站设计费用 网络安全 菜刀 陕西信息安全网络协会,-1 喜欢 网络安全 网络安全 被动攻击 无锡做网站哪家好 网络安全是什么工作第二届网络安全宣传周 我国信息安全形势 网站案例 关于网络信息安全 全国专业信息安全服务资质,-1 数码网站建设 网络安全 菜刀 医院做网站 销售网站 济南网络营销推广 信息安全防护技术 营销e-mail 兰州网站优化 天津网站建设 信息网络安全员 无线网络安全设置怎么设置 网络安全的和 模版型网站 新型营销方式 建造网站 衡水网站建设 中国网络安全大会 安徽 外贸营销网站建设 网站案例 手机网站制作服务机构 微博与粉丝互动的营销案例 网络营销日常工作内容 电子邮件营销优点 陕西网络营销公司 信息安全审核员 我国信息安全形势 软文营销案例有故事 营销网站手机站 中国 局网络信息安全 顺德网站建设公司信息 网络安全的主要威胁是 网站设计模块 武汉大学网络安全 电子邮件营销优点 重庆主题营销页 企业信息安全期刊 2017网络安全会议搜索 企业建网站多少钱 网络安全宣传单内容 最新网络安全技术 重庆网站设计公司排名 长安公司网站制作 营销热门话题 上海专业做网站公司地址 2017个人信息安全保护 建英语网站 网络安全 被动攻击 响应 信息安全 移动网站建设 义乌建网站 顺德网站建设公司信息 网络安全攻击和防御 网络营销发展 喜欢 网络安全 互联网怎么为影楼营销方案 怎么营销 衡水网站设计费用 中国 局网络信息安全 最新网络安全技术 中国网络安全年会比赛 网站被k怎么办 广元网站建设 网络安全的和 可口可乐网络营销策划