Bootstrap4 图像形状+Jumbotron+信息提示框+按钮

rounded 图片圆角

rounded-circle 椭圆角

img-thumbnail 缩略图效果（有边框）

float-left   float-right  图片对齐方式

img-fluid 响应式图片

<!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>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="background:lavender;">
                <img src="img/boot.jpg" class="rounded">
                <img src="img/boot.jpg" class="rounded-circle">
                <img src="img/boot.jpg" class="img-thumbnail">
                <img src="img/boot.jpg" class="float-right">
                <img src="img/boot.jpg" class="img-fluid">
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 Jumbotron
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。

<!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>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </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>
</head>
<body>
    <div class="jumbotron jumbotron-fluid">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>
</body>
</html>

Bootstrap4 信息提示框

alert

alert-primary

alert-info

alert-warning

alert-success

alert-danger

alert-secondary

alert-light

alert-dark

<!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>
</head>
<body>
    <div>
        <div class="alert">提示啦</div>
        <div class="alert-primary">提示啦</div>
        <div class="alert-info">提示啦</div>
        <div class="alert-warning">提示啦</div>
        <div class="alert-success">提示啦</div>
        <div class="alert-danger">提示啦</div>
        <div class="alert-light">提示啦</div>
        <div class="alert-dark">提示啦</div>
        <div class="alert-secondary">提示啦</div>
    </div>
</body>
</html>

提示框中添加链接，使用alert-link

<!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>
</head>
<body>
    <div>
        <div class="alert">提示啦<a href="#" class="alert-link">链接</a></div>
        <div class="alert-primary">提示啦<a href="#" class="alert-link">链接</a></div>
        <div class="alert-info">提示啦<a href="#" class="alert-link">链接</a></div>
        <div class="alert-warning">提示啦<a href="#" class="alert-link">链接</a></div>
        <div class="alert-success">提示啦<a href="#" class="alert-link">链接</a></div>
        <div class="alert-danger">提示啦<a href="#" class="alert-link">链接</a></div>
        <div class="alert-light">提示啦<a href="#" class="alert-link">链接</a></div>
        <div class="alert-dark">提示啦<a href="#" class="alert-link">链接</a></div>
        <div class="alert-secondary">提示啦<a href="#" class="alert-link">链接</a></div>
    </div>
</body>
</html>

都是黑色的，有点丑

在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作

<!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>
</head>
<body>
    <div class="alert alert-info alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        这是提示信息，重要！
    </div>
</body>
</html>

 &times; (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 "x"

fade show 设置提示框关闭时的淡入淡出效果

<!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>
</head>
<body>
    <div class="alert alert-info alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        这是提示信息，重要！
    </div>
</body>
</html>

Bootstrap4 按钮

    <button type="button" class="btn">btn</button>
    <button type="button" class="btn btn-primary">btn</button>
    <button type="button" class="btn btn-info">btn</button>
    <button type="button" class="btn btn-warning">btn</button>
    <button type="button" class="btn btn-success">btn</button>
    <button type="button" class="btn btn-danger">btn</button>
    <button type="button" class="btn btn-light">btn</button>
    <button type="button" class="btn btn-dark">btn</button>
    <button type="button" class="btn btn-link">btn</button>
    <button type="button" class="btn btn-secondary">btn</button>

按钮类可用于 <a>, <button>, 或 <input> 元素上

    <button type="button" class="btn btn-primary">btn</button>
    <input type="button" value="按钮" class="btn btn-primary">
    <input type="submit" value="提交按钮" class="btn btn-primary">
    <a href="#" role="button" class="btn btn-primary">链接按钮</a>

按钮设置边框

    <button type="button" class="btn btn-outline-primary">btn</button>
    <button type="button" class="btn btn-outline-info">btn</button>
    <button type="button" class="btn btn-outline-success">btn</button>
    <button type="button" class="btn btn-outline-warning">btn</button>
    <button type="button" class="btn btn-outline-danger">btn</button>

按钮大小 btn-lg  btn-sm

    <button type="button" class="btn btn-outline-primary btn-lg">lg btn</button>
    <button type="button" class="btn btn-outline-info btn-sm">sm btn</button>

设置块级按钮

    <button type="button" class="btn btn-outline-primary btn-lg">lg btn</button>
    <button type="button" class="btn btn-outline-info btn-sm">sm btn</button>
    <button type="button" class="btn btn-outline-success btn-block">btn block</button>

激活和禁用的按钮

    <button type="button" class="btn btn-outline-warning active">active btn</button>
    <button type="button" class="btn btn-outline-danger" disabled>disabled btn</button>

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chenyingying0/p/12704683.html