Search

Bootstrap ์‹œ์ž‘ํ•˜๊ธฐ

Bootstrap ์‹œ์ž‘ํ•˜๊ธฐ

โ€ข
CDN ์œผ๋กœ ์ ์šฉํ•˜๊ธฐ
โ€ข
ํŒŒ์ผ๋กœ ์ ์šฉํ•˜๊ธฐ

CDN ์œผ๋กœ ์ ์šฉํ•˜๊ธฐ

โ€ข
CSS ํฌํ•จํ•˜๊ธฐ
โ€ข
JS ํฌํ•จํ•˜๊ธฐ

CSS ํฌํ•จํ•˜๊ธฐ

head ํƒœ๊ทธ ์•ˆ์— bootstrap css ํŒŒ์ผ์„ CDN ๋ฐฉ์‹์œผ๋กœ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
HTML
๋ณต์‚ฌ

JS ํฌํ•จํ•˜๊ธฐ

์ผ๋ฐ˜์ ์œผ๋กœ, body ํƒœ๊ทธ ๋‚ด๋ถ€์˜ ๋งจ ๋งˆ์ง€๋ง‰์— JS ํŒŒ์ผ์„ CDN ๋ฐฉ์‹์œผ๋กœ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
HTML
๋ณต์‚ฌ

์ƒ˜ํ”Œ ์ค€๋น„ ์ฝ”๋“œ

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‹œ์ž‘ํ•˜๊ธฐ</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
HTML
๋ณต์‚ฌ

ํŒŒ์ผ๋กœ ์ ์šฉํ•˜๊ธฐ

bootstrap ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•„ ํ”„๋กœ์ ํŠธ ๋‚ด๋ถ€์— ์ €์žฅํ•˜๊ณ  CSS ๋ฐ JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํŒŒ์ผ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
1.
๋‹ค์šด๋กœ๋“œ
2.
ํ”„๋กœ์ ํŠธ์— ํŒŒ์ผ ์ €์žฅํ•˜๊ธฐ
3.
link, script ํƒœ๊ทธ๋กœ ํŒŒ์ผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

๋‹ค์šด๋กœ๋“œ

Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
https://getbootstrap.com/docs/5.3/getting-started/download/

ํ”„๋กœ์ ํŠธ์— ํŒŒ์ผ ์ €์žฅํ•˜๊ธฐ

๐Ÿ“ฆ Project โ”ฃ ๐Ÿ“ static โ”ƒ โ”ฃ ๐Ÿ“ css โ”ƒ โ”ƒ โ”— ๐Ÿ“„ bootstrap.min.css โ”ƒ โ”— ๐Ÿ“ js โ”ƒ โ”— ๐Ÿ“„ bootstrap.bundle.min.js
HTML
๋ณต์‚ฌ

link, script ํƒœ๊ทธ๋กœ ํŒŒ์ผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

<link href="/static/css/bootstrap.min.css" rel="stylesheet">
HTML
๋ณต์‚ฌ
<script src="/static/js/bootstrap.bundle.min.js"></script>
HTML
๋ณต์‚ฌ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‹œ์ž‘ํ•˜๊ธฐ</title> <!-- ๋ถ€ํŠธ์ŠคํŠธ๋žฉ CSS ํŒŒ์ผ --> <link href="static/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- ์—ฌ๊ธฐ์— ๋‚ด์šฉ ์ถ”๊ฐ€ --> <!-- ๋ถ€ํŠธ์ŠคํŠธ๋žฉ JavaScript ํŒŒ์ผ --> <script src="static/js/bootstrap.min.js"></script> </body> </html>
HTML
๋ณต์‚ฌ

์ƒ˜ํ”Œ ํŽ˜์ด์ง€

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์ƒ˜ํ”Œ ํŽ˜์ด์ง€</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- ํ—ค๋” ์„น์…˜ --> <div class="container"> <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg> <span class="fs-4">ALOHA CLASS</span> </a> <ul class="nav nav-pills"> <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">Features</a></li> <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> </ul> </header> </div> <!-- Heroes ์„น์…˜ --> <section class="bg-light py-5"> <div class="px-4 py-5 my-5 text-center"> <img class="d-block mx-auto mb-4" src="https://placehold.co/100x100" alt="" width="100" height="100"> <h1 class="display-5 fw-bold">ALOHA CLASS</h1> <div class="col-lg-6 mx-auto"> <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the worldโ€™s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button> <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> </div> </div> </div> </section> <!-- Card View ์„น์…˜ --> <section class="py-5"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="card mb-4"> <img src="https://placehold.co/300x300" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">์นด๋“œ ์ œ๋ชฉ</h5> <p class="card-text">์นด๋“œ ๋‚ด์šฉ Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, totam.</p> <a href="#" class="btn btn-primary">์ž์„ธํžˆ ๋ณด๊ธฐ</a> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4"> <img src="https://placehold.co/300x300" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">์นด๋“œ ์ œ๋ชฉ</h5> <p class="card-text">์นด๋“œ ๋‚ด์šฉ Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, totam.</p> <a href="#" class="btn btn-primary">์ž์„ธํžˆ ๋ณด๊ธฐ</a> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4"> <img src="https://placehold.co/300x300" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">์นด๋“œ ์ œ๋ชฉ</h5> <p class="card-text">์นด๋“œ ๋‚ด์šฉ Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, totam.</p> <a href="#" class="btn btn-primary">์ž์„ธํžˆ ๋ณด๊ธฐ</a> </div> </div> </div> </div> </div> </section> <!-- Footer ์„น์…˜ --> <footer class="bg-dark py-3"> <div class="container"> <div class="text-center text-light"> &copy; 2024 ALOHA CLASS </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
HTML
๋ณต์‚ฌ