[장고 입문] 10. 부트스트랩 활용편

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

Introduction

이용방법

1. CDN 이용하기 (네트워크로 건네받아서 사용하는 방식)

2. 다운로드 : 실제 서비스를 할 때는 다운로드방식이 낫다.

CDN방식 : 네트워크상으로 가져오기

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

위 코드를

프로젝트폴더 > 앱폴더 > templates폴더 > home.html의 헤드 태그에 복붙해준다.

다운로드방식 :

네트워크상의 문제가 있을 수 있기에 실제 서비스에 활용할 때는 다운로드 방식이 좋다.

 

부트스트랩을 다운받고, 압축을 푼 뒤 나타난 css, js폴더를

프로젝트폴더 > static 폴더에 복붙해준다.

 

프로젝트 폴더 > 앱 폴더 > 템플릿 폴더 > home.html에서 다음과 같이 수정해주면된다.

이는 단순히 부트스트랩을 사용하겠다는 코드다.

---

부트스트랩을 다운로드 혹은 CDN으로 불러왔다면 이제 부트스트랩를 활용해보자

 

예시) Badge

부트스트랩의 코드는 공통적으로 위와 같은 특징이 있으니 살펴볼 것!

 

위 코드를 body태그안에 그대로 복붙해주자

<span class="badge bg-primary">Primary</span>

출력결과

부트스트랩 레이아웃 활용하기

<div class="container">
  <!-- Content here -->
</div>

위 클래스를 최상위 div태그에 넣어보자.

수정 전 -> 후

부트스트랩 그리드 활용하기

Grid

레이아웃은 12등분한다.

12등분을 기준으로 다음처럼 나눈다.

 

이번에는 Navbar를 활용한다.

하단 코드를

프로젝트폴더 > 앱폴더> templates 폴더 > home.html의 body태그의 최상단에 작성한다.

그래야 페이지 최상위에 표시된다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Navbar 색상을 다음으로 바꾸자

수정 후

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">