Bootstrapbootstrap布局 网格系统

Bootstrap 网格系统(Grid System)的劳作规律

网格系统经过1多元涵盖内容的行和列来创建页面布局。上面列出了 Bootstrap
网格系统是何等职业的:

  • 行必须放置在 .container class
    内,以便得到适当的对齐(alignment)和内边距(padding)。
  • 使用行来创建列的水平组。
  • 剧情应当放置在列内,且唯有列能够是行的直接子成分。
  • 预订义的网格类,比如 .row 和 .col-xs-4,可用以快速成立网格布局。LESS
    混合类可用于越来越多语义布局。
  • 列通过内边距(padding)来创制列内容之间的间隙。该内边距是经过 .rows 上的异乡距(margin)取负,表示第2列和末段壹列的行偏移。
  • 网格系统是经过点名您想要横跨的11个可用的列来创设的。例如,要成立五个分外的列,则使用四个 .col-xs-4

Bootstrap 网格系统

本章节我们将执教 Bootstrap 的网格系统(Grid System)。

Bootstrap
提供了壹套响应式、移动装备优先的流式网格系统,随着显示器或视口(viewport)尺寸的扩张,系统会自动分成最多1二列。

怎样是网格(Grid)?

摘自维基百科:

Bootstrap 1在平面设计中,网格是一种由一雨后苦笋用于组织内容的交接的直线(垂直的、水平的)组成的构造(平日是二维的)。它普遍应用于打字与印刷设计中的设计布局和内容结构。在网页设计中,它是壹种用于飞快成立一致的布局和有效地利用
HTML 和 CSS 的主意。

粗略地说,网页设计中的网格用于协会内容,让网址轻易浏览,并降低用户端的负载。

焦点的网格结构

下边是 Bootstrap 网格的基本结构:

<divclass="container"><divclass="row"><divclass="col-*-*"></div><divclass="col-*-*"></div></div><divclass="row">...</div></div><divclass="container">....

让我们来看多少个大约的网格实例:

列排序

Bootstrap
网格系统另二个周全的性情,就是你能够很轻便地以一种顺序编写列,然后以另一种顺序展现列。

你能够很自由地退换带有 .col-md-push-* 和 .col-md-pull-* 类的放到网格列的相继,在那之中 * 范围是从 1 到 11

在下边包车型客车实例中,我们有两列布局,左列很窄,作为侧边栏。大家将应用 .col-md-push-* 和 .col-md-pull-* 类来交流那两列的逐1。

<!DOCTYPE html><html><head><title>Bootstrap 实例 - 列排序</title><linkhref="/bootstrap/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="/scripts/jquery.min.js"></script><scriptsrc="/bootstrap/js/bootstrap.min.js"></script></head><body><divclass="container"><h1>Hello, world!</h1><divclass="row"><p>排序前</p><divclass="col-md-4"style="background-color:#dedef8;
         box-shadow: inset 1px-1px1px#444, inset -1px 1px 1px #444;">
         我在左边
      </div><divclass="col-md-8"style="background-color:#dedef8;
         box-shadow: inset 1px-1px1px#444, inset -1px 1px 1px #444;">
         我在右边
      </div></div><br><divclass="row"><p>排序后</p><divclass="col-md-4 col-md-push-8"style="background-color:#dedef8;
         box-shadow: inset 1px-1px1px#444, 
         inset -1px1px1px#444;">
         我在左边
      </div><divclass="col-md-8 col-md-pull-4"style="background-color:#dedef8;
         box-shadow: inset 1px-1px1px#444, 
         inset -1px1px1px#444;">
         我在右边
      </div></div></div></body></html>

品尝一下 »

结果如下所示:

Bootstrap 2

« Bootstrap CSS
概览

Bootstrap
网格系统实例:堆叠的水准
 »

转自:

http://www.runoob.com/bootstrap/bootstrap-grid-system.html

Bootstrap 3

响应式的列重新载入参数

以下实例包罗了多少个网格,但是大家在小设备浏览时手足无措分明网格展现的职位。

为了消除这么些标题,使用
能够选用 .clearfix class和 响应式实用工具来解决,如上面实例所示:(xs超小显示屏每行彰显两个,sm小显示器每行显示四个)

 

<!DOCTYPE html><html><head><title>Bootstrap 实例 - 响应式的列重置</title><linkhref="/bootstrap/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="/scripts/jquery.min.js"></script><scriptsrc="/bootstrap/js/bootstrap.min.js"></script></head><body><divclass="container"><divclass="row"><divclass="col-xs-6 col-sm-3"style="background-color:#dedef8;
         box-shadow: inset 1px-1px1px#444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><divclass="col-xs-6 col-sm-3"style="background-color:#dedef8;box-shadow: 
         inset 1px-1px1px#444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
         </p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
         </p></div><divclass="clearfix visible-xs"></div><divclass="col-xs-6 col-sm-3"style="background-color:#dedef8;
         box-shadow:inset 1px-1px1px#444, inset -1px 1px 1px #444;"><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
         </p></div><divclass="col-xs-6 col-sm-3"style="background-color:#dedef8;box-shadow: 
         inset 1px-1px1px#444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
         </p></div></div></div></body></html>

品味一下 »

浏览器上调整窗口大小查看变化,或在你手提式有线电话机上查看效果。

运动装备优先政策

  • 内容
    • 垄断哪些是最重大的。
  • 布局
    • 事先规划更加小的小幅。
    • 基础的 CSS 是活动装备优先,媒体询问是本着于平板电脑、台式Computer。
  • 渐进增强
    • 乘胜显示屏大小的充实而添美金素。

响应式网格系统随着显示屏或视口(viewport)尺寸的充实,系统会活动分成最多1二列。

1

1

1

1

1

1

1

1

1

1

1

1

4

4

4

4

8

6

6

12

媒体询问

传播媒介询问是1贰分不轻巧的”有标准化的 CSS
规则”。它只适用于1些基于有些规定条件的
CSS。假如满足那多少个条件,则运用相应的样式。

Bootstrap
中的媒体询问允许你基于视口大小活动、彰显并逃匿内容。下边包车型的士媒体询问在
LESS 文件中选拔,用来创立 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备(手机,小于 768px) *//* Bootstrap 中默认情况下没有媒体查询 *//* 小型设备(平板电脑,768px 起) */@media(min-width:@screen-sm-min){...}/* 中型设备(台式电脑,992px 起) */@media(min-width:@screen-md-min){...}/* 大型设备(大台式电脑,1200px 起) */@media(min-width:@screen-lg-min){...}

咱俩偶尔也会在媒体询问代码中包括 max-width,从而将 CSS
的熏陶范围在越来越小范围的显示器尺寸之内。

@media(max-width:@screen-xs-max){...}@media(min-width:@screen-sm-min)and(max-width:@screen-sm-max){...}@media(min-width:@screen-md-min)and(max-width:@screen-md-max){...}@media(min-width:@screen-lg-min){...}

传媒询问有五个部分,先是多少个装置正式,然后是一个高低规则。在上头的案例中,设置了下列的平整:

让我们来看上边那行代码:

@media(min-width:@screen-sm-min)and(max-width:@screen-sm-max){...}

对于具备带有 min-width:
@screen-sm-min
 的设施,要是显示屏的增长幅度小于 @screen-sm-max,则会议及展览开1些处理。

偏移列

舞狮是3个用以更专业的布局的管事功用。它们可用来给列腾出越多的上空。例如,.col-xs=* 类不帮忙偏移,可是它们得以省略地由此运用3个空的单元格来兑现该意义。

为了在大荧屏显示器上选用偏移,请使用 .col-md-offset-* 类。这几个类会把四个列的左外边距(margin)扩展 * 列,其中 * 范围是从 1到 11

在下边包车型地铁实例中,大家有 <div
class=”col-md-陆”>..</div>,大家将应用 .col-md-offset-3 class
来居中那几个 div。

<!DOCTYPE html><html><head><title>Bootstrap 实例 - 偏移列</title><linkhref="/bootstrap/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="/scripts/jquery.min.js"></script><scriptsrc="/bootstrap/js/bootstrap.min.js"></script></head><body><divclass="container"><h1>Hello, world!</h1><divclass="row"><divclass="col-xs-6 col-md-offset-3"style="background-color:#dedef8;box-shadow: 
         inset 1px-1px1px#444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
         </p></div></div></div></body></html>

尝试一下 »

结果如下所示:

Bootstrap 4

分拣导航

  • HTML / CSS
  • JavaScript
  • 服务端语言
  • 数据库
  • XML 语言
  • Web Services
  • 网址建设
  • 参考手册
  • 测验/考试
  • 开垦工具

网格选项

下表总结了 Bootstrap 网格系统怎么样跨多个设备职业:

  超小设备手机(<768px) 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px) 大型设备台式电脑(≥1200px)
网格行为 一直是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列 # 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

关爱微信下载离线手册

Bootstrap 5Bootstrap 6(群号:335415140)

 

 

嵌套列

为了在内容中嵌套私下认可的网格,请增加二个新的 .row,并在八个已有的 .col-md-* 列内增加一组 .col-md-* 列。被嵌套的行应包括壹组列,那组列个数不可能当先12(其实,未有供给你必须占满1贰列)。

在底下的实例中,布局有三个列,第二列被分成两行八个盒子。

<!DOCTYPE html><html><head><title>Bootstrap 实例 - 嵌套列</title><linkhref="/bootstrap/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="/scripts/jquery.min.js"></script><scriptsrc="/bootstrap/js/bootstrap.min.js"></script></head><body><divclass="container"><h1>Hello, world!</h1><divclass="row"><divclass="col-md-3"style="background-color:#dedef8;box-shadow: 
         inset 1px-1px1px#444, inset -1px 1px 1px #444;"><h4>第一列</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><divclass="col-md-9"style="background-color:#dedef8;box-shadow: 
         inset 1px-1px1px#444, inset -1px 1px 1px #444;"><h4>第二列 - 分为四个盒子</h4><divclass="row"><divclass="col-md-6"style="background-color:#B18904;
               box-shadow: inset 1px-1px1px#444, inset -1px 1px 1px #444;"><p>Consectetur art party Tonx culpa semiotics. Pinterest 
                  assumenda minim organic quis.
               </p></div><divclass="col-md-6"style="background-color:#B18904;
               box-shadow: inset 1px-1px1px#444, inset -1px 1px 1px #444;"><p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
               </p></div></div><divclass="row"><divclass="col-md-6"style="background-color:#B18904;
               box-shadow: inset 1px-1px1px#444, inset -1px 1px 1px #444;"><p>quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat.
               </p></div><divclass="col-md-6"style="background-color:#B18904;
               box-shadow: inset 1px-1px1px#444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p></div></div></div></div></div></body></html>

品味一下 »

结果如下所示:

Bootstrap 7

如何是 Bootstrap 网格系统(Grid System)?

Bootstrap 官方文书档案中有关网格系统的叙述:

Bootstrap 8Bootstrap
包含了一个响应式的、移动设备优先的、不稳固的网格系统,能够随着设备或视口大小的加码而相当地扩充到
12列。它富含了用来简单的布局选项的预订义类,也带有了用于转移更加多语义布局的效用变得强大的混合类。

让我们来精通一下地点的言辞。Bootstrap 三是移动设备优先的,在那一个意思上,Bootstrap
代码从小显示屏设备(比如移动设备、平板Computer)初阶,然后扩充到大荧屏设备(比如台式机Computer、台式Computer)上的机件和网格。

相关文章