首页 > > 网页制作 > css >

Bootstrap 滚动监听+小工具+Flex（弹性）布局+多…

2020-04-20 09:39:24来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象

Bootstrap 滚动监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        body{
            margin:10px;
            padding:10px;
        }
        .navbar-item{flex:1;}
    </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50" style="position: relative;">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
        <ul class="navbar-nav" style="width:100%;">
            <li class="nav-item">
                <a href="#item1" class="nav-link">item1</a>
            </li>
            <li class="nav-item">
                <a href="#item2" class="nav-link">item2</a>
            </li>
            <li class="nav-item">
                <a href="#item3" class="nav-link">item3</a>
            </li>
            <li class="nav-item">
                <a href="#item4" class="nav-link">item4</a>
            </li>
        </ul>
    </nav>

    <div id="item1" class="container-fluid bg-success" style="padding:70px 0">
        <h1>Section 1</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>
    </div>
    <div id="item2" class="container-fluid bg-warning" style="padding:70px 0">
        <h1>Section 2</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>
    </div>
    <div id="item3" class="container-fluid bg-danger" style="padding:70px 0">
        <h1>Section 3</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>
    </div>
    <div id="item4" class="container-fluid bg-info" style="padding:70px 0">
        <h1>Section 4</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>
    </div>


</body>
</html>

 

 

 

把滚动监听加在body标签上，是正常的

当我尝试加在某个div上时，发现滚动监听似乎无效了

各位有知道原因的么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        body{
            margin:10px;
            padding:10px;
        }
        .navbar-item{flex:1;}
    </style>
</head>
<body>

<div data-spy="scroll" data-target=".navbar" data-offset="50" style="width:300px;margin:0 auto;position: relative;">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" style="width:300px;margin:0 auto;">
        <ul class="navbar-nav" style="width:100%;">
            <li class="nav-item">
                <a href="#item1" class="nav-link">item1</a>
            </li>
            <li class="nav-item">
                <a href="#item2" class="nav-link">item2</a>
            </li>
            <li class="nav-item">
                <a href="#item3" class="nav-link">item3</a>
            </li>
            <li class="nav-item">
                <a href="#item4" class="nav-link">item4</a>
            </li>
        </ul>
    </nav>

    <div id="item1" class="container-fluid bg-success" style="padding:70px 0">
        <h1>Section 1</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>
    </div>
    <div id="item2" class="container-fluid bg-warning" style="padding:70px 0">
        <h1>Section 2</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>
    </div>
    <div id="item3" class="container-fluid bg-danger" style="padding:70px 0">
        <h1>Section 3</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>
    </div>
    <div id="item4" class="container-fluid bg-info" style="padding:70px 0">
        <h1>Section 4</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>
    </div>

</div>


</body>
</html>

 

 

 

垂直滚动监听：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        .nav-pills{
            position:fixed;
            top:20px;
        }
        .col-8 div{
            height:800px;
        }
    </style>
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="1" style="position: relative;">
    <div class="container-fluid">
        <div class="row">
            <nav class="col-4" id="navbar">
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a href="#item1" class="nav-link">item1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#item2" class="nav-link">item2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#item3" class="nav-link">item3</a>
                    </li>
                    <li class="nav-item">
                        <a href="#item4" class="nav-link">item4</a>
                    </li>
                </ul>
            </nav>

            <div class="col-8">
                <div id="item1" class="container-fluid bg-success" style="padding:70px 0">
                    <h1>Section 1</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>
                </div>
                <div id="item2" class="container-fluid bg-warning" style="padding:70px 0">
                    <h1>Section 2</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>
                </div>
                <div id="item3" class="container-fluid bg-danger" style="padding:70px 0">
                    <h1>Section 3</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>
                </div>
                <div id="item4" class="container-fluid bg-info" style="padding:70px 0">
                    <h1>Section 4</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>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

 

 

 

 

Bootstrap4 小工具

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        div{
            display: inline-block;
            width:100px;
            height:100px;
            margin:20px;
        }
    </style>
</head>
<body>
    <div class="border"></div>
    <div class="border-0"></div>
    <div class="border border-top-0"></div>
    <div class="border border-right-0"></div>
    <div class="border border-bottom-0"></div>
    <div class="border border-left-0"></div>

</body>
</html>

 

 

 

Bootstrap4 提供了一些类来设置边框颜色:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        div{
            display: inline-block;
            width:100px;
            height:100px;
            margin:20px;
        }
    </style>
</head>
<body>
    <div class="border border-primary">primary</div>
    <div class="border border-secondary">secondary</div>
    <div class="border border-info">info</div>
    <div class="border border-warning">warning</div>
    <div class="border border-danger">danger</div>
    <div class="border border-success">success</div>
    <div class="border border-light">light</div>
    <div class="border border-dark">dark</div>
    <div class="border border-white">white</div>

</body>
</html>

 

 

 

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        div{
            display: inline-block;
            width:100px;
            height:100px;
            margin:20px;
        }
    </style>
</head>
<body>
    <div class="rounded border">rounded</div>
    <div class="rounded-top border">rounded-top</div>
    <div class="rounded-bottom border">rounded-bottom</div>
    <div class="rounded-left border">rounded-left</div>
    <div class="rounded-right border">rounded-right</div>
    <div class="rounded-circle border">rounded-circle</div>
    <div class="rouded-0 border">rouded-0</div>

</body>
</html>

 

 

 

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        .box{
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="box border float-left">float-left</div>
        <div class="box border float-right">float-right</div>
    </div>


</body>
</html>

 

 

设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        .box{
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <!-- 设置响应式浮动 -->
    <div class="clearfix">
        <div class="box border float-md-right">在大于中等屏幕尺寸上右浮动</div>
    </div>

</body>
</html>

 

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

<div class="box mx-auto bg-warning">div</div>

 

 

 

使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        div{
            margin-bottom:10px;
        }
    </style>
</head>
<body>
    <div class="w-25 bg-warning">25%</div>
    <div class="w-50 bg-warning">50%</div>
    <div class="w-100 bg-warning">100%</div>
    <div class="mw-80 bg-warning">最大80%</div>
</body>
</html>

最大宽度没生效，是这么用的么？？

 

使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        .container{
            height:300px;
        }
        div{
            margin-right:10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="float-left h-25 bg-warning">25%</div>
        <div class="float-left h-50 bg-warning">50%</div>
        <div class="float-left h-100 bg-warning">100%</div>
        <div class="float-left mh-80 bg-warning" style="height:300px;">最大80%</div>
    </div>
</body>
</html>

 

 

 

不是很懂这个最大宽度和最大高度的原理……

 

Bootstrap 4 Flex（弹性）布局

注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3

    <div class="d-flex p-3 bg-dark">
        <div class="p-2 bg-warning">bg-warning</div>
        <div class="p-2 bg-info">bg-info</div>
        <div class="p-2 bg-danger">bg-danger</div>
    </div>

 

 

  

创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:

    <div class="d-inline-flex p-3 bg-dark">
        <div class="p-2 bg-warning">bg-warning</div>
        <div class="p-2 bg-info">bg-info</div>
        <div class="p-2 bg-danger">bg-danger</div>
    </div>

 

 

 

.flex-row 可以设置弹性子元素水平显示，这是默认的。

使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。

    <div class="d-flex p-3 bg-dark">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box1</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

    <div class="d-flex p-3 bg-dark flex-row">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box1</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

    <div class="d-flex p-3 bg-dark flex-row-reverse">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box1</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

 

 

 

 

.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素：

    <div class="d-flex p-3 bg-dark flex-column">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box1</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

    <div class="d-flex p-3 bg-dark flex-column-reverse">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box1</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

 

 

 

.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:

    <div class="d-flex p-3 bg-dark justify-content-start">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box1</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

    <div class="d-flex p-3 bg-dark justify-content-end">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box1</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

    <div class="d-flex p-3 bg-dark justify-content-center">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box1</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

    <div class="d-flex p-3 bg-dark justify-content-between">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box1</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

    <div class="d-flex p-3 bg-dark justify-content-around">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box1</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

 

 

 

.flex-fill 类强制设置各个弹性子元素的宽度是一样的:（填满剩余空间）

    <div class="d-flex p-3 bg-dark">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

    <div class="d-flex p-3 bg-dark">
        <div class="p-2 bg-warning flex-fill">flex box1</div>
        <div class="p-2 bg-info flex-fill">flex box2</div>
        <div class="p-2 bg-danger flex-fill">flex box3</div>
    </div>

 

 

 

.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中两个子元素只设置了它们所需要的空间，中间一个获取剩余空间。

    <div class="d-flex p-3 bg-dark">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info flex-grow-1">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

 

 

 

使用 .flex-shrink-1 用于设置子元素的收缩规则。

 

.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前) :

    <div class="d-flex p-3 bg-dark">
        <div class="p-2 bg-warning order-2">flex box1</div>
        <div class="p-2 bg-info order-3">flex box2</div>
        <div class="p-2 bg-danger order-1">flex box3</div>
    </div>

 

 

.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;，.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;:

    <div class="d-flex p-3 bg-dark">
        <div class="p-2 mr-auto bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
    </div>

    <div class="d-flex p-3 bg-dark">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 ml-auto bg-danger">flex box3</div>
    </div>

 

 

弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行

    <div class="d-flex p-3 bg-dark flex-wrap">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark flex-wrap-reverse">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark flex-nowrap">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

 

 

使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。

这些类在只有一行的弹性子元素中是无效的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        .d-flex{height:200px;}
    </style>
</head>
<body>

    <div class="d-flex p-3 bg-dark flex-wrap align-content-start border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark flex-wrap align-content-end border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark flex-wrap align-content-center border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark flex-wrap align-content-around border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark flex-wrap align-content-stretch border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>




</body>
</html>

 

 

 

如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。

    <div class="d-flex p-3 bg-dark align-items-start border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark align-items-end border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark align-items-center border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark align-items-around border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark align-items-stretch border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

 

 

如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。

    <div class="d-flex p-3 bg-dark border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger align-self-start">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger align-self-end">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger align-self-center">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger align-self-around">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

    <div class="d-flex p-3 bg-dark border border-white">
        <div class="p-2 bg-warning">flex box1</div>
        <div class="p-2 bg-info">flex box2</div>
        <div class="p-2 bg-danger align-self-stretch">flex box3</div>
        <div class="p-2 bg-warning">flex box4</div>
        <div class="p-2 bg-info">flex box5</div>
        <div class="p-2 bg-danger">flex box6</div>
    </div>

 

 

响应式flex类：

可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下表格中的 * 号可以的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。

https://www.runoob.com/bootstrap4/bootstrap4-flex.html  菜鸟笔记最下面写的很清楚，要用了就去翻翻

 

Bootstrap 4 多媒体对象

要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:

    <div class="media border p-3">
        <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;">
        <div class="media-body">
            <h4>基础多媒体对象</h4>
            <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p>
        </div>
    </div>

 

 

多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）

要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中:

    <div class="media border p-3">
        <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;">
        <div class="media-body">
            <h4>基础多媒体对象</h4>
            <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p>
            <div class="media border p-3">
                <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;">
                <div class="media-body">
                    <h4>基础多媒体对象</h4>
                    <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p>
                </div>
            </div>
        </div>
    </div>

 

 

如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片:

    <div class="media border p-3">        
        <div class="media-body">
            <h4>基础多媒体对象</h4>
            <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p>
        </div>
        <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;">
    </div>

 

 

 

 

可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置：

（垂直方向）

    <div class="media border p-3">
        <img src="img/img_avatar.png" class="align-self-start mr-3 rounded-circle" style="width:50px;">
        <div class="media-body">
            <h4>基础多媒体对象</h4>
            <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p>
        </div>
    </div>

    <div class="media border p-3">
        <img src="img/img_avatar.png" class="align-self-end mr-3 rounded-circle" style="width:50px;">
        <div class="media-body">
            <h4>基础多媒体对象</h4>
            <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p>
        </div>
    </div>

    <div class="media border p-3">
        <img src="img/img_avatar.png" class="align-self-center mr-3 rounded-circle" style="width:50px;">
        <div class="media-body">
            <h4>基础多媒体对象</h4>
            <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p>
        </div>
    </div>

 

 

Bootstrap4 创建一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>
        
    </style>
</head>
<body>

    <div class="jumbotron text-center" style="margin-bottom:0;">
        <h1>我的第一个 Bootstrap 4 页面</h1>
          <p>重置浏览器窗口大小查看效果！</p> 
    </div>

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <a class="navbar-brand" href="#">导航</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接</a>
          </li>    
        </ul>
      </div>  
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                about me
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                      <a class="nav-link active" href="#">激活状态</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">链接</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">链接</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#">禁用</a>
                    </li>
                 </ul>
                 <hr class="d-sm-none">
            </div>
            <div class="col-sm-8">
                ...
            </div>
        </div>
    </div>

    <div class="jumbotron text-center" style="margin-bottom:0">
      <p>footer</p>
    </div>

</body>
</html>

 

 好丑……

 


原文链接:https://www.cnblogs.com/chenyingying0/p/12736533.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：小白转前端，学习哪些知识点才能不走弯路？

下一篇：HTML连载84-添加中部的图片

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签