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 | ||
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>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<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>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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>
<!-- On tables -->
<table class="table-primary">primary</table>
<table class="table-secondary">secondary</table>
<table class="table-success">success</table>
<!-- On rows -->
<tr class="table-primary">primary</tr>
<tr class="table-secondary">secondary</tr>
<tr class="table-success">...</tr>
<!-- On cells (`td` or `th`) -->
<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
반응형
'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글
| [1일1코딩][bootstrap] 템플릿 적용 + css 적용 (0) | 2022.04.26 |
|---|---|
| [1일1코딩][bootstrap] 템플릿 적용 및 커스텀 해보기 (0) | 2022.04.25 |
| [1일1코딩][JS] 배열(Array) & 배열의 메소드 (0) | 2022.04.23 |
| [1일1코딩][bootstrap] 시범사용 & 연결 (0) | 2022.04.22 |
| [1일1코딩][HTML,CSS,JS] 로그인 만들어보기1 (0) | 2022.04.21 |