21. [Bootstrap] Bootstrap 개요

이번 포스팅에서는 프론트엔드 '컴포넌트' 라이브러리인 Bootstrap 에 대해서 알아보겠습니다. 

▷ 컴포넌트 라이브러리 : 필요한 웹 UI / 기능을 복붙식으로 사용 가능

 

Bootstrap의 장점  1. 반응형 웹 개발이 쉬워진다. ▶ grid 를 사용하면 쉬운 레이아웃을 제작 가능 2. 빠른 퍼블리싱이 가능하다. ▶ 미리 제작된 클래스명을 가지고 스타일링이 가능

 

설치 방법 (CDN 방법 - Content Delivery Network, 안정성이 떨어진다) 

1. 아래 주어진 URL에 접속하여 get start 에 접속한다. 

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

Introduction

 

2. Starter Template 를 복사하여 HTML 문서에 붙여넣기 한다. 

 

3. HELLO WORLD 가 뜨면 설치 끝

4. 필요한거 Components 에 들어가서 복붙하면 됨

 

 

 

 

Bootstrap을 설치하면 사용할 수 있는 클래스명

1. margin 을 클래스명으로 줄 수 있다. 1부터 5까지 가능.  

다음의 나열된 것들을 추측해보자. 

ex) mt-5, mb-4, ml-3, mr-2, m-1

mt-5 : margin-top을 5만큼 준다. 

mb-4 : margin-bottom을 4만큼 준다. 

ml-3 : margin-left를 3만큼 준다. 

mr-2 : margin-right를 2만큼 준다. 

m-1 : margin을 1만큼 준다. 

 

2. padding 을 클래스명으로 줄 수 있다. 1부터 5까지 가능. 

1번에서 제시했던 margin을 클래스명으로 조정하는 것과 동일하다. 

 

 

예시

<form class='p-5'>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

 

padding이 상우하좌로 5만큼 되어 있는 것을 확인 할 수 있다. 

 

 

3. <div class='container'> </div> 

: container 명을 가진 클래스를 부여하면 내부 여백이 생긴다. 

 

container 주기 이전에는 여백이 전혀 존재하지 않는 것을 확인 할 수 있다. 

<!--jumbotron part-->
    <div class="jumbotron">
<!--       <div class='container'>-->
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
<!--        </div>-->
    </div>

 

 

 

container를 준 이후에는 내부 여백이 존재하는 것을 확인 할 수 있다. 

 

<!--jumbotron part-->
    <div class="jumbotron">
       <div class='container'>
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </div>
    </div>