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 類，然后在關閉按鈕的鏈接上添加和 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>

× (×) 是 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.uj5u.com/qiye/45480.html

標籤：Html/Css

上一篇：如何在云開發靜態托管系結靜態域名

下一篇：meta標簽及Keywords