BootStrap4

最新推荐文章于 2022-09-05 13:42:47 发布

大大126

最新推荐文章于 2022-09-05 13:42:47 发布

阅读量427

点赞数 1

分类专栏： bootstrap4 文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_59938047/article/details/119931582

版权

bootstrap4 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.BootStrap4 导航栏

.navbar类来创建一个标准的导航栏

.navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)

用 ul 元素并添加 class="navbar-nav" 类。然后在 li 元素上添加 .nav-item 类， a 元素上使用 .nav-link 类

        <nav class="navbar navbar-expand-sm bg-secondary ">
            <ul class="navbar-nav ">
                <li class="nav-item "><a href="# " class="nav-link ">导航栏1</a></li>
                <li class="nav-item "><a href="# " class="nav-link ">导航栏2</a></li>
                <li class="nav-item "><a href="# " class="nav-link ">导航栏3</a></li>
            </ul>
        </nav>

删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏

       <h3>垂直导航栏</h3>
        <nav class="navbar  bg-success ">
            <ul class="navbar-nav ">
                <li class="nav-item "><a href="# " class="nav-link ">垂直导航栏1</a></li>
                <li class="nav-item "><a href="# " class="nav-link ">垂直导航栏栏2</a></li>
                <li class="nav-item "><a href="# " class="nav-link ">垂直导航栏栏3</a></li>
            </ul>
        </nav>

设置在nav中ul前面设置a元素.navbar-brand 类用于高亮显示品牌/Logo

        <nav class="navbar navbar-expand-sm bg-secondary ">
            <a href="#" class="navbar-brand"><img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt=""></a>
            <ul class="navbar-nav ">
                <li class="nav-item "><a href="# " class="nav-link ">导航栏1</a></li>
                <li class="nav-item "><a href="# " class="nav-link ">导航栏2</a></li>
                <li class="nav-item "><a href="# " class="nav-link ">导航栏3</a></li>
            </ul>
        </nav>

li上设置dropdown，li中的a上设置dropdown-toggle，data-toggle="dropdown "，li中创建下拉菜单

        <nav class="navbar navbar-expand-sm bg-secondary ">
            <ul class="navbar-nav ">
                <li class="nav-item dropdown ">
                    <a href="# " class="nav-link dropdown-toggle " data-toggle="dropdown">文件夹</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">文件一</a>
                        <a href="#" class="dropdown-item">文件二</a></li>
                </li>
                <li class="nav-item  dropdown">
                    <a href="# " class="nav-link dropdown-toggle " data-toggle="dropdown">导航栏2</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">导航一</a>
                        <a href="#" class="dropdown-item">导航二</a>
                    </div>
                </li>
                <li class="nav-item  disabled"><a href="# " class="nav-link  ">导航栏3</a></li>
            </ul>
            </nav>

导航栏的表单form 元素使用 class="form-inline " 类来排版输入框与按钮

<nav class="navbar navbar-expand-sm  ">
        <form class="form-inline">
            <input class="form-control" type="text">
            <button class="btn btn-dark "> 百度一下</button>
        </form>
        <!-- 非链接文本 <span class="navbar-text"></span> -->
        <span class="navbar-text">百度</span>
    </nav>

固定导航栏

导航栏可以固定在头部或者底部。

我们使用 .fixed-top 类来实现导航栏的固定

.fixed-bottom 类用于设置导航栏固定在底部

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>导航栏</title>
</head>

<body class="container">
    <nav class="navbar navbar-expand-lg bg-success fixed-top">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link ">111</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link ">222</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link ">333</a>
            </li>
        </ul>
    </nav>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
    <h1>fixed-top</h1>
    <h1>fixed-botton</h1>
</body>

</html>

2.Bootstrap4 面包屑导航（Breadcrumb）

面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。

ul设置breadcrumb表示一个面包屑

breadcrumb-item面包屑中的每一项

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>面包屑导航</title>
</head>

<body class="container">
    <ul class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">宇宙</a></li>
        <li class="breadcrumb-item"><a href="#">地球</a></li>
        <li class="breadcrumb-item"><a href="#">亚洲</a></li>
        <li class="breadcrumb-item"><a href="#">中国</a></li>
        <li class="breadcrumb-item"><a href="#">陕西</a></li>
    </ul>
</body>

</html>

3.Bootstrap4 表单

表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。

堆叠表单

全屏宽度、垂直方向

   <form>
        账号<input type="text" class="form-control" placeholder="请输入账号">
    </form>

内联表单

在 <form> 元素上添加 .form-inline类

所有内联表单中的元素都是左对齐的。

屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

        <form class="form-inline">
            账号<input type="text" class="form-control" placeholder="请输入账号">
        </form>

Bootstrap 复选框(checkbox)

复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个。

使用 .form-check-inline 类可以让选项显示在同一行上

        <form>
            <input type="checkbox" value="" class="form-check-inline">复选框
            <input type="checkbox" value="" class="form-check-inline">复选框
            <input type="checkbox" value="" class="form-check-inline">复选框
        </form>

Bootstrap 单选框(Radio)

单选框用于让用户从一系列预设置的选项中进行选择，只能选一个。

使用 .radio-inline 类可以让选项显示在同一行上

        <form>
            <input type="radio" name="danxuan" id="" class="radio-inline">单选框
            <input type="radio" name="danxuan" id="" class="radio-inline">单选框
            <input type="radio" name="danxuan" id="" class="radio-inline">单选框
        </form>

Bootstrap select 下拉菜单

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

        <form>
            <select id="" multiple class="form-control">
             <option >1111111</option>
             <option >2222222</option>
             <option >3333333</option>
             <option >4444444</option>
             <option >5555555</option>
             <option >6666666</option>
             <option >7777777</option>
         </select>
        </form>

4.Bootstrap4 输入框组

使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮

使用 .input-group-prepend 类可以在输入框的的前面添加文本信息

使用 .input-group-append 类添加在输入框的后面

使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框

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

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>Bootstrap4 输入框组</title>
</head>
</head>

<body>
    <div class="container">
        <h3>使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮</h3>
        <h3>使用 .input-group-prepend 类可以在输入框的的前面添加文本信息</h3>
        <h3>使用 .input-group-append 类添加在输入框的后面</h3>
        <h3>使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框</h3>
        <form action="">

            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">账号</span></div>
                <input type="text" class="form-control" placeholder="输入账号">
            </div>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="输入账号">
                <div class="input-group-append">
                    <span class="input-group-text">账号</span></div>
            </div>
        </form>
    </div>
</body>

</html>

多个输入框

            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">账号</span></div>
                <input type="text" class="form-control" placeholder="输入账号">
                <input type="text" class="form-control" placeholder="用户名">
            </div>

多个前缀

            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">账号1</span>
                    <span class="input-group-text">账号2</span>
                    <span class="input-group-text">账号3</span>
                </div>
                <input type="text" class="form-control" placeholder="用户名">
            </div>

输入框添加按钮组

            <div class="input-group">
                <input type="text" class="form-control" placeholder="用户名">
                <div class="input-group-append">
                    <span class="input-group-text">*</span>
                    <button class="btn btn-info"><a href="https://www.baidu.com/"  >搜索</a></button>
                </div>
            </div>

5.Bootstrap4 轮播

轮播是一个循环的幻灯片

类	描述
.carousel	创建一个轮播
.carousel-indicators	为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
.carousel-inner	添加要切换的图片
.carousel-item	指定每个图片的内容
.carousel-control-prev	添加左侧的按钮，点击会返回上一张。
.carousel-control-next	添加右侧按钮，点击会切换到下一张。
.carousel-control-prev-icon	与 .carousel-control-prev 一起使用，设置左侧的按钮
.carousel-control-next-icon	与 .carousel-control-next 一起使用，设置右侧的按钮
.slide	切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。

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

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }
        
        #demo {
            width: 70%;
            height: 70%;
        }
    </style>
    <title>Bootstrap4 Bootstrap4 轮播</title>
</head>

<body class="container">
    <h2>轮播是一个循环的幻灯片</h2>
    <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
            <li data-target="#demo" data-slide-to="3"></li>

        </ul>
        <!-- 轮播图片 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF">
                <div class="carousel-caption">
                    <h3>图片</h3>
                    <p>网络图片</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://t7.baidu.com/it/u=737555197,308540855&fm=193&f=GIF">
                <div class="carousel-caption">
                    <h3>图片</h3>
                    <p>网络图片</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://t7.baidu.com/it/u=4240641596,3235181048&fm=193&f=GIF">
                <div class="carousel-caption">
                    <h3>图片</h3>
                    <p>网络图片</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://t7.baidu.com/it/u=1032479594,2383177859&fm=193&f=GIF">
                <div class="carousel-caption">
                    <h3>图片</h3>
                    <p>网络图片</p>
                </div>
            </div>
        </div>
        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</body>

</html>

6.Bootstrap4 模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等

.modal表示一个覆盖在父窗体上的子窗体

.modal-dialog对话框形式的子窗体

.modal-content具体内容设置

.modal-header具体内容的头

.modal-body具体内容身体

.modal-footer具体内容底部

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>Bootstrap4 模态框</title>
</head>

<body>
    <div class="container">
        <p>.modal表示一个覆盖在父窗体上的子窗体</p>
        <p>.modal-dialog对话框形式的子窗体</p>
        <p>.modal-content具体内容设置</p>
        <p>.modal-header具体内容的头</p>
        <p>.modal-body具体内容身体</p>
        <p>.modal-footer具体内容底部</p>
        <button class="btn btn-dark " data-toggle="modal" data-target="#modal1">模态框</button>
        <!-- 模态框 -->
        <div class="modal-lg" id="modal1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>员工信息</h3>
                    </div>
                    <div class="modal-body">
                        <form action="">
                            <table>
                                <tr>
                                    <td>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">用户名</span>
                                            </div>
                                            <input type="text" class="form-control">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">密码</span>
                                                <input type="password" class="form-control" name="" id="">
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-dark " data-toggle="modal" data-target="#modal1">关闭</button>
                    </div>
                </div>

            </div>


        </div>

    </div>
</body>

</html>

7.Bootstrap4 提示框

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失

通过向元素添加 data-toggle="tooltip" 来来创建提示框

title元素是用来显示提示内容的

data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>Bootstrap4 提示框</title>
</head>

<body>
    <div class="container">
        <h1>提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失</h1>
        <h3>通过向元素添加 data-toggle="tooltip" 来来创建提示框</h3>
        <h3>data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right</h3>
        <button class="btn btn-info"><a href="#" data-toggle="tooltip" data-placement="right"  title="提示框提示的内容" >提示框</a></button>
        <img src="zhaoxiangji.png" alt="" data-toggle="tooltip" data-placement="top" title="提示内容 ">
        <script>
            $(document).ready(function() {
                $('[data-toggle="tooltip"]').tooltip();
            });
        </script>
    </div>
</body>

</html>

8.Bootstrap4 弹出框

弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。

通过向元素添加 data-toggle="popover" 来来创建弹出框。

title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容

        <h1>弹出框</h1>
        <h3>通过向元素添加 data-toggle="popover" 来来创建弹出框</h3>
        <h3>title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容</h3>
        <a href="#" data-toggle="popover" title="标题" data-content="弹出框内容">弹出框</a>

9.Bootstrap4 滚动监听(Scrollspy)

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

向您想要监听的元素（通常是 body）添加 data-spy="scroll" 。

然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。

注意可滚动项元素上的 id （<div id="section1">）必须匹配导航栏上的链接选项（<a href="#section1">)。

可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。默认为 10 px。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>滚动监听(Scrollspy)</title>
</head>

<body class="container" data-spy="scroll" data-offset:70 data-target=".navbar">
    <div>
        <nav class=" navbar navbar-dark bg-danger navbar-expand-sm fixed-top">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#section1" class="nav-link">第一节</a>
                </li>
                <li class="nav-item">
                    <a href="#section2" class="nav-link">第二节</a>
                </li>
                <li class="nav-item">
                    <a href="#section3" class="nav-link">第三节</a>
                </li>
                <li class="nav-item">
                    <a href="#section4" class="nav-link">第四节</a>
                </li>
                <li class="nav-item">
                    <a href="#section5" class="nav-link">第五节</a>
                </li>
            </ul>
        </nav>
        <div id="section1" class="bg-success container-fluid">
            <h1>第一节</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section2" class="bg-success container-fluid">
            <h1>第二节</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section3" class="bg-success container-fluid ">
            <h1>第三节</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section4" class="bg-success container-fluid">
            <h1>第四节</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section5" class="bg-success container-fluid">
            <h1>第五节</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
    </div>
</body>

</html>

10.Bootstrap4 小工具

边框

使用 border 类可以添加或移除边框

边框圆角设置

使用rounded 类可以添加圆角边框

浮动

.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动

居中对齐

使用 .mx-auto 类来设置居中对齐

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="container">
        <span class="border">border 类添加或移除边框</span><br>
        <span class="border border-success">border-success 添加边框颜色</span>
        <h3>边框圆角rounded</h3>
        <span class="border border-success rounded"> 边框圆角</span>
        <h3>浮动</h3>
        <span class="border border-success rounded float-left ">左浮动</span><br>
        <span class="border border-success rounded float-right ">右浮动</span>
        <h3>clearfix 类用于清除浮动</h3>
        <h3>居中对齐.mx-auto</h3>
        <div class="mx-auto  bg-warning" style="width: 200px;">
            <p>居中</p>
        </div>
    </div>
</body>

</html>

大大126

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap4

1.BootStrap4 导航栏.navbar类来创建一个标准的导航栏.navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)用 ul 元素并添加 class="navbar-nav" 类。然后在 li 元素上添加 .nav-item 类， a 元素上使用 .nav-link 类 <nav class="navbar navbar-expand-sm bg-secondary ">
复制链接

扫一扫