티스토리 뷰

Bootstrap4

[Bootstrap] 레이아웃 / COLUMN-1

에스파니아 2020. 3. 28. 22:11
728x90
반응형
.
Bootstrap COLUMN

Bootstrap 은 container 속성 > row 속성 > col 속성의 트리 구조를 갖는다.
row, col 속성은 display: flex로 기본 설정이 되어 있다. col 속성은 row 속성 안에서 균등하고 꽉차게 12개의 요소들로 나눌 수 있다.
.
Source

<!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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
        crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <title>Grid: Column-1_Start</title>

</head>
<style>
  body {
    margin: 5rem auto;
    background-color: orange;
    color: white;
}

.container {
    margin: 10px auto;
    padding: 20px auto;
    border: 10px solid yellow;
}

.container h1 {
    text-transform: uppercase;
}

.row {
    border: 10px solid lightblue;
}

.container>.row>div {
    padding: 20px 10px;
    border: 10px solid white;
    font-size: 50px;
    text-align: center;
}

.container>.row>div:nth-child(odd) {
    background: pink;
}

.container>.row>div:nth-child(even) {
    background: red;
}

.row-vh {
    height: 500px;
}
</style>
<body>
    <div class="container">
        <h1 class="display-1 text-center">rows & columns</h1>
        <br>
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
            <div class="col">9</div>
            <div class="col">10</div>
            <div class="col">11</div>
            <div class="col">12</div>
            <div class="col">13</div>
        </div>

        <br>
        <div class="row">
            <div class="col-3">1</div>
            <div class="col-5">2</div>
            <div class="col-4">3</div>
        </div>
        <br>
        
        <div class="row">
            <div class="col-lg-4 col-md-2 col-sm-5">1</div>
            <div class="col-lg-4 col-md-5 col-sm-3">2</div>
            <div class="col-lg-4 col-md-5 col-sm-4">3</div>
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>

</body>

</html>
col&nbsp; / col-숫자 / breackpoint 사용
디자인에 따라 각 COLUMN의 크기를 다르게 디자인 하고 싶을 경우, col 다음에 대쉬를 하고 원하는
비율의 숫자를 기록 한다. !! (col-숫자)
부트스트랩의 breakpoint 개념을 통해 class 이름을 여러개 설정하여 화면의 사이즈에 따라 다르게 보이도록 할 수 있다.

 

참고

 

728x90

'Bootstrap4' 카테고리의 다른 글

[Bootstrap] 레이아웃 / order / offset  (0) 2020.03.28
[Bootstrap] 레이아웃 / COLUMN-2 /justify-content / align-items  (0) 2020.03.28
[Bootstrap] 레이아웃 / CSS3 flex-5(order)  (0) 2020.03.28
[Bootstrap] 레이아웃 / CSS3 flex-4(align-self)  (0) 2020.03.28
[Bootstrap] 레이아웃 / CSS3 flex-3(justify-content&align-items)  (0) 2020.03.28
댓글
반응형
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함