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
企业网站需要多少钱计算机信息安全保护北京网络安全公司营销的宣传语新微博营销网站建设上海信息安全测评中心温州建网站网络安全法与网信工作如何建立企业网站深圳高端网站制作费用我叫吕夜,一名扭曲侦探,在这人心浮躁的“都市”之中,我将保持警惕,因为,我就是唯一的,扭曲侦探 我可以看到扭曲,不知道是谁发明了这个词来称呼这一现象,但是有一天人们就这么开始叫了。没人知道它是怎样发生的,但是从目前的的经验来看,这一现象是强烈情感欲望和爆发性情绪激增的表现。 ‘钢琴家’,或者更确切的说是在第九分区造成严重破坏的人,被称之为“扭曲”的典型案例之一。很少人注意到即使是现在,大大小小的“扭曲”现象正在整座城市里发生 我的工作是去寻找“扭曲”的案例并且想办法使它不发生。事实上“扭曲”的程度因人而异,自从我获得了肉眼洞察到“扭曲”的能力,我没有看到任何一个人身上没有发生“扭曲”。 现在,我正在看向镜子里的自己。在我看来,我是唯一不会出现扭曲的人。在一个充满扭曲的人的世界中,一个保持不变的人会成为“扭曲”的人吗?我无法理解一旦这个世界的扭曲继续并达到临界点会发生什么 千古一帝李玄烨在登基之日享受四方来贺之时惨遭妻子师父联合杀害,但竟意外转世重生,成为一废物皇子,但凭借君王的权谋与自身强大的力量再回巅峰,当其带兵直取二人狗头之时,得知其中秘辛,从此……作者:秋七幸 作品:立校高中 简介:许白和秦严在同一所高中而且心俩还是同桌(兼邻居)。后来他俩考上了同-所学校(清华),许白选择了土木工程系,而秦严则选了济经系。毕业后许白和秦严俩人过上了没差没涩的生活……这是一个普普通通的穿越故事,然而穿越了也不一定是主角,就比如夏子羽同学。“小姐姐,有事说话,别动手。”“小姐姐,先把剑放下。”“小姐姐,你又捡到宝物了吗?”……夏子羽陷入了沉思,“所以,谁才是主角?”天族小殿下惊天落难,被隐士老人古月所救,从此她身边多了一个陪伴的人,两人相互帮助、相互慰藉,两小无猜,青梅竹马,他说过长大以后要娶自己,为了能让她活着,惊天独闯龙潭虎穴寻地火,一人大战千人得阴风珠,然而命运捉弄相爱的人,应为身份差距分开。为了能见到他,为人能和他在一起。她吞地火,食阴风珠,闯地狱得寒冰神髓,过关斩将得天火,历经千辛万苦成为世界强者,她满坏欣喜的去找他,却发现他要大婚了,无数次幻想的新娘不是自己,他们会不会在一起,请看王静如的寻夫之旅,人类起源永远是个猜想,或者我这个猜想才是真正的样子。这本书描述了一位创世者如何创世并见证了地球人类的发展。通过他的见证,让我们更多的了解哲学,或者说了解天道天理。世界末日,全球冰封! 冰河世纪重临,人类崩盘,文明崩盘! 在末日天灾的即将降临的最后一年里,秦歌携拯救末世的使命,穿越而来。 地下龙国仿佛突兀而生,一夜之间,闻名全球。 “我的祖先源自唐朝的长安,也算半个龙国人。求求你,让我进入龙国吧!” “起开,我家从民国时才移民的,血统比你纯净对了,我们比你有资格进入龙国!” 那一刻,举世瞩目。 人类文明的火种能否得以延续,一切,都看龙国!2025年,全球抗疫斗争取得了阶段性胜利,疫苗普及率达到70%,虽然新冠肺炎疫情仍在影响着世界,人类似乎有望重返那个和谐安详时代。然而,一个更严重的潜在危机正在酝酿,一种新型病毒正在悄无声息地传播,各国企图采取措施,然而人类发现,这场新的疫情的背后隐藏着许多超越当前认知的事情,光靠一己之力根本难以阻挡,人类事实上十分脆弱,越来越多的开始失去生命,人类走到了灭绝的边缘。就在许多人陷入迷茫之际,一个全球性的组织开始浮出水面,开始由幕后走向台前,轻霜冻死单根草,狂风难毁万木林,唯有团结,人类才能赢得生存的机会。突然降世的系统,无数未知的怪物,慌乱中迸发的人性黑暗,一切的一切不可言说,亲身来体会这人间炼狱吧! 四年前一场大火,他愤然离职,下海经商,两年后在《嗜界》中创立公会,欲图天下,却因为手下的背叛跌落神坛。 销声匿迹了半年,他在《诸神》中横空出世,又在机缘巧合之下开始追查起四年前的真相。 在游戏世界中他是剑灭诸神,令人胆寒的炼狱恶魔,一边在现实世界中他是揭罪恶真相的孤独执剑人。
深圳专业网站制作公司排名 网络安全大会 百度验证网站 网络安全迫与破 信息安全标准化技术委员会 2016 计算机网络安全大会 廊坊网站建设 金融信息安全法规 网站制作 番禺 联智营销策划有限公司官网 感情纠纷的情感和解咨询【www.richdady.cn】 不爱读书的原因分析咨询【www.richdady.cn】 如何识别冤亲债主干扰【www.richdady.cn】 感情纠纷的情感沟通方法有哪些?【www.richdady.cn】 如何解决事业不顺的问题?咨询【www.richdady.cn】 亲子关系中的沟通艺术咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 婴灵对家庭关系有哪些影响?咨询【企鹅383550880】√转ihbwel 升迁障碍的职场策略威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子不爱读书的应对策略咨询【www.richdady.cn】√转ihbwel 婴灵的超度方法咨询【微:qq383550880 】√转ihbwel 发育倒退的早期干预措施咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 脑部不清晰的咨询技巧咨询【www.richdady.cn】√转ihbwel 外灵【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 去世的父亲的前世修行【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 个人专属前世因果分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世今生相关咨询【www.richdady.cn】√转ihbwel 无形干扰如何影响心理健康威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 财运不佳的风水调整方法有哪些?【www.richdady.cn】√转ihbwel 如何应对冤亲债主的干扰【企鹅383550880】√转ihbwel 如何避免生活中的意外咨询【企鹅383550880】√转ihbwel 信息安全分级保护级别 咨询网站设计 石家庄移动端网站建设 大连网站优化公司 网络营销平台图片 网络安全法多少条 西安网站制作工作室 网络安全对抗和研究 网站维护中网络信息安全的重要性 做网站多少钱 信息安全集成 有哪些 网站建设 中企动力公司 哇哈哈的营销案例 什么是网络信息安全?,-1 企业招聘信息安全 网络营销能力秀的总结 通讯网络营销. 百度验证网站 深圳专业网站制作公司排名 非经营网络安全审计系统 建云购网站 郑州做网站 哇哈哈的营销案例 欧盟 网络安全审查 网络安全服务机构向社会发布网络攻击 企业信息安全管理案例 岳阳网站建设 东台网站建设app信息安全 珠海 旅游 网站建设 网络安全培训记录表 信息安全产品清单网站建设使用哪种语言好 网站制作多少钱资讯 阐述我国互联网网络安全形势 郑州高端网站建设 营销型企业网站策划方案 高大上公司网站 网站建设心得 信息网络安全评估方法 网络安全法与网信工作 南宁市网站建设哪家好 网络安全常用知识 济源建网站 国外网络营销 网站设计模板 2017年网络安全大会 怎么做自己的网站? 国家网络安全国家安全 北京平台网站建设 呼和浩特网站建设 网站建设管理软件 网络 信息安全 协会 网站报价 浙江省网络安全评测中心 2017信息安全 通讯网络营销. 企业网站需要多少钱 信息安全分级保护级别 禅城区建网站公司 网络安全大会 中国信息安全的法律 北京网络安全公司 2017年网络安全大会 网络安全协议都有哪些内容 网络安全协议都有哪些内容 网站建设管理软件 获取网站的路径 禅城区建网站公司 手机网站设计机构 网络安全迫与破 信息安全集成 有哪些 医院网站建设 价格 原型图网站 无锡网站优化 大学生网络安全报告 与网络营销相关的书籍 伊朗 网络安全 idc信息安全 计算机网络安全课程设计报告 查看网络安全日志 网络安全培训记录表 鄂州做网站 企业信息安全管理案例 网络安全评测 新媒体营销外包公司 网络信息安全与防范技术 友情链接式营销 旅游网站制作 珠海集团网站建设外包 外贸网站设计制作 网络安全常用知识 信息安全的比赛 公司信息安全工作建议和意见,-1 网站制作多少钱资讯 咨询网站设计 网络信息安全是一个动态的概念 南宁网站忧化 江门建网站 信息安全工程中心地址 联智营销策划有限公司官网 衡水网站建设供应商 外贸型网站制作 国家网络安全局电话 百度验证网站 高大上公司网站 网络营销能力秀的总结 俱乐部的推广营销 网站建设品牌公司 南宁市网站建设哪家好 信息安全标准化技术委员会 南京 信息安全公司 乐平网站建设 岳阳网站建设 信息安全工程中心地址 阐述我国互联网网络安全形势 俱乐部的推广营销 网络安全对抗和研究 郑州做网站 重庆知名网络营销公司排名 国内网站主机 虚拟网络安全 网络信息安全与防范技术 东台网站建设app信息安全 自适应网络安全 郑州做网站 网络营销实训原理 平台化营销 无锡网站建设哪家专业 中国信息安全的法律 网络安全公司有哪些 做网站多少钱 企业信息安全管理案例 工业物联网网络安全 国外的app设计网站 廊坊网站建设 网站域名域名