当前位置: 首页 > Web前端 > vue.js

关于Bootstrap网格系统,你想知道的都在这里

时间:2023-04-01 00:51:53 vue.js

Bootstrap框架是当今最流行的前端框架之一。Bootstra功能强大,简单易学,非常适合实际应用场景。但是它包含的内容很多,新手往往不能很快掌握。接下来我们对Bootstrap网格系统做一个简单的总结:Bootstrap网格系统的定义是什么?Bootstrap包括一个响应式、移动优先、流体网格系统,随着设备或视口大小的增加,该系统可以适当地扩展到12列。它包含用于简单布局选项的预定义类,以及用于生成更多语义布局的强大混合类。从上面的话可以很容易梳理出三个方面:1.Bootstrap3是移动设置优先级2.Bootstrap的网格系统最多有12列。3.Bootstrap包含许多预定义的类。通常,在我们写的页面中,如果浏览器缩小到一定程度,页面就会错位变形。这在Bootstrap中不会发生,因为它是自适应的。Bootstrap网格系统(GridSystem)相关类\1.容器类表示网格。使用容器类获取Bootstrap默认设置的对齐和填充样式。\2。使用.row创建一行,每一行又分为多列。\3。使用.col-[屏幕样式]-[百分比]预先确定列元素以快速创建网格。\4.内容应该放在列中,并且只有列可以是行的直接子元素。ps:行>列\5。列使用填充在列内容之间创建间隙。内边距是通过.rows上的外边距(margin)取负值得到的。也就是说:你要缩小列间距,用负边距写。\6.网格系统是通过指定要跨越的十二个可用列来创建的。例如,要创建三个相等的列,请使用三个.col-md-4。Bootstrapgrid的基本结构直接元素列

...
网格选项Bootstrap网格将设备分为四种类型:超小型设备(手机)、小型设备(平板电脑)、中型设备(笔记本电脑)和大型设备(大尺寸显示器)。超过12个。它们的列由不同的类前缀标识。col-xs用于超小型设备.col-sm用于中型设备.col-md用于大型设备.col-lg-不管是哪种设备,它们的间距都是30px(指columnpadding-left;15px和padding-right:15px;)使用网格布局的步骤\1。导入bootstrap需要的库,就像引入了一个外部样式表,只不过这是bootstrap的样式表,包括css和js\2两部分。添加一个bootstrap容器在body中写一个div,在这个div中添加一个容器类。这堂课非常有用。它可以在页面中创建一个居中区域,然后我们将其他元素放入其中。它相当于创建一个居中的div框,宽度为静态,margin值为auto。容器的优先级是它是响应式的,它会根据当前屏幕宽度计算出最佳宽度并使用。\3。将行添加到容器中,我们使用行进行水平布局\4。将列添加到行就像将tr添加到表中。然后将td添加到tr。Row中的列就是我们之前的.col-xs-6,加起来刚好是12列。网格系统是Bootstrap的核心。正是因为有了网格系统,Bootstrap才能拥有如此强大的响应式布局方案。