올 뉴 30분 요약강좌(Bootstrap) 정리
유투브에서 부트스트랩 요약강좌를 짧게 들어보고 요점을 기록한 글입니다.
유투브 url: https://www.youtube.com/watch?v=2znzBerWyWU
부트스트랩 문서(영문이어야함, 한글은 3버전 대...임..ㅠㅠㅎ)
https://getbootstrap.com/docs/5.2/getting-started/introduction/
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
대부분 문서에 아주 정리가 잘 되어있다.
**alert 샘플 많은 사이트
https://sweetalert2.github.io/
SweetAlert2
A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
sweetalert2.github.io
**editor 사이트
https://ui.toast.com/tui-editor
TOAST UI :: Make Your Web Delicious!
TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.
ui.toast.com
https://summernote.org/getting-started/#installation
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
**Font (픽토그램, 이미지 등이 진짜 이미지가 아니고 폰트다..)
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
- 부트 스트랩 기본 코드
<!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>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
hello world
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
- 12가 기준임
<!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.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.b{
border: solid 1px black;
}
</style>
</head>
<body>
<h1>grid system</h1>
<div class="container-fluid"> <!--fluid: 여백 없애기-->
<div class="row">
<div class="col-md-6 col-sm-6 b">hello</div>
<div class="col-md-3 col-sm-6 b">hello</div>
<div class="col-md-3 col-sm-12 b">hello</div>
</div>
<div class="row">
<div class="col-md-4 b">hello</div>
<div class="col-md-4 b">hello</div>
<div class="col-md-4 b">hello</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-4 b">hello</div> <!--offset:4만큼없애기-->
<div class="col-md-4 b">hello</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>grid system
- <kbd>코드가 짱 이쁘다!!!! 많이 쓸 것 같다!
<!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.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!--class-"h1" 쓰지 않습니다.-->
<h1 class="h1">hello world</h1>
<h1 class="display-1">hello world</h1>
<kbd> ctrl+k</kbd>
</body>
</html>hello world
hello world
ctrl+k
이미지 기본 코드
<!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>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<style>
.b {
border: solid 1px black;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!--fluid:이미지 크기게 맞게 자동조절-->
<img class="img-fluid" src="jeju.jpg" alt="" />
</div>
<div class="col-md-4">
<!-- rounded-circle:이미지 동그라미-->
<img class="img-fluid rounded-circle" src="jeju.jpg" alt="" />
</div>
<div class="col-md-4">
<!--img-thumbnail:액자-->
<img class="img-fluid img-thumbnail" src="jeju.jpg" alt="" />
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>