[1일1코딩][bootstrap] 시범사용2 : 스타터 코드 & 예제 템플릿

꿈꾸는개발자maker 2022. 4. 24. 20:17

728x90

어떻게 나오는지 한번씩 시험삼아 해 본 코드

Hello, world!

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + , This text is meant to be treated as sample output from a computer program. 볼드체 적용? # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter primary secondary success primary secondary ... primary secondary Example heading New ========== Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere This is some text within a card body. | <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1>   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>   To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> <samp>This text is meant to be treated as sample output from a computer program.</samp> <kbd><kbd>볼드체 적용?</kbd></kdb>  <table class="table-primary">primary</table> <table class="table-secondary">secondary</table> <table class="table-success">success</table>  <tr class="table-primary">primary</tr> <tr class="table-secondary">secondary</tr> <tr class="table-success">...</tr>  <tr> <td class="table-primary">primary</td> <td class="table-secondary">secondary</td> </tr> <br><hr><br> <br> <br> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> <h4>Example heading <span class="badge bg-secondary">New</span></h4> <button type="button" class="btn btn-primary position-relative"> Inbox <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> 99+ <span class="visually-hidden">unread messages</span> </span> </button> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group me-2" role="group" aria-label="First group"> <button type="button" class="btn btn-primary">1</button> <button type="button" class="btn btn-primary">2</button> <button type="button" class="btn btn-primary">3</button> <button type="button" class="btn btn-primary">4</button> </div> <h1>==========</h1> <div class="card" style="width: 18rem;"> <img src="WebContent/startbootstrap-sb-admin-2-gh-pages/startbootstrap-sb-admin-2-gh-pages/img/세미 중식1.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <br clear="all"> <div class="card"> <div class="card-body"> This is some text within a card body. </div> </div> <div class="container">|</div> <div class="container"></div> <div class="col"></div> </body> </html> 728x90 반응형 저작자표시 (새창열림)