bootstrap 사용법

Posted on 2021-08-25 by GKSRUDTN99
Django로 웹사이트 만들기 장고

BootStrap 다운로드

BootStrap 버전 선택

https://getbootstrap.com/
위 링크에 접속하여 우측 상단에서 버튼을 선택한다.
버전을 선택한 뒤, 다시 우측 상단의 Download 버튼을 클릭한다.

CSS 다운로드

Compiled CSS and JS 아래에 있는 Download를 클릭한다.
다운로드 받은 파일에서 bootstrap.min.css와 bootstrap.min.css.map파일을 원하는 디렉토리로 옮긴다.
html 내에 link태그를 이용해 다음과 같이 작성한다.

# css 파일을 bootstrap4/css/에 옮겼다는 상황 하에

<link href="./bootstrap4/css/bootstrap.min.css" rel="stylesheet" type="text/css">

자바스크립트 코드 추가하기

위에서 버전을 선택 한 뒤 CDN via jsDelivr 항목을 찾는다.
아래 쪽에 있는 Copy 버튼을 클릭한 뒤, </body> 태그 바로 위에 붙여넣는다.

...

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
...

BootStrap 사용하기

내비게이션 바 수정하기

부트스트랩 사이트에서 Documentation > Components에서 내비게이션 바 요소를 선택한다. 원하는 디자인을 선택해 코드를 copy 한 뒤, 붙여넣는다. 원하는 용도에 맞게 코드를 수정한다. 예시 코드

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="./index.html">Do It Django</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="./index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="./blog_list.html">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="./about_me.html">About me</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

container로 레이아웃 적용하기

<div>태그로 감싸고 class로 container를 추가해주면, 양쪽에 여백이 생기며 레이아웃을 적용할 수 있다.

grid로 웹 페이지 구성 관리하기

grid 기능을 활용하면 웹 페이지를 세로 12칸으로 나누어 관리할 수 있다.
1줄로 관리하고 싶은 내용들을 <div class="row">태그로 감싼다.
이미지를 오른쪽에서 세번째 행으로 옮기고 나머지를 왼쪽에 배치하고 싶다면,
처음 내용들을 <div class="col-9"> 태그로 감싸고,
이미지를 <div class="col-3"> 태그로 감싼다.
예시코드

<div class="container">
    <div class="row">
        <div class="col-9">
            <h1>About Me</h1>
            <h2>개발자 한경수입니다.</h2>
            <p>HTML, CSS, JS, Django로 웹 만드는 것을 좋아합니다.</p>
            <button onclick="whatTimeIsIt()">현재시간</button>
            <hr/>

            <a href="index.html">첫 화면으로 가기</a>
        </div>
        <div class="col-3">
            <img src="./images/boy_01.jpg" height="300px">
        </div>
    </div>
</div>

col-12를 이용하면 한 줄을 해당 내용으로 채울 수 있다.
col-sm, col-lg-6은 브라우저의 화면 크기에 따라 레이아웃을 다르게 할 수 있게 한다.
m 키워드를 이용해 마진(내용 바깥으로 여백을 두는 것)을 줄 수 있다.

mt : 위쪽에 여백을 준다.
mb : 아래쪽에 여백을 준다.
my : 위아래 모두에 여백을 준다.

네비게이션 바 오른쪽 정렬하기

spacing을 이용하면 요소들을 정렬할 수 있다. ms-auto : 왼쪽 마진을 최대한 확보해라.
me-auto : 오른쪽 마진을 최대한 확보해라. 아래 예시는 login 버튼에 ms-auto를 적용하여 login 버튼만 오른쪽 정렬시킨 네비게이션이다.

<ul class="navbar-nav ms-auto">
    <li class="nav-item">
        <a class="nav-link" href="#">Log In</a>
    </li>
</ul>

Search