首页技术文章正文

Web前端知识培训:栅格系统的行和列

更新时间:2022-08-05 来源:黑马程序员 浏览量:

IT培训班

  Bootstrap栅格系统用于将页面布局划分为等宽的列,随着屏幕或视口尺寸的增加,系统会自动分为1~12列。

  栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。开发者可以将内容放入这些创建好的布局中,然后通过列数的定义来模块化页面的布局。

  与流式布局和弹性盒布局不同的是,栅格系统通过一系列的行(row)与列(column)的组合来创建页面布局,页面的内容可以放入这些创建好的布局容器中,并且会根据父元素盒子(布局容器)尺寸的大小进行适当调节,从而达到响应式页面布局的效果。

  Bootstrap栅格系统的基本使用方式如下。

  (1)Bootstrap栅格系统为不同屏幕宽度定义了不同的类,使用非常方便,直接为元素添加类名即可。

  (2)行(row)必须包含在布局容器.container类或.container-fluid类中,以便为其赋予合适的排列(alignment)和内补(padding)。

  (3)通过行(row)可以在水平方向创建一组列(column),并且只有列(column)可以作为行(row)的直接子元素。例如,可以使用3个类名为col-xs-4的div元素来创建3个等宽的列。

  (4)行(row)使用类名row定义,列(column)使用类名col-*-*定义,内容应当放置于列内,列大于12时,将会另起一行排列。

  需要注意的是,Bootstrap栅格系统包含了易于使用的预定义类,还有强大的mixin用于生成更具语义的布局,读者可以查看官方文档进行学习。

分享到:
在线咨询 我要报名