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
网站制作设计sem整合营销机构无人机网络安全信息安全风险是指认为或自然信息安全和运维区别,-1上海网站建设的价格三星网络营销策划书上海市信息安全测评中心,-1军用信息安全产品测评中心2016年429网络安全一位现代企业家,带着现代记忆来到了一个名为“大乾”的朝代,厌倦了前世商场上的勾心斗角尔虞我诈,原本想在这个不知名的朝代平平淡淡的过完这一生,没曾想来到古代后,他依然面对着家族里的勾心斗角…在这个人为刍狗的世界,他该如何生存与立足?柳岸晓月,临沂人,文学爱好者,先后发表多篇作品。浩瀚的星空之上有何物?不可一世的玄帝重生地球,发誓猥琐发育,靠着茅台修炼,被迫学习泡妞,而让他没想到的是,岳母竟是前世灭他满门且与他同归于尽的女帝。得知这个消息的唐玄虎躯一震,嘴角上扬:“既然如此,我有一个大胆的想法……”这是一个悲伤的故事,宗教一度盛行。在县城的孩子们污染,病态的人格在传播。终于,鬼出世,没有任何疑问。悲的人生选择,是生是死隐匿,步步惊心,需要以今生不悔的勇气。具有看淡一切的品质。“诶诶诶!你不要过来啊!你不要抱着我啊!” “主人,你的身上好香啊~”盼天盼地终于盼来了属于我的系统,可是这系统看着......怎么好像不太对劲。当现代世界一个文科普信男穿越到了三国,会与这个世界擦出怎样的火花,他能否创造奇迹?2020年最火爆的相师文,你,值得拥有! 看红颜,花团锦簇,观天下,一路风尘! 大相师丁凡学成归来,误入商界,成为超级护花大使,开启了不一样的精彩人生。 凭借精湛的相术,风骚的才情,丁凡让恶霸低头,大佬俯首,众星捧月,潇洒走上事业巅峰。 万花丛中过,片叶不沾身,群芳争艳,选择很困难。 丁凡有多少姐姐,你猜? 丁凡有多少财富,你再猜? 丁凡有几个妹妹?那小子已经跑了……踌躇满志考大学,不想2022高考竟是如此之难!考完英语那天下午,林易仰天长啸,痛哭流涕!无颜回去面爹娘,只能凭着手机缓解心绪,谁想一场奇异正向他驰来……梦里明六道,觉后了大千。 她穿越万载而来,只为改变他的命运,这或许只是他的一个梦,但却是她的所有。 本书写的是帝国权谋,看的是儿女情长、兄弟情义。
网络安全动态分析包括哪些内容 华为网络安全发展前景 大连网站建设 成都网络安全发展 第五届信息安全法律大会 信息安全的基本原则 西安网站制作公司 2017上海网络安全会议 顾问营销系统 文案营销点 强迫症的咨询技巧【www.richdady.cn】 自闭症的家庭支持咨询【www.richdady.cn】 与女友前世的咨询技巧【www.richdady.cn】 亲子关系的前世记忆咨询【www.richdady.cn】 脑部不清晰的咨询技巧咨询【www.richdady.cn】 如何改善财运不佳的情况?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 暗恋的心理成长【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世老婆的前世影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 去世的父亲的前世因果咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 官司的自我保护咨询【www.richdady.cn】√转ihbwel 如何克服“缺心眼”的问题咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 人际关系不好的前世记忆咨询【www.richdady.cn】√转ihbwel 外灵的驱除方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 财运问题在线咨询【微:qq383550880 】√转ihbwel 心特别累的解决方法【微:qq383550880 】√转ihbwel 孩子学习不好的咨询技巧咨询【σσЗ8З55О88О√转ihbwel 莫名其妙感伤的前世影响咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 升迁障碍的自我提升【www.richdady.cn】√转ihbwel 家庭关系的前世记忆【www.richdady.cn】√转ihbwel 不爱读书的前世记忆咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 网络安全 太极 如何测试网络安全 企业营销方案 昆山设计网站的公司哪家好 信息安全的基本原则 11月CISM信息安全考试成绩查询 三星网络营销策划书 西安网站制作公司 信息安全目录,-1 营销科技 警惕网络窃密 构筑网络安全防火墙 深圳微信营销公司 公司网络安全 和营销下载软件 内部列表email营销关键 蕲春做网站江西南昌网站定制 网络安全动态分析包括哪些内容 银行信息安全建设 扁平化设计网站 做网站的文案 网络信息安全调查报告 网络安全监测方案设计 网站制作公司合肥 广东手机网站建设费用 青岛网站建设培训 全网营销招聘信息 东台网站设计 全网营销招聘信息 信息安全专业获批 傲盾信息安全管理石家庄手机建网站 gb/t 20270-2006信息安全技术 网络基础安全技术要求 信息安全服务资质 安全工程类 个人怎么做病毒营销方案 电商淘宝网络营销 网络营销特点包括什么 最近都在做企业云网站网站云推广云推广有什么功能效果呢? 广州微网站建设效果 和营销下载软件 信息安全知名企业排名 国内f型网页布局的网站 中国网络安全和信息化领导小组成立时间 国家网络安全委员会 电商淘宝网络营销 信息安全的专业有哪些 网站建设策略 网络安全技术实训报告 国际信息和网络安全会议 网络信息安全调查报告 o2o网站建设 为什么通过关键词能找到网站.评价该网站却显示没被收录 海尔的国际营销战略 上海??公安局网络安全总队 密码学与信息安全实验室 网络营销案件分析 信息安全目录,-1 信息安全的基本原则 成都市公安局网络安全 广州微网站建设效果 网络安全工作汇报 贴吧营销 品牌营销特征 上海信息安全管理培训,-1 国家安全之网络安全 企业网站建立哪 个人网站建设制作 营销科技 深圳外贸响应式网站建设 如何测试网络安全 文案营销点 四川省网络安全协会 顾问营销系统 网络营销解决方案 上海信息安全管理培训,-1 全网营销培训 互联网整合营销 2017上海网络安全会议 深圳信息网络安全培训中心 网络安全与隐私原理 .org网站开发 大连网站建设 扁平化设计网站 360网络安全攻防实验室 网站banner图怎么设计 专业的网站建设公 大市场营销组合构成6P 网站建设心得 军用信息安全产品测评中心 营销型平台包括哪些功能 中国网络安全会议 文案营销点 网络整合营销公司方案 网络安全 道哥 计算机信息安全标准 网络安全等级测评机构 信息安全风险是指认为或自然 网络安全工作汇报 如何测试网络安全 信息安全审计平台 网站制作设计 昆山设计网站的公司哪家好 信息安全风险评估制度 绍兴网站建设 11月CISM信息安全考试成绩查询 巩义网站建设 网络安全等级测评机构 西安网站制作公司 企业网络安全 ppt 信息安全专利 营销科技 信息安全大会2017 广东手机网站建设费用 深圳微信营销公司 长沙做网站品牌 信息安全保护条例 和营销下载软件 公司网络安全 淮南网站制作 蕲春做网站江西南昌网站定制 贴吧营销 太原网站建设公司 银行信息安全建设 信息安全风险评估制度 网络信息安全包括 做网站的文案 企业网站建立哪 国家网络信息安全网 网络安全监测方案设计 电子政务网络安全 网络营销案件分析 网站制作公司合肥 信息安全大赛 题目 全网营销培训 网络市场营销方式 中国信息安全管理体系 品牌营销特征