-
사전준비
html파일에 미리 만들어둔 module들 처럼 CSS와 JS를 적용시켜두고 필요한 것을 사용하면 된다.
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">JS적용
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>적용 예제
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Test</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> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> </body> </html>예제 찾아 적용
https://getbootstrap.com/docs/5.3/components/navbar/#how-it-works
사이트에서 필요한 예제코드를 가져와 적용
'Html Css JavaScript' 카테고리의 다른 글
window beforeunload event (0) 2023.01.23 window DOMContentLoaded event (0) 2023.01.23 window load event (0) 2023.01.23 jQuery 설치 (0) 2023.01.23 html layout ex1 (float 적용) (0) 2023.01.22 Promise Ex 결과(reject,resolve) 순서 (0) 2023.01.22 Promise Ex 결과(resolve, reject)와 return값 (0) 2023.01.22 Promise Ex 결과(resolve, reject) 없을 경우 (0) 2023.01.22