Jumbotron

https://getbootstrap.com/docs/4.3/components/jumbotron/

 

Jumbotron

Lightweight, flexible component for showcasing hero unit style content.

getbootstrap.com

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Document</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        <style>
            *{box-sizing: border-box;}
            div{border: 1px solid black;}
            .img-box{
                padding: 10px;
            }
            .img-box img{
                max-height: 250px;
            }
        </style>
    </head>
    <body>
        <div class="jumbotron">
            <h1 class="display-4">Hello, world!</h1>
            <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <hr class="my-4">
            <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </div>



        <!-- col / col-sm / col-md / col-lg / com-xl  -->
        <div class="container">
            <div class="row">
               
                <div class="img-box col-sm-12 col-md-6 col-lg-3">
                    <!-- 브라우저가 sm이 되면 혼자 12칸을 독점한다 -->
                    <!--브라우저가 md이면 6칸 차지-->
                    <!--브라우저가 lg이면 3칸 차지-->

                    <div class="card">
                        <img src="cake4.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        </div>
                    </div>

                </div>
                <div class="img-box col-sm-12 col-md-6 col-lg-3">

                    <div class="card">
                        <img src="cake.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        </div>
                    </div>

                </div>
                <div class="img-box col-sm-12 col-md-6 col-lg-3">

                    <div class="card">
                        <img src="cake2.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        </div>
                    </div>

                </div>
                <div class="img-box col-sm-12 col-md-6 col-lg-3">
                    <div class="card">
                        <img src="cake3.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        </div>
                    </div>


                </div>
            </div>
        </div>


    </body>
</html>

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Bootstrap4] 로그인 메뉴 만들기  (0) 2020.04.09
[Bootstrap4] Layout : order , d-none  (0) 2020.04.09
[Bootstrap4] Layout : Containers  (0) 2020.04.09
[Bootstrap4] Navbar  (0) 2020.04.09
[Bootstrap4] 예제 - Card 속에 Carousel  (0) 2020.04.09

+ Recent posts

티스토리툴바