Containers

 

https://getbootstrap.com/docs/4.4/layout/overview/

 

Overview

Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.

getbootstrap.com

반응형이 폰에도 적용되려면 메타태그 추가해야함

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

row를 여럿으로 나누면 창 줄일때 따로논다.

 

하나의 row 안에 묶어야 반응형으로 같이 동작

<!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;}
 
        </style>
    </head>
    <body>
<!--bootstrap에서 높이값을 미리 정해놓으면 충돌, 높이는 들어가는 내용 사이즈에 맞춰지도록-->
   
   <div class="container">
       <div class="row">
           <div class="logo col-sm-2">
               logo
           </div>
           
           <div class="title col-sm-8">
               title
           </div>
           <div class="reserved col-sm-2">
               reserved
           </div>
           
           <div class="navbar col-sm-12">
               navi
           </div>
           
           <div class="left col-sm-8">
               left
           </div>
           <div class="right col-sm-4">
               right
           </div>
           
           
           <div class="footer col-sm-12">
               footer
           </div>
           
       </div>
       
   </div>
    </body>
</html>

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

[Bootstrap4] Layout : order , d-none  (0) 2020.04.09
[Bootstrap4] Jumbotron  (0) 2020.04.09
[Bootstrap4] Navbar  (0) 2020.04.09
[Bootstrap4] 예제 - Card 속에 Carousel  (0) 2020.04.09
[Bootstrap4] Carousel  (0) 2020.04.09

+ Recent posts

티스토리툴바