Boot strap을 사용하기 전에는 Boot strap css 를 <head> 사이에 Import 해야한다.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm
"crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
// JavaScript를 Import 하는 이유는 boot strap에 들어가 있는 효과들을 불러오기 위해서이다.
<title>Boot Strap 사용하기</title>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
</body>
부트 스트랩을 사용하기 위한 링크는 아래와 같다.
url : https://getbootstrap.com/docs/4.0/components/alerts/
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.com
Boot strap은 사용자의 편의성을 위하여 프로그래머들이 다양한 기능들을 코딩해서 모아놓은 사전과 같다.
왼쪽 목록에서 필요로 하는 콘텐츠를 찾고 코드를 복사 붙여넣기 하면 된다.
파란색 primary라는 박스의 코드를 복사하여 실행해보겠다.
이렇게 귀여운 네모 박스를 출력하게 된다.
'Coding' 카테고리의 다른 글
| [HTML, CSS] 종합 메모장 만들기 (feat, a href) (0) | 2021.09.03 |
|---|---|
| [CSS] 페이지 꾸미기 (feat. 부트스트랩) (0) | 2021.09.02 |
| [FONT] 구글 웹 폰트 적용 (0) | 2021.09.02 |
| [CSS] 이미지 불러오기, 이미지 편집 (feat. 로그인 페이지) (0) | 2021.08.31 |
| [CSS] class 사용법, 글자 색상 변경 (feat. 로그인 페이지) (0) | 2021.08.31 |
