Bootstrap - 개요 & 프로젝트 생성

일상 코딩·2022년 4월 12일

BootStrap

목록 보기
1/9
post-thumbnail

01.Bootstrap 이란?

  • 프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임워크
  • 재사용 가능한 요소의 집합, 구조와 툴 결정, 확장 가능한 기반 코드 등
  • HTML, CSS 기반의 템플릿 양식, 버튼, 네비게이션 및 기타 페이지를 구성하는 요소 포함
  • 자바스크립트를 선택적으로 확장 할 수 있음
  • Github의 오픈 소스로 사용 가능. 상업적 이용 가능

02.CDN 프로젝트 생성

  • BootStrap 공식 홒페이지 바로가기
  • 위의 주소로 들어가서 Get Started 클릭하여 CSS와 Bundle 링크 태그 소스를 복사합니다.
  • 복사한 해당 링크 태그를 index.html에 명시해준다면 Bootstrap 연결이 완료됩니다.

2-1.CSS, Bundle 링크 태그 복사

CSS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Bundle

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

2-2.Bootstrap 연결 확인

  • 연결이 원활히 완료되었는지를 확인하기 위해 Bootstrap에서 제공하는 Components의 dropdown 버튼을 만들어봅니다.
  • html 파일에 아래 dropdown 버튼의 코딩 내용을 복사 붙여넣기 해줍니다.

Single button

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>
</div>

index.html 전체 소스 코드 & 버튼 결과

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <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>
  </div>
</body>
</html>
profile
일상 코딩
일취월장(日就月將) - 「날마다 달마다 성장하고 발전한다.」
다음 포스트

Bootstrap - 버튼 & 버튼 그룹

0개의 댓글