bootstrap中的栅格系统详解

最新推荐文章于 2023-10-20 22:53:02 发布

VIP文章小白张幺幺

最新推荐文章于 2023-10-20 22:53:02 发布

阅读量1.8k

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/zzh1251994430/article/details/109476820

版权

bootstrap中的栅格系统

简介

什么是栅格系统？

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。（十二栅格系统）

原理

栅格系统通过行（row）与列（col）组成页面布局，页面内容就放入这些创建好的容器中。

使用规则

1.内容必须放在创建好的"container"容器中。
例：

<!-- 容器 -->
<div class="container">
  <!-- 行 -->
  <div class="row"></div>
</div>

2.在行(.row)中可以添加列(.col)，但列数之和不能超过平分的总列数12。
例：

<div class="container">
    <div class="row">
        <div class="col-md-8">
            内容一
        </div>
        <div class="col-md-4">
            内容二
        </div>
    </div>
</div>

3.具体内容应当放置在列容器（col）之内，而且只有列（col）才可以作为行容器(.row)的直接子元素。

4.通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外（margin）来抵消内距(padding)的影响。

实例

创建一个12栅格系统：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        .row {
    
            margin-top: 100px

最低0.47元/天解锁文章

小白张幺幺

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap中的栅格系统详解

bootstrap中的栅格系统简介什么是栅格系统？Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。（十二栅格系统）原理栅格系统通过行（row）与列（column）组成页面布局，页面内容就放入这些创建好的容器中。使用规则1.内容必须放在创建好的"container"容器中。例：<div class="container"> <!-- 行 --&g
复制链接

扫一扫