bootstrap布局 网格系统

Bootstrap 网格系统

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

Bootstrap
提供了同等学响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增,系统会自动分成最多12排。

嘿是网格(Grid)?

选择自维基百科:

Bootstrap 1每当平面设计中,网格是均等种植由同多级用于组织内容之交的直线(垂直的、水平的)组成的布局(通常是二维的)。它广泛应用于打印设计受到之宏图布局与情节结构。在网页设计中,它是同等栽用于快速创建同的布局和实用地采取
HTML 和 CSS 的计。

大概地说,网页设计受到的网格用于集体内容,让网站爱浏览,并退用户端的载荷。

哎是 Bootstrap 网格系统(Grid System)?

Bootstrap 官方文档中有关网格系统的叙说:

Bootstrap 2Bootstrap
包含了一个响应式的、移动设备优先的、不定点的网格系统,可以就设备或者视口大小的增而方便地壮大及
12
列。它涵盖了用于简单的布局选项之预定义类,也带有了用于转移更多语义布局的功能强大的混合类。

于我们来了解一下面的话语。Bootstrap 3
是走装备优先的,在这个意思及,Bootstrap
代码从小屏幕设备(比如移动设备、平板计算机)开始,然后扩展及老屏幕设备(比如笔记本电脑、台式电脑)上的零部件和网格。

动装备优先政策

  • 内容
    • 决定什么是最为关键的。
  • 布局
    • 优先规划还小的大幅度。
    • 基本功之 CSS 是动设备优先,媒体询问是本着被平板计算机、台式电脑。
  • 逐渐进增强
    • 随着屏幕尺寸的增多而弥加元素。

响应式网格系统就屏幕或视口(viewport)尺寸的增,系统会活动分成最多12列。

1

1

1

1

1

1

1

1

1

1

1

1

4

4

4

4

8

6

6

12

Bootstrap 网格系统(Grid System)的办事原理

网格系统经过一样层层涵盖内容的尽和排来创造页面布局。下面列有了 Bootstrap
网格系统是哪行事的:

  • 推行务放于 .container class
    内,以便获取当的针对性齐(alignment)和内边距(padding)。
  • 采取实行来创造列的水平组。
  • 情应该放置于排列内,且仅列好是履行的直白子元素。
  • 预定义的网格类,比如 .row 和 .col-xs-4,可用来快速创建网格布局。LESS
    混合类可用以更多语义布局。
  • 列通过内边距(padding)来创造列内容里的余。该内边距是通过 .rows 上之异乡距(margin)取负,表示第一列和最后一列的行偏移。
  • 网格系统是经过点名您想要跨过的十二独可用的列来创建的。例如,要创三个顶的排列,则运用三单 .col-xs-4

传媒询问

传媒询问是格外不简单的”有标准的 CSS
规则”。它仅仅适用于一些基于某些规定条件的
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,则会开展局部拍卖。

网格选项

下表总结了 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 网格的中心结构:

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

让咱们来拘禁几乎单简单的网格实例:

  • 实例:堆叠的程度
  • 实例:中型和大型装备
  • 实例:手机、平板计算机、台式电脑

响应式的列重置

以下实例包含了4只网格,但是咱于小设备浏览时无法确定网格显示的职位。

为解决这个题材,使用
可以应用 .clearfix class和 响应式实用工具来解决,如下面实例所示:(xs超小屏幕每行显示两只,sm小屏幕每行显示4只)

 

<!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>

尝试一下 »

浏览器上调整窗口大小查看转,或在你手机及查看效果。

偏移列

舞狮是一个用以更专业的布局的卓有成效功能。它们可用来给列腾出又多之空中。例如,.col-xs=* 类不支持偏移,但是它得以略地经过动一个缺损的只有元格来促成该功能。

为了当大屏幕显示器上用偏移,请动 .col-md-offset-* 类。这些近似会将一个排的左外边距(margin)增加 * 列,其中 * 范围是由 1到 11

于底下的实例中,我们来 <div
class=”col-md-6″>..</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 3

嵌套列

为当情节被嵌套默认的网格,请上加一个新的 .row,并于一个业已有些 .col-md-* 列内上加同组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不克过12(其实,没有要求而必须占用满12排列)。

于底下的实例中,布局有少独列,第二排列被分成两行四个盒子。

<!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 4

列排序

Bootstrap
网格系统外一个宏观的表征,就是你可以非常容易地盖同种顺序编写列,然后因其它一样栽顺序显示列。

而可以很轻易地改成带有 .col-md-push-* 和 .col-md-pull-* 类的嵌入网格列的一一,其中 * 范围是于 1 到 11

于底下的实例中,我们来零星排列布局,左列很狭小,作为侧边栏。我们拿运 .col-md-push-* 和 .col-md-pull-* 类来互换这半列的逐一。

<!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 5

« Bootstrap CSS
概览

Bootstrap
网格系统实例:堆叠的档次 »

转自:

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

Bootstrap 6

分拣导航

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

关心微信下载离线手册

Bootstrap 7Bootstrap 8(群号:335415140)

 

 

相关文章