PINKYETI

[BootStrap] 부트스트랩 템플릿 활용 및 HTML 연동 (+Navigation Bar) 본문

# Dev Note/[Frontend]

[BootStrap] 부트스트랩 템플릿 활용 및 HTML 연동 (+Navigation Bar)

PINKYETI 2022. 4. 20. 23:06

 

안녕하세요. 핑크예티입니다.

오늘은 Front-end 를 처음 접하시는 분들께

활용하기 유용한 라이브러리인 "BootStrap" 을 소개하려 합니다.

 

부트스트랩은 간단히 말씀드리면, Front-end 개발에 유용한

CSS class 및 JavaScript 함수들을 내장해놓은 라이브러리 입니다.

따라서, 이 라이브러리를 HTML에 연동하여 Style을 

처음부터 구현하지 않고 import 하여 가져다 쓸 수 있는데요.

어떻게 사용하는지 알아보도록 하겠습니다.

 

 

 

1. BootStrap 다운로드

먼저 부트스트랩을 사용하기 위해서는 다운로드를 받아줍니다.

아래 링크 통해 다운로드를 진행해주세요.

(사이트 내에 부트스트랩 Example 도 있으니 참고하세요.)

https://getbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

 

다운로드를 받으신 후, 압축을 풀면 다음과 같은 항목이 보이실거에요.

 - css 폴더 : CSS Class(Style) 를 모아둔 폴더

 - js 폴더 : JavaScript 함수를 모아둔 폴더 

 

이제 다운받으신 부트스트랩 라이브러리를 프로젝트 위치에 옮겨주도록 하겠습니다.

(포스팅용으로 간단하게 만든 프로젝트이니, 구조는 참고만 해주세요.)

 - bootstrap 이라는 프로젝트 안에, 부트스트랩 라이브러리 & index.html 파일이 있습니다.

 

 

 

2. 부트스트랩 ↔ HTML 연동

부트스트랩 연동은 간단한데요.

HTML의 link 태그를 이용하여 연동해주시면 됩니다.

href 속성안에 사용할 부트스트랩 파일의 경로를 작성해주시면 됩니다.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- HTML link 태그를 활용한 BootStrap 연동 -->
    <link href="./bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
</html>

head 부분에 넣어주는 이유는, HTML은 DOM(Document Object Model) 구조로

최상위 줄부터 하나씩 불러오는 방식이기 때문인데요,

웹 페이지의 style을 담당하는 부분을 HTML 문서 하단에 불러온다면..

로딩되는 동안 스타일이 깨져보이겠죠?

 

 

 

3. 부트스트랩 템플릿 활용하기 (Navigation Bar)

앞서 소개드린 부트스트랩 홈페이지의 Example을 활용하여

네비게이션 바 샘플을 만들어 보도록 하겠습니다.

header 태그 안에 선언된 부분이 부트스트랩 샘플을 그대로

복사해온 내용인데요, 아래 코드와 예시 참고하셔서

즐거운 Front-end 개발하시길 바라겠습니다.

 

- BootStrap Navigation Bar 전체 코드

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <!-- HTML link 태그를 활용한 BootStrap 연동 -->
    <link href="./bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<!-- BootStrap Navigation Bar Sample -->
<header class="p-3 bg-dark text-white">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
          <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
          <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
          <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
          <li><a href="#" class="nav-link px-2 text-white">About</a></li>
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
          <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
        </form>

        <div class="text-end">
          <button type="button" class="btn btn-outline-light me-2">Login</button>
          <button type="button" class="btn btn-warning">Sign-up</button>
        </div>
      </div>
    </div>
</header>

</html>

 

- BootStrap Navigation Bar 예시

 

 

 

 

'# Dev Note > [Frontend]' 카테고리의 다른 글

[React] react-router-dom 사용하여 컴포넌트 렌더링하기 (Route/Link Component)  (0) 2024.01.24
[React] Component 라이브러리 활용하여 반응형 메뉴바(NavBar) 만들기 (Ant-Design)  (0) 2023.09.08
[React] 컴포넌트로 CSS Style 적용하기 (styled-components)  (0) 2023.09.08
[React] 개발 환경 세팅 - Project 생성 및 구동하기 (+VSCode)  (0) 2023.08.23
[JavaScript] 반응형 웹 페이지 슬라이드 2단 메뉴바 만들기 (+HTML/CSS, 드롭다운 x)  (0) 2022.04.22
'# Dev Note/[Frontend]' Related Articles more