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
网络安全技术 pdf青岛建网站广州网站建设优化互联网信息安全举报深圳网络营销培训华为网络安全案例分析网络企业的营销模式是合肥做网站的中国网络安全标准深圳制作公司网站重庆包月营销推广公司一个灵魂被一个小女孩救了下来,于是,从他出生的那一刻起,他就注定是她的使者。 他的结局早已注定,他会孤独的走完这条路。 道路之下,少年静静的坐在这里,他蓝色的眼眸不知是在注视何处。 他的身旁是一个金色头发的小女孩。 “我要将那些人一个不留的全部摧毁。” “我帮你。” “我要付出什么。” “全部。”厌倦了都市生活的许平,机缘巧合下获得一方神秘仙境。 仙境中有山,有水,有农庄。 仙禽翱翔于山巅,神兽奔走于密林。 于是他回到农村,开启了新的人生。 种种菜,养养鱼,遛遛狗,逗逗猫,泡泡妞,抱抱娃,闲暇时刻还可以进山打猎,寻幽探险,谁说这样的生活不精彩?看似平静的世界中,有人身负法则之力,有序运转的法则之下,埋藏着鲜为人知的阴暗面……这是一个少年和他的同学们在未世生存的故事,虽是奇幻但尽量贴近现实. 由真正打过架、参加过击剑比赛的人描写的个人決斗场面。不花哨但你或许能学到決斗的真谛。至少不会边打边发表不可能的长篇大论。 由了解战争的人写的战争场面。主角绝不会不戴头盔在战场上大杀四方,盔甲也不是一捅就破的纸灯笼,各兵种更不是各自为战的一盘散沙。 每个角色都有独立的人格,自由的意志,绝不是主角的陪衬. 希望追求真实的读者喜欢。 喜欢意淫的,思想不切实际的人不建议阅读。 剑道漫漫,杀伐不断,没有尽头! 十大神域之首的剑霄神域域主,剑道第一人的剑逍神君为弥补自身少时修炼而追求极致剑道,只身进入早已经破碎沦为死地的冥界寻求神秘莫测的轮回之术,但是却不小心被卷入虚空裂缝之中身死道消。 再次苏醒发现自己竟重生于下界凡俗中...... 天生吾乎必呼吾,大道茫茫,我这次定将斩尽一切挫折,护我心上之人,去战那无上诸天! 高阳原本是个蓝星的雇佣兵,在一次执行任务中来到了金庸武侠世界--神雕。 在神雕世界中获得武林中人梦寐以求的武林秘籍,左手六脉神剑、右手降龙十八掌,年纪轻轻就达到别人一辈子的成就, 一个小小的蝴蝶能带动多大的效应?神雕世界因为高阳的到来又会有什么样的变化?神雕中的爱恨情况是否因为高阳的到来而改变? 让我们走进神雕世界,看高阳如何在江湖中翻云覆雨~~~~~ 各位书友要是觉得《神雕之我是大魔王》还不错的话请不要忘记向您的朋友推荐哦十年前不知情的星宸被父母遗弃,成为弃子。 十年后王者归来寻找想要寻找遗失的温馨,却被父母冷落,哥哥嫌弃,最终再次成为弃子。 弃子已成龙,看他如何找寻真相,识破阴谋,完成复仇。 有一天李避灾,突然进入了恶赎游戏,在寻找当年真相的过程中,发现了他的第二个人格...... 李避灾:我不行了!换你上! 李去祸:废物,自个闪开,看我揍他! . 生存或是死亡,这是个难题,在1000条错误的方法中,去创造一条Perfect的通关的方法吧!地府算什么东西,你凭什么资格,赏善罚恶? 地府算什么东西?现在我就来告诉你! 你们洗不了的冤,由我地府来洗, 你们办不了的人,由我地府来办; 你们担不了的因果,由我地府来担。 一句话,是是非非地,明明白白天! 赏善罚恶,大道特许。这就是地府,够不够清楚?车祸之后,钟鸣穿越到一个名为天选大陆的异世界。 夺舍一名远古怪胎后,因天道不公而境界无法进一步。 如今,天道降临天命之子。 破坏天命之子命运轨迹便可变强。 天命之子:“我注定要成为这世间最强男人!” 钟鸣:“不好意思,你的未来由我主宰。”
微信营销的成本 网络营销的价格策略 不属于网站后期维护 微信营销的成本 网络推广和微信营销 ubuntu网络安全 顺德网站建设市场 如何考取网络营销师 网络安全督查 个人免费网站注册com 缺心眼的咨询技巧咨询【www.richdady.cn】 亲子关系的互动模式【www.richdady.cn】 纠纷的法律援助咨询【www.richdady.cn】 投资项目的案例分享【www.richdady.cn】 耳鸣咨询【www.richdady.cn】 事业不顺的职场建议有哪些?咨询【σσЗ8З55О88О√转ihbwel 解梦咨询【σσЗ8З55О88О√转ihbwel 升迁障碍的原因分析咨询【微:qq383550880 】√转ihbwel 内心恐惧胆怯的心理调适【微:qq383550880 】√转ihbwel 脑部不清晰的症状与治疗咨询【微:qq383550880 】√转ihbwel 孩子压力大咨询【微:qq383550880 】√转ihbwel 阴间生活的前世因果咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 升迁障碍的风水布局【企鹅383550880】√转ihbwel 如何识别冤亲债主【σσЗ8З55О88О√转ihbwel 莫名其妙感伤的咨询技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 莫名其妙感伤的情感释放威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 儿子不读书的自我提升【微:qq383550880 】√转ihbwel 前世缘份的故事有哪些案例?咨询【微:qq383550880 】√转ihbwel 如何应对冤亲债主的干扰?咨询【微:qq383550880 】√转ihbwel 亲子关系的心理建设【www.richdady.cn】√转ihbwel 百元建网站 怎么创建网站 深圳制作公司网站 网络安全漏洞的概念 网络推广和微信营销 网络营销营销理念 微博营销劣势 网络安全的热点问题 网络安全技术平台 聊城网站优化案例 程序员转网络安全 营销型网站设计特点 微信整合营销 营销 社会化网络营销的特点 辽源网站建设 成都市网络安全处 网络安全偷取手机内的信息 网络营销是什么证 网站制作套餐 西安网站建设制作 产品展示型的网站功能有哪些 网络安全的基本目标包括 员工网络安全培训 网络安全的热点问题 网络安全技术平台 聊城网站优化案例 程序员转网络安全 营销型网站设计特点 微信整合营销 营销 社会化网络营销的特点 昆明网络营销推广 中国广东手机网站建设 佛山新网站建设代理商 重庆专业微网站建设 响应式外贸网站案例 网络推广和微信营销 信息安全审核表 辽源网站建设 网络安全日沈昌祥 2017新网络安全法 南充网站建设 网站赚流量 网络营销的价格策略 不属于网站后期维护 重庆网络营销有限公司 网站开发与维护的内容 成都市网络安全处 国家信息安全网查询 安庆做网站 网站建设流程案例 教育部信息安全研究中心互动营销失败 百元建网站 广州网站建设优化 南京信息安全运维 个人免费网站注册com 网络营销必看 书籍 松原网站建设 番禺高端网站建设公司 微信营销的成本 怎么创建网站 资阳建网站 网络营销是什么证 如何考取网络营销师 重庆网络营销有限公司 荆州做网站 合肥做网站的 深圳制作企业网站 深圳制作公司网站 网络安全偷取手机内的信息 高端网站设计品牌 网站制作套餐 美团网络营销 怎么创建网站 网信办网络安全分级 衡水网站排名优化公司 网络安全漏洞的概念 ubuntu网络安全 做一个简单网站 西安网站建设制作 深圳营销型网站建商务网站开发 南京信息安全运维 网络互动营销 顺德网站建设市场 信息安全特性相应的技术手段,-1 2014网络安全大事件 大良营销网站建设服务 佛山新网站建设代理商 专业的高端企业网站 网络安全相关的产品 华为网络安全案例分析 网络个人信息安全案例 网络营销营销理念 内部网络安全 广州建网站公司 构建网络安全防护体系 ubuntu网络安全 响应式外贸网站案例 韩国 信息安全 网络安全监控 网站策划技巧 快消品网络营销 员工网络安全培训 网络安全身份认证 网络安全的热点问题 网络营销营销理念 信息安全分为 公司营销目标市场 重庆专业微网站建设 网站模块 整合营销. 旅行行业网络营销策划 网络安全技术 pdf 大良营销网站建设服务 网站模块 怎么做网络营销策划书 简洁网站 肥城网站建设 请问如何对以上传的网站进行内容的维护需要注意哪些事项 网站配色方案橙色 昆明微网站 国家信息安全政策体系包括哪些内容 佛山新网站建设代理商 广州市网站网页制作公司 韩国 信息安全 信息安全宣传材料 网络安全协调局 胡啸 浙江 网络安全企业 辽源网站建设 网络信息安全案例分析 信息安全最关键也是最薄弱 济南seo网站推广公司 信息安全分为 网络安全技术平台 如何建设公司门户网站 菜鸟做网站