01Bootstrap5容器

最新推荐文章于 2024-04-10 12:51:22 发布

夏至xz

最新推荐文章于 2024-04-10 12:51:22 发布

阅读量219

点赞数

分类专栏： Bootstrap5

本文链接：https://blog.csdn.net/qq_46452300/article/details/121800203

版权

Bootstrap5 容器响应式设计样式布局

关键词由CSDN通过智能技术生成

Bootstrap5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

01Bootstrap5容器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5容器</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<!--container用于创建固定宽度的响应式页面-->
<!--max-width会根据屏幕宽度同比列放大或缩小-->
<div class="container">
    <h1>你好，bootstrap5</h1>
</div>
<!--.container-fluid创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕width始终为100%-->
<div class="container-fluid">
    <h1>你好，bootstrap5</h1>
</div>
<!--默认情况下容器内部都有填充左右内边距，顶部和底部没有填充内边距。Bootstrap提供了一些间距类用于填充边距-->
<!--pt-5 填充顶部内边距-->
<div class="container pt-5">
    <h1>你好，bootstrap5</h1>
</div>
<!--边框border、颜色bg-dark、bg-primary等-->
<div class="p-5 my-5 border">
    <h1>你好，bootstrap5</h1>
</div>
<div class="container p-5 my-5 bg-dark text-white">
    <h1>你好，bootstrap</h1>
</div>
<div class="p-5 my-5 bg-primary text-white">
    <h1>你好，bootstrap</h1>
</div>
<!--响应式容器-->
<!--.container-sm|md|lg|xl|xxl等创建响应式容器（max-width）属性根据屏幕大小来改变-->
<div class="container-sm bg-dark text-white">
    <h1>你好，bootstrap</h1>
</div>
<div class="container-md bg-dark text-white">
    <h1>你好，bootstrap</h1>
</div>
<div class="container-lg bg-dark text-white">
    <h1>你好，bootstrap</h1>
</div>
<div class="container-xl bg-dark text-white">
    <h1>你好，bootstrap</h1>
</div>
<div class="container-xxl bg-dark text-white">
    <h1>你好，bootstrap</h1>
</div>
</body>
</html>

在这里插入图片描述

夏至xz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
01Bootstrap5容器

01Bootstrap5容器<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5容器</title> <link rel="sty
复制链接

扫一扫