Bootstrap01----容器,网格系统,文字排版,颜色

JSU_曾是此间年少

于 2024-08-26 18:37:23 发布

阅读量258

点赞数 3

文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/m0_72678953/article/details/141570649

版权

首先给出bootstrap的模板,里面导入了项目所需要的最大引入资源,包含一个CSS文件,一个bootstrap包,和一个弹窗相关的js文件.其他的内容都填入root容器当中即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是Bootstrap模板</title>
    <script src=""></script>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>
    
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

</head>
<body>
    <div id="root">
        这是Bootstrap默认界面
    </div>
</body>
</html>

一.容器

容器主要分为两种:普通容器和全屏容器

普通容器:根据媒体查询写入死值宽度

全屏容器:设置宽度为100%

详情媒体查询参数,参考:Bootstrap5 容器 | 菜鸟教程

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是Bootstrap模板</title>
    <script src=""></script>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div id="root">
        <div class="container">
            这是Bootstrap默认界面
        </div>
        <div class="container-fluid">
            这是Bootstrap全屏界面
        </div>
    </div>
</body>

</html>

二.网格系统

网格系统主要用来实现grid布局,使用row + col的格式进行样式编排

其中一行的宽度数量总和必须为12,如果没有明确指明的列,将会均分剩余的宽度

类型包含平板,大屏幕等,详情参考:Bootstrap5 网格系统 | 菜鸟教程

可以根据不同的设备设置不同的规则,而且可以设置偏移!!!

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是Bootstrap模板</title>
    <script src=""></script>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div id="root">
        网格系统支持嵌套
        <div class="row border">
            <div class="col">你好1</div>
            <div class="col">你好2</div>
            <div class="col">你好3</div>
            <div class="col">你好4</div>
            <div class="col">你好5</div>
            <div class="col">你好6</div>
        </div>
        <div class="row border">
            <div class="col-sm-12">整个就是12</div>
        </div>
        <div class="row border">
            <div class="col-sm-1">分得1份</div>
            <div class="col-sm-2">分得2份</div>
            <div class="col-sm-3">分得3份</div>
            <div class="col-sm-6">分得6份</div>
        </div>
        <!-- 不要忘记同类向加为12 -->
        <div class="row border">
            <div class="col-sm-3 col-md-6">
                <p>这是内容1</p>
            </div>
            <div class="col-sm-9 col-md-6">
                <p>这是内容2</p>
            </div>
            <div class="aaaa"></div>
        </div>
        <!--  -->
        <div class="row">
            <div class="col-md-4 p-3 bg-primary text-white">.col-md-4</div>
            <div class="col-md-4 offset-md-4 bg-dark text-white">.col-md-4 .offset-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-3 offset-md-3 bg-primary text-white">.col-md-3 .offset-md-3</div>
            <div class="col-md-3 offset-md-3 bg-dark text-white">.col-md-3 .offset-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 offset-md-3 bg-primary text-white">.col-md-6 .offset-md-3</div>
        </div>
    </div>
</body>

</html>

三.文字排版

主要有h系列的标签表示的等级,也可以使用h1-h6属性来对p标签设置大小,再通过display-num进行进一步放大

还有 small mark abbr blockquotes dl code kbd pre等语义化标签

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是Bootstrap模板</title>
    <script src=""></script>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div id="root">
        这是Bootstrap默认界面
        <div class="container">
            <!-- h*   h1-h6 -->
            <h1>这是h1</h1>
        </div>
        <div class="container">
            <!-- h*   h1-h6 -->
            <p class="h1 display-1">这是h1</p>
        </div>
        <div class="container">
            <h1 class="display-1">Display 1</h1>
            <h1 class="display-2">Display 2</h1>
            <h1 class="display-3">Display 3</h1>
            <h1 class="display-4">Display 4</h1>
            <h1 class="display-5">Display 5</h1>
            <h1 class="display-6">Display 6</h1>
        </div>
        <!-- small 让文本小一级 -->
        <!-- mark 让文本高亮为黄色背景 -->
        <!-- abbr 底部虚线 -->
        <!-- blockquotes + footer 引用声明 包含一个角注 -->
        <!-- dl + dt dd  貌似是标题容器 包含一个标题 和 标题解释 -->
        <!-- code 将代码高亮出来 -->
        <!-- kbd 显示出终端的样式 -->
        <!-- pre 多行文本 -->
    </div>
</body>

</html>

四.颜色

可以设置字体颜色和背景颜色与透明度

字体颜色:下面的11个属性

背景颜色:使用bg-xxx 下面的10个属性

透明度:我们在字体后面跟一个数字即可,最大100,例如text-muted-50

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是Bootstrap模板</title>
    <script src=""></script>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div id="root">
        <div class="container">
            <!-- 下面是一些type ,用来设置字体颜色
                muted
                primary secondary
                info    warnning    danger  success
                dark    body     light   white
            -->
            <p class="text-muted"></p>
            <!-- 可以使用 text-type-number  设置透明度-->
            <p clsss="text-muted-50"></p>
            <!-- 使用a标签 + herf属性指向一个链接 -->
            <!-- 下面是一些bg-type ,用来设置一些背景 
                primary secondary
                info    warnning    danger  success
                dark    light 
            -->
            <p class="bg-primary text-white">重要的背景颜色。</p>
        </div>
    </div>
</body>

</html>