Bootstrap笔记(二) 认识网格系统

最新推荐文章于 2023-06-28 09:24:43 发布

XI_MILU

最新推荐文章于 2023-06-28 09:24:43 发布

阅读量195

点赞数

分类专栏： Bootstrap 文章标签：前端 bootstrap

本文链接：https://blog.csdn.net/XI_MILU/article/details/119575411

版权

Bootstrap 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

认识网格系统

介绍

Bootstrap网格系统是透过横向的row(列)和直向的column(行)来设计网页版面，他将网页宽度平均分割为12等份，称为12个column。

12个column
範例:

使用两个div元素制作宽度为1:1的两栏式版面，那么这两个div元素是位于相同的row，并分别占用6个column。

兩欄版面

使用三个div元素制作宽度为1:3:2的三栏式版面，那么这三个div元素是位于相同的row，并分别占用2、6、4个column。

3欄版面

网格选项

Bootstrap针对不同的荧幕尺寸提供多种网格选项

网格选项
类别前置词后面接的是1~12，表示占用几个column

範例: 制作宽度为1:3:2的三栏式版面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>Bootstrap網格系統-三欄式版面</title>
    <style>
    	/*设定区块的背景色彩与框线，有助于看清楚区块位置*/
        div[class^="col"] {
            background-color: #EBDEF0;
            border: 0.5px solid purple;
        }
    </style>
</head>
<body>
    <div class="container">
    	<!-- 这三个<div>元素是位于相同的row，并分别占用2、6、4个column -->
        <div class="row">
            <div class="col-sm-2">區塊1</div>
            <div class="col-sm-6">區塊2</div>
            <div class="col-sm-4">區塊3</div>
        </div>
    </div>
</body>
</html>

当浏览器宽度够大时(>=576px)三栏会排成一列

在这里插入图片描述

当浏览器宽度不够时(<576px)三栏会各自一列

在这里插入图片描述

断点(Breakpoint)

我们可以透过断点让网页根据装置大小调整版面配置，而且Bootstrap是使用媒体查询根据断点来建构CSS，Bootstrap提供以下6个预设的断点。
斷點介紹

容器(Container)

容器是Bootstrap最基本的版面配置元素，可以让网格系统的row与column保持适当的边界和留白。

Bootstrap提供下列三种不同的容器:

.container: 根据不同的响应式断点变更最大容器宽度。
.container-fluid: 容器宽度是浏览器的100%宽度，两侧没有留白。
.container-{breakpoint}: 容器宽度是浏览器的100%宽度，直到超过指定的断点，两侧才会有留白。

比較:

各類容器比較
範例: 各类型容器下的两栏式版面

第一个容器使用.container类别
第二个容器使用.container-md类别
第三个容器使用.container-fluid类别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>Bootstrap網格系統-各類容器比較</title>
    <style>
    	/*设定区块的背景色彩与框线，有助于看清楚区块位置*/
        div[class^="col"] {
            background-color: #EBDEF0;
            border: 0.5px solid purple;
        }
    </style>
</head>
<body>
	<!-- 容器1 -->
    <div class="container">
        <div class="row">
            <div class="col-8">區塊1</div>
            <div class="col-4">區塊2</div>
        </div>
    </div>
    <!-- 容器2 -->
    <div class="container-md">
        <div class="row">
            <div class="col-8">區塊3</div>
            <div class="col-4">區塊4</div>
        </div>
    </div>
    <!-- 容器3 -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-8">區塊5</div>
            <div class="col-4">區塊6</div>
        </div>
    </div>
</body>
</html>

容器1 (.container) 会根据不同的响应式断点变更最大容器宽度，超过576px时两侧才会有留白。

容器2 (.container-md) 的宽度是浏览器的100%宽度，直到超过指定断点(768px)，两侧才会有留白。

容器3 (.container-fluid) 在任何时候容器宽度都是浏览器的100%宽度，两侧没有留白。

在Iphone 8下效果:
荧幕宽度600px下效果:
在ipad下效果:

XI_MILU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap笔记(二) 认识网格系统

认识网格系统介绍Bootstrap网格系统是透过横向的row(列)和直向的column(行)来设计网页版面，他将网页宽度平均分割为12等份，称为12个column。範例:使用两个div元素制作宽度为1:1的两栏式版面，那么这两个div元素是位于相同的row，并分别占用6个column。使用三个div元素制作宽度为1:3:2的三栏式版面，那么这三个div元素是位于相同的row，并分别占用2、6、4个column。网格选项Bootstrap针对不同的荧幕尺寸提供多种网格选项类别前
复制链接

扫一扫

专栏目录