728x90
반응형
 https://getbootstrap.com/docs/4.6/getting-started/introduction/
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

container

  
<div class="container-fluid">
  
컨테이너는 내용물을 채워넣는데 사용되며 두 가지 컨테이너 클래스를 사용할 수 있다.
    .contatiner클래스 : 고정 너비 컨테이너를 제공한다.
    .container-fluid클래스 : 뷰포트의 전체 너비를 제공한다.
  
.container사이즈 :
    xd : 100%( <576px)
    sm : 540px( >=576px)
    md : 720px( >=768px)
    lg : 960px( >=992px)
    xl : 1140px( >=1200px)
  
padding-left : 15px;
padding-right : 15px;
자동적용
  
f
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script>
    <style>
        div {border : 1px solid black;}
        .container-fluid{margin-top:50px;}
        .container, .container-fluid{background-color: red;}
    </style>
  
</head>
  <body>

    <!-- 컨터이너는 내용물을 채워넣는데 사용되며 두 가지 컨테이너 클래스를 사용할 수 있다.
    .contatiner클래스 : 고정 너비 컨테이너를 제공한다.
    .container-fluid클래스 : 뷰포트의 전체 너비를 제공한다. -->
    <div class="container">
        <h1>.container</h1>
        <p>이 부분은 .container가 적용되고 있는 부분이다.</p>
        <p>.container는 가운데 정렬, 고정 가로폭을 제공한다.</p>
    </div>
    <!-- .container사이즈 :
    xd : 100%( <576px)
    sm : 540px( >=576px)
    md : 720px( >=768px)
    lg : 960px( >=992px)
    xl : 1140px( >=1200px)
    -->
    <div class="container-sm">.container-sm</div>
    <div class="container-md">.container-md</div>
    <div class="container-lg">.container-lg</div>
    <div class="container-lg container-xl">.container-xl</div>
    <div class="container-sm">.container-sm</div>
    <div class="container-md mt-3">.container-md</div>
    <div class="container-lg mt-3">.container-lg</div>
    <div class="container-xl mt-3">.container-xl</div>

    <div class="container-fluid">
        <h1>이 부분은 .container-fluid가 적용되고 있는 부분이다.</h1>
        <p>.container-fluid는 뷰포트의 전체 너비를 제공한다.</p>
    </div>

  </body>
</html>​

 

row  
<div class="row">
        <div class="col-3 bg-success">.col-3</div>
        <div class="col-6 bg-warning">.col-6</div>
  
<div class="row row-cols-1">
.row-cols-* 클래스는 나란히 표시할 열의 수를 설정하는 데 사용됩니다.
  
margin-left : 15px;
margin-right : 15px;
자동적용		  
col  
col-  
col-3 bg-success
col-6 bg-warning
 
col bg-success
col bg-warning
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script>
    <div class="container-fluid">
        <h2>3개의 동일한 컬럼들(Columns)</h2>
        <p>지정된 수의 요소에 .col클래스를 사용하면 부트스트랩이 요소가 몇 개나 있는지
            인식하고 너비가 같은 열을 만듭니다. 아래 예제에서는 각각 33.33%의 폭을 갖는 세개의 콜 요소를 사용합니다.
        </p>
        <div class="row">
            <div class="col bg-success">.col</div>
            <div class="col bg-warning">.col</div>
            <div class="col bg-success">.col</div>
        </div>

        <h2>3개의 동일한 컬럼들(Columns)</h2>
        <p>숫자를 사용하여 열 너비를 제어할 수도 있습니다. 합계는 항상 12가 되어야합니다.</p>
        <div class="row">
            <div class="col-2 bg-success">.col-4</div>
            <div class="col-8 bg-warning">.col-4</div>
            <div class="col-2 bg-success">.col-4</div>
        </div>
    </div>
</head>
<body>
    
</body>
</html>
grid
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script>
    <style>
        .col{border: 1px solid #ddd;
            background-color:aliceblue;}
    </style>
</head>
<body>
    <div class="container-fluid">
        <h2>Row Cols</h2>
        <p>.row-cols-* 클래스는 나란히 표시할 열의 수를 설정하는 데 사용됩니다.</p>

        <div class="row row-cols-1">
            <div class="col bg-success">1 of 2</div>
            <div class="col bg-warning">2 of 2</div>
        </div>
        <br>
        <div class="row row-cols-2">
            <div class="col">1 of 4</div>
            <div class="col">2 of 4</div>
            <div class="col">3 of 4</div>
            <div class="col">4 of 4</div>
    </div><br>
    <div class="row row-cols-6">
        <div class="col bg-success">1 of 6</div>
        <div class="col bg-warning">2 of 6</div>
        <div class="col bg-success">3 of 6</div>
        <div class="col bg-warning">4 of 6</div>
        <div class="col bg-success">5 of 6</div>
        <div class="col bg-warning">6 of 6</div>
        
        <div class="col bg-success">1 of 6</div>
        <div class="col bg-warning">2 of 6</div>
        <div class="col bg-success">3 of 6</div>
        <div class="col bg-warning">4 of 6</div>
        <div class="col bg-success">5 of 6</div>
        <div class="col bg-warning">6 of 6</div>

        <div class="col bg-success">1 of 6</div>
        <div class="col bg-warning">2 of 6</div>
        <div class="col bg-success">3 of 6</div>
        <div class="col bg-warning">4 of 6</div>
        <div class="col bg-success">5 of 6</div>
        <div class="col bg-warning">6 of 6</div>
</body>
</html>​

 

 

asf
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script>
    
</head>
<body>
    <div class="container-fluid">
        <h2>Nested cloumns</h2>
        <p>Add columns inside other columns</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-8 bg-warning">
                <div class="row">
                    <div class="col bg-light">12</div>
                </div>
                .col-12 
            <div class="row">
                <div class="col-6 bg-light">.col-6</div>
                <div class="col-6 bg-secondary">.col-6</div>
            </div> 
            </div>
    <div class="col-4 bg-success">.col-4</div>
</div>
</body>
</html>​
max-width: 100%;
브라우저 크기가 커지더라도 기존 사이즈를 max 100%로 유지
ㅁㄴㄹ
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <h2>.rounded class</h2>
                <p>이미지의 모서리가 둥글게 된다.</p>
                <img src="./img/paris.jpg" class="rounded" alt="paris" width="304" height="236">
            </div>
            <div class="col">
                <h2>.rounded-circle class</h2>
                <p>이미지가 타원모양이 된다.</p>
                <img src="./img/paris.jpg" class="rounded-circle" alt="paris" width="304" height="304">
            </div>
            <div class="col">
                <h2>.img-thumbnail class</h2>
                <p>이미지가 썸네일처럼 보여지게 된다.</p>
                <img src="./img/paris.jpg" class="img-thumbnail" alt="paris" width="304" height="236">
            </div>


        </div>
    </div>    
</body>
</html>​

 

 

728x90
반응형
저작자표시 비영리 변경금지

'[JS]' 카테고리의 다른 글

[Bootstrap] form validation  (0) 2024.03.11
[Bootstrap] grid, button  (0) 2024.03.11
jqueryui  (0) 2024.03.11
jqueryui  (0) 2024.03.08
animation fadeIn(), fadeOut(), fadeToggle()  (0) 2024.03.08

+ Recent posts

티스토리툴바