bootstrap栅格系统运用

发布于:2021-08-03 18:03:15

对于前端的开发过程中,在程序员眼中,写代码不算痛苦,最痛苦的是 “取名字”,什么class名、id名之类的等等。而bootstrap解决了这个问题,你不需要绞尽脑汁去取名字写样式,你需要去记忆这些现成的类名。然后把它封装好的样式文件引入,添加class名到你的项目中即可;它是一个响应式布局的框架,所有样式都是封装好的,你只需要进行引用就好了。


下面我们就来看看它的强大之处:

bootstrap的强大之处在于它的 栅格系统,但是说到底我们将它作为一个辅助工具使用就好,毕竟我们不能本末倒置。我这里运用了一个需要进行响应式开发的小demo来进行介绍:
bootstrap它提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了很多易于使用的预定义类,只要将它的类名添加到你想要实现效果的地方即可,它实际上跟table布局是一样的,只不过它在样式上会更加的灵活多变,table布局最让人头疼的就是它的样式不易于修改;栅格系统通过一系列的行(row)与列(column)的组合来创建页面布局,并且在这个预定义好的col-lg-*,col-md-*等类中它已经给你写好了媒体查询这块,你直接把内容放入创建好的布局中即可;


下面是bootstrap中文官网中关于栅格系统的工作原理:
“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。通过“行(row)”在水*方向创建一组“列(column)”。你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。

这是它的参数:


超小屏幕 手机 (<768px) 小屏幕 *板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水*排列开始是堆叠在一起的,当大于这些阈值时将变为水*排列C
.container 最大宽度None (自动)750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列(column)数12
最大列(column)宽自动~62px~81px~97px
槽(gutter)宽30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

实例:

首先是看看项目需求:
将下面的这个网页用bootstrap框架做出响应式效果,下面这个是屏幕分辨率为PC端(大屏)、iPad端(中屏)、手机端(小屏)时的状态;


大屏时的初始状态


要实现上图中的效果我们就需要用到它的栅格系统这一块了;我这里在原图的基础上画了一下它的结构布局分析:

在整个红色区域包裹的部分就是栅格系统来进行布局的效果展示;
在这个分析图中我们可以看到,红色盒子中包含了4个整块的黄色盒子,每一个盒子就是一个div,在每一行的div上添加一个.row的类就可以让其作为一块单独的行,并且款度就是外层盒子.container宽,然后我们再在每一行里面去按需求分出若干等份的列(column);每一列的占比是多少就按12等份来计算,每一行中的列数占比中和不能超过12,否则就另起一行。就如上图中最底部的这一行,它本身是只有一行,但是因为分出了6列,并且每列占比为4,所以它就成了两行显示,并且在大屏时我们所使用的列(column)是为.col-md-*
注意:因为栅格系统的使用需要搭配 .container定宽容器来使用,它所有的.row(行)都是包裹在整个.container定宽容器下,如:


最新更新

猜你喜欢