HTML, CSS

부트스트랩 사용법(1)

5_hyun 2022. 5. 5. 23:30

https://getbootstrap.com/docs/5.1/getting-started/introduction/

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--부트스트랩 코드-->
</head>
<body>
<h1>hello world</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!--부트스트랩 코드-->
</body>
</html>

Grid

반응형 웹도 지원해준다. 보통은 md를 많이 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--부트스트랩 코드-->
    <style>
        .b{
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <h1>grid system</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!--부트스트랩 코드-->
</body>
</html>

.container하고 tab 누르면 <div class="container"></div>이렇게 완성

12개의 column으로 구성되었다는 것이 부트스트랩의 기본 개념이다.
12개의 column중에 4개 column씩을 hello가 할당

=>가로 하나가 12개의 column으로 이루어져있는데 각각 4개씩 차지해서 칸을 만들어준다는 개념이다.

-결과

-한 줄 더 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--부트스트랩 코드-->
    <style>
        .b{
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <h1>grid system</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!--부트스트랩 코드-->
</body>
</html>

<div class="container">
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>

첫번째 혹은 두번째로 해도 결과는 똑같이 나온다.

-결과

-앞을 비우고 싶은 경우

<div class="container">
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>

offser-md를 하면 앞에 4개가 비어있는 것이다. 따라서 두번째 세번째만 써주면된다.

-결과

-여백을 없애는 법

<div class="container-fluid">
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>

-결과

-창 사이즈 조절 시

<div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-sm-6 b">hello</div>
            <div class="col-md-3 col-sm-6 b">hello</div>
            <div class="col-md-3 col-sm-12 b">hello</div>
        </div><div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>

전체 화면 결과

가로가 768px보다 작은 경우

768px 미만일 때는 sm으로 넘어가서 12개의 column중 6 6이 첫줄에 나오고 나머지 6이 두번째 줄에 나온다,

가로가 576px보다 작은 경우

576px보다 작아지면 하나씩만 나온다.

KBD

<kbd>hello</kbd>

-결과

사진 넣기

   .container
        .row
            .col-md-4*3

이렇게하면

<div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
        </div>
    </div>

이렇게된다. 단축해서 쓸 수 있다.

-사진

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <img src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img src="상어.jpeg">
            </div>
        </div>
    </div>

사진이 이렇게 겹쳐나온다.

해결책

 <div class="container">
        <div class="row">
            <div class="col-md-4">
                <img class="img-fluid" src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img src="상어.jpeg">
            </div>
        </div>
    </div>

img 태그에 class="img-fluid"를 넣으면 넓이게 따라 움직이라는 것이 된다.

-결과

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <img class="img-fluid rounded" src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img class="img-fluid rounded circle" src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img class="img-fluid img-thumbnail" src="상어.jpeg">
            </div>
        </div>
    </div>

rounded를 추가하면 모서리가 원형이된다.

rounded circle을 하면 타원형이 된다.

img-thumbnail을 하면 액자같이 테두리가 생긴다.

-결과

저작자표시 (새창열림)