부트스트랩이란?
유명한 css프레임워크이며 그럴듯한 웹사이트들을 빠르게 만들 수 있도록 도와줍니다.
사용자가 웹 페이지를 편리하게 만들수 있도록 도와줍니다
(간단하게 css의 뼈대라고 생각하면 편합니다)
사용방법(css)
css를 부르듯이 아래의 코드를 연결 해주시면 됩니다.
(링크 태그를 사용해 접근할 수 있게 해주시면 됩니다.)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
구성 요소(componets)
대부분이 클래스 속성을 통해 사용됩니다.
예시) 배지 버튼 사용하기
위와 같은 배지 버튼을 사용하기 위해 위의 코드를 그대로 추가 해주시면 됩니다.
<!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.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
<p>Lorem ipsum dolor sit amet consectetur adipis
icing elit. Veniam explicabo, unde, id illum, fugiat sequi
asperiores eos fugit qui libero nisi doloremque error omnis dolores
quisquam rerum nulla accusamus suscipit.
</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
</body>
</html>
(이처럼 쉽게 버튼형식을 추가 할수 있습니다.)
추가로 지금까지 배운것을 이용하여 색상도 넣고 테두리도 둥글게 할 수 있습니다.
<button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-secondary rounded-pill bg-danger" >4</span>
</button>
button을 위처럼 바꾸게 되면 알림이 온것처럼 할수 있습니다.
이용사이트
https://icons.getbootstrap.com/
Bootstrap Icons
Official open source SVG icon library for Bootstrap
icons.getbootstrap.com
'WEB > Bootstrap' 카테고리의 다른 글
| Form-controls (0) | 2023.01.17 |
|---|---|
| 그리드 시스템 (0) | 2023.01.15 |
