궁금한게 많은 코린이의 Developer 노트

[자바스크립트기초] Bootstrap 사용해보기 본문

Javascript

[자바스크립트기초] Bootstrap 사용해보기

lemonarr🍋 2023. 10. 7. 18:01

 

 

Bootstrap의 장점은

UI를 쉽게 만들어볼 수 있다는 점!

 

사용해보니...신세계다.

맨날 직접 Css 코드를 입력해주었는데 
코드 한 줄 이면 내가 원하는 UI를 사용할 수 있다니..!

 

https://getbootstrap.com/docs/5.3/getting-started/introduction/#html5-doctype

 

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

 

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

이 한줄이면 버튼 스타일이 끝! ㅎㅎ 너무 간편한 것♥

 

 

부트스트랩에서 제공해주는 기본 베이스 코드입니다.

(복붙하시면 바로 사용해보실 수 있습니다.)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <!-- Css 링크 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>안녕하세요 min:> 입니다~</h1>
    <h2>여기에 내용을 적어주세요.</h2>
    
    <!-- Javascript 링크 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

 

홈페이지에서도 제공을 하고 있는 코드이고,

원하시는 UI를 검색하셔서 사용하시면 됩니다 :)

'Javascript' 카테고리의 다른 글

[javascript] 문자 검사하는 쉬운 방법  (0) 2023.10.11
[자바스크립트 기초] Class 탈 부착하기 + getElementByClassName/querySelector 사용  (1) 2023.10.07
[자바스크립트 기초] 동적 UI 버튼 만들기  (0) 2023.10.07
import/export 문법  (0) 2023.10.03
구조 분해 할당 Destructuring  (0) 2023.10.02
'Javascript' Related Articles more