必赢亚洲手机app下载


并用它赚钱

JavaScript的私人住房学习随手记

必赢亚洲手机app网格系统

Bootstrap 网格系统

本章节大家将教师 Bootstrap 的网格系统(Grid System)。

Bootstrap
提供了一套响应式、移动设备优先的流式网格系统,随着显示器或视口(viewport)尺寸的加码,系统会活动分成最多12列。

何以是网格(Grid)?

摘自维基百科:

必赢亚洲手机app 1在平面设计中,网格是一种由一层层用于组织内容的交接的直线(垂直的、水平的)组成的构造(平常是二维的)。它广泛应用于打印设计中的设计布局和剧情结构。在网页设计中,它是一种用于火速创造一致的布局和有效地应用
HTML 和 CSS 的艺术。

简单易行地说,网页设计中的网格用于组织内容,让网站容易浏览,并下跌用户端的负荷。

怎样是 Bootstrap 网格系统(Grid System)?

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

必赢亚洲手机app 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){...}

媒体询问有两个部分,先是2个设施正式,然后是二个分寸规则。在上头的案例中,设置了下列的条条框框:

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

@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">....

让我们来看多少个简单的网格实例:

响应式的列重置

以下实例包蕴了多少个网格,然则大家在小设备浏览时胸中无数鲜明网格彰显的岗位。

为了缓解这一个题材,使用
能够应用 .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>

品味一下 »

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

偏移列

舞狮是3个用以更专业的布局的有用功用。它们可用来给列腾出更多的空间。例如,.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>

品尝一下 »

结果如下所示:

必赢亚洲手机app 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>

尝试一下 »

结果如下所示:

必赢亚洲手机app 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>

尝试一下 »

结果如下所示:

必赢亚洲手机app 5

« Bootstrap CSS
概览

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

转自:

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

必赢亚洲手机app 6

分类导航

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

关爱微信下载离线手册

必赢亚洲手机app 7必赢亚洲手机app 8(群号:335415140)

 

 

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图