Bootstrap?
웹 사이트를 쉽게 만들어주는 공개 HTML, CSS, JS 프레임워크
- 프레임워크: 어떤 프로그램을 만들기 위한 기본틀
- 이미 틀이 있어서, 더 효율적!
- 그러나 내가 직접 커스터마이징 하는 것은 쉽지 않다.
- 직접 설치할 수도 있지만, cdn을 이용해서 사용할 수 있어서 편리하다.
- cdn: content delivery network<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> </body> </html>
- docs를 잘 읽어보면서 직접 적용해보도록 하자!
https://getbootstrap.com/
+)
• Bootstrap Icon: https://icons.getbootstrap.com/
• FontAwesome: https://fontawesome.com/
• Google Icon Fonts: https://fonts.google.com/icons
• Bootstrap Theme: https://themes.getbootstrap.com/
반응형
: 웹사이트 화면의 크기에 따라 사이트를 반응하도록 만드는 것!
부트스트랩은 12열 그리드로 이미 배치해놓았기 때문에 반응형 사이트를 매우 간단하게 만들 수 있다.
Grid
<div class="row">
<div class="col-8 col-md-4 col-lg-10 bg-warning">div1</div>
<div class="col-4 col-md-8 col-lg-2 bg-success">div2</div>
</div>
📝