새벽코딩

[JavaScript기초] 5. 부트스트랩 사용하는법(bootstrap) 본문

Programming/JavaScript

[JavaScript기초] 5. 부트스트랩 사용하는법(bootstrap)

midnightcoder 2023. 2. 6. 06:54

부트스트랩은, 기존에 만들어 놓은 Navbar, tabs, Modal등을 가져와서 구현을 할 수 있는 플랫폼이다.

 

사용법

1. 구글에 bootstrap을 검색하여, 아래 링크로 들어간다.

 

2. Bootstrap 웹페이지로 들어가서 상단 네브바에서 Docs로 들어간다 (상단 오른쪽 버전확인 v5.x )

2023년 2월 5일 기준 화면 (화면 구성이 바뀌기도 한다)

3. 위와 같이 Get started with Bootstrap 이라는 화면이 보이게 되는데, Quick start 순서대로 하면된다.

먼저 index.html을 만들고 아래 코드를 넣어준다 (vs code에서 느낌표+tab을 누르면 자동생성)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

4. 그리고 <head> tag 부분과 <body> tag 부분에 아래와 같이 <link> tag와 <script> tag를 추가해주면,

bootstrap 사용 준비 끝

 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <!-- 아래 코드 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- 아래 코드 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

 

이제, 추가하고 싶은 요소를 찾아서 코드를 붙여 넣어주면 구현 가능하다.

* Navbar를 추가하고 싶다면, 아래와 같이 Search에서 검색을 해보자

맨위에 Nav를 누르게되면, 여러가지 Nav 샘플이 나온다.

아래와 같은 모양의 Nav를 구현하고 싶다면, 코드를 복사해서, 붙여넣으면 끝

 

전체 코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <!-- 아래 코드 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <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="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    <!-- 아래 코드 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

미리보기화면

위와 같이 예쁜 Navbar가 상단에 나타나게된다.

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript기초] 7. jQuery 사용법  (0) 2023.02.06
[JavaScript기초] 6. classList 다루기 (서브메뉴 숨기기)  (0) 2023.02.06
[JavaScript기초] 4. 셀렉터와 이벤트리스너(with 콜백함수)  (2) 2023.02.06
[JavaScript기초] 3. 함수2 (with 매개변수)  (0) 2023.02.05
[JavaScript기초] 2. 동적 UI 만들기 with 함수란?  (0) 2023.02.05
'Programming/JavaScript' Related Articles more