0713 bootstrap

CDN(Content Delivery Network)을 이용해서 bootstrap 사용

 

구글에 bootstrap 검색 → 오른쪽 상단 Download 클릭 → 마우스 드래그 ↓ → CDN via jsDelivr

 

webstorm으로 돌아와서 프로젝트 파일에 html 만드세요~! (저 같은 경우 이름은 bootstrap)

 

<title>과 </head> 안에 붙여 넣기!!

 

<title>

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

 

</head>

 

 

 

<input type="button">                                 가장 흔하게 쓰이는 사용자 입력 양식

<input type="button" value="클릭해주세요!!">  이렇게 하면 버튼에 이름이 생겨요!

<button>클릭해주세요!!</button>                  이걸 많이 써요!!

 

 

 

 

홈페이지 상단 메뉴→ doc → components → Buttons

→ 예제 코드가 있어요!

 

<button type="button" class="btn btn-primary">버튼</button>

 

<button type="button" class="btn btn-outline-primary">버튼</button>

 

첫 번째 btn은 버튼 스타일을 포괄적으로 지정해주기 위해 사용하는 class, 두 번째 btn은 세부적은 버튼 스타일을 지정해주기 위해 사용하는 class.