欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-28 18:37:46
rounded 图片圆角 rounded-circle 椭圆角 img-thumbnail 缩略图效果（有边框） float-left float-right 图片对齐方式 img-fluid 响应式图片

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+信息提示框+按钮

 

 

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>

Bootstrap4 图像形状+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 jumbotron-fluid">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>
</body>
</html>

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

 

 

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>

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

 

 

提示框中添加链接，使用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>

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

 

 

都是黑色的，有点丑

 

在提示框中的 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>

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

 

 &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>

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

 

 

按钮类可用于 <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>

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

 

 

按钮设置边框

    <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>

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

 

 

按钮大小 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>

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

 

 

设置块级按钮

    <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>

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

 

 

激活和禁用的按钮

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

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

 

上一篇： json转义问题（消除反斜杠及{}外面多余的“）

下一篇： 最有营养早餐搭配是什么呢？吃早餐有什么注意事项？

推荐阅读