[Day 21] Bootstrap

TIL/멋쟁이사자처럼 FE스쿨 2기

[Day 21] Bootstrap

Dahee.jo 2022. 4. 26. 17:38

SMALL

부트스트랩은 없는 게 없는 웹툴킷이다!!

오늘 til는 직접 설명보다는 코드와 구현모습 위주로 정리해보려 한다.

실제 디자인하는 경우가 아니라 빠른 웹페이지 제작이 필요한 경우 이렇게 찾아보거나

유료 템플릿을 구매해서 적재적소에 이용하는 것이 효율적인 방법이라는 것을

오늘 수업을 통해 알 수 있었다!

그리드 시스템

https://getbootstrap.com/docs/5.1/layout/grid/#example

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

getbootstrap.com

부트스트랩은 전체 화면을 12개의 column으로 나눠놓는다.

column 12개가 모여 하나의 row를 생성한다.

다양한 방법으로 활용해서 그리드를 만들 수 있다.

위에 링크한 부트스트랩 공식문서를 참고하면 되겠다-!

이미지

<!DOCTYPE html>
<html lang="ko">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        div {
            box-sizing: border-box;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">hello</div>
            <div class="col-md-4">
                <img src="./이미지.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-md-4">hello</div>
        </div>

        <div class="row">
            <div class="col-md-6">hello</div>
            <div class="col-md-6">
                <img src="./이미지.jpg" alt="" class="img-fluid">
                <img src="./이미지.jpg" alt="" class="img-fluid">
            </div>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>