美洲杯在哪买球Bootstrap_栅格系统

使用bootstrap对前端页面的布局,container、row、col-xs-4等css样式的使用,使网页的布局更漂亮

一、栅格系统原理

方法/步骤

  1. Bootstrap内置了一套响应式、移动设备优先的12列格网布局系统,它会随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列

    美洲杯在哪买球 1

  2. 它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。

    下面就简单介绍一下Bootstrap栅格系统的工作原理:

    行(row)必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。

    使用行(row)在水平方向创建一组列(column)。

    你的内容应当放置于列(column)内,而且,只有列(column)可以作为行(row)的直接子元素。

    类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

    通过设置padding从而创建列(column)之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。

    栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。

    新建html文件:如图内容所示

    美洲杯在哪买球 2

  3. 页面显示如下:

    美洲杯在哪买球,排成一列,然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了,反正我自己懂了很多。通过同样的方式可 以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格,那么就添加一个col-xs-6的 类、占用四个网格就添加一个col-xs-4的类,然后在同一排的周围进行使用带有row类的容器

    美洲杯在哪买球 3

  4. 总结:

    1、container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width,用以匹配栅格系统。

    2、col-xs-4:这个类通过"-"分为三个部分,第三个部分的数字作为一个泛指,它的范围是1到12。就是可以把一个区域分为12个栏,这个要和row类联合使用。

    其实这个布局很像HTMl中的Table布局tr行和td列


1. 栅格系统(布局)

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

我们在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:

  1. 行(row)必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
  2. 使用行(row)在水平方向创建一组列(column)。 你的内容应当放置于列(column)内,而且,只有列(column)可以作为行(row)的直接子元素。
  3. 类似Predefined grid classes like .row and .col-xs-4 4. 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
  4. 通过设置padding从而创建列(column)之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
  5. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。

本文由美洲杯在哪买球发布于计算机教程,转载请注明出处:美洲杯在哪买球Bootstrap_栅格系统

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。