본문 바로가기
데이터 엔지니어링(DE)/Application과 API

bootstrap

by kiimy 2021. 7. 24.
728x90

부트스트랩은 프론트엔드에 대한 최소한의 지식으로 다양하고 예쁘게 꾸밀 수 있도록 도와주는 도구

참고문서 : https://getbootstrap.com/docs/5.0/components/accordion/

설치

부트스트랩의 장점 중 하나는 설치를 하지 않아도 된다는 점입니다.

HTML 헤더 부분에 자바스크립트와 CSS 링크만 넣어줘도 동작을 합니다.

예를 들어 다음과 같이 HTML 파일에 <head>태그 안에 링크들만 넣어두면 작동을 합니다.

 

<!DOCTYPE html>

<html>

    <head>

     <!-- CSS only -->

      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

      <!-- JavaScript Bundle with Popper -->

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

      </head>

   <body>

         ### 여기에 해당 컴포넌트 

   </body>

</html>

 

<!-- CSS only --> 라고 적힌 부분은 부트스트랩의 스타일만 가지고 올 때에만 사용하게 됩니다.

즉, 모양새만 부트스트랩에서부터 가지고 올 수 있는 링크입니다.

 

만약에 드롭다운 메뉴나 펼쳐지는 메뉴 등 동작이 필요한 컴포넌트가 있어야 한다면 그 아래에 있는

<!-- JavaScript Bundle with Popper --> 링크도 삽입해주시면 됩니다.

컴포넌트 component

부트스트랩에서 사전에 스타일링 등 설정을 거친 상태이기 때문에 HTML 만 복사해서 사용가능

Navbar 네비게이션 바

'Navbar' 라고도 하는 이 컴포넌트는 손쉽게 웹 페이지 제일 상단에 메뉴를 생성

 

다양한 색과 형태를 지원하고 메뉴 버튼들도 드롭다운, 클릭, 활성화 (active), 비활성화 (in-active) 등

다양한 상태와 기능들을 지원

Buttons

(... 생략 ...) <button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

 

CSS 클래스에서 'btn' 과 'btn-' 으로 이어지는 스타일링이 적용

나름 기억하기 쉽고 적절한 색상이 섞여 있으니 폼이나 로그인 등에도 사용

 

728x90

'데이터 엔지니어링(DE) > Application과 API' 카테고리의 다른 글

Jinja template  (0) 2021.07.24
Flask  (0) 2021.07.24
API / HTTP  (0) 2021.07.24

관련글

댓글

티스토리툴바