023 Exercise Intro

原创于 2024-11-29 20:32:51 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#BootStrap5 #前端 #html

05 BootStrap5 专栏收录该内容

29 篇文章

订阅专栏

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />

    <title>Exercise 2</title>
</head>

<body>
    <div class="container">
        <h1>Give me a green border</h1>
        <h1>Give me a red bottom border</h1>
        <h1>Give me a rounded yellow border</h1>
        <h4>red bg, white text, display inline</h4>

        <button>Large Button With Large Shadow</button>
        <div>Small shadow with padding(3) all around and margin(5) on top and bottom </div>


        <!-- Make a large green outline button that has no padding at XS, has padding(3) at MD and has padding(5) at XL-->
        <button>I GROW</button>

        <h2>Center me, and make me hide at XS and SM</h2>
    </div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
</body>

</html>