영벨롭 개발 일지

[Bootstrap]부트스트랩 bootstrap 시작하기 본문

Front-end/Bootstrap

[Bootstrap]부트스트랩 bootstrap 시작하기

영벨롭 2022. 5. 12. 19:42

[ Bootstrap 이란? ]

 

 부트스트랩(bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크입니다. 

 

 사용자들이 자주 사용하는 각종 버튼, 드롭다운 메뉴, 탭, 라벨, 상태 바 등 다양한 기능을 제공하여 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와줍니다. 

 

https://getbootstrap.com/

 

Bootstrap

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

getbootstrap.com

 

 

 

 

[ Bootstrap 활용하기 ]

 

 Bootstrap을 프로젝트에서 활용할 수 있는 방식은 두 가지가 있습니다.

 

 

1. Bootstrap 관련 코드를 직접 다운 받아 설치하기 (권장)

 

 bootstrap 공식 사이트로 이동하여 관련 코드를 Download 받습니다. 

 

 

 다운로드 받은 폴더를 압축 해제 후 프로젝트로 이동시켜준 뒤, 연결해주면 끝!

 

<!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">

  <!-- Bootstrap ! -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <script src="./js/bootstrap.min.js"></script>

  <title>Document</title>
</head>
<body>
  
</body>
</html>

 

 

 

 

2. CDN 이용하기

 

bootstrap 공식 사이트의 Docs 탭으로 이동합니다.

 

CSS, JS의 CDN 코드 복사 붙여넣기 하면 끝!

 

<!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">

  <!-- Bootstrap ! -->
  <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>

  <title>Document</title>
</head>
<body>
  
</body>
</html>

 

 

 

 

 

[ EXAMPLE ]

 

 

<!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">

  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <script defer src="./js/bootstrap.min.js"></script>
  <title>Document</title>
</head>

<body>
  <h1>Bootstrap 예제</h1>

  <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>
</body>

</html>

 

반응형
저작자표시 비영리 변경금지