Vscodeガイド.badge

24890 ワード
vscode テキストリンク
badge
バッジタグを使用して、リストまたはメニューバーに様々な効果を表すタグを貼り付けることができます.
バッジはbadgebgで宣言できます.
<body>
<div class="container">
<h1> 배지 </h1>

<h4>배지 사용 </h4>
 <table class="table">
  <thead>
   <tr>
     <th>번 호 </th>
     <th>제 목</th>
     <th>글쓴이</th>
   </tr>
   </thead>
   <tr>
     <td>1</td>
     <td>테이블 테스트  테이블 테스트 테이블 테스트  <span class="badge bg-secondary"> New </span></td>
     <td>홍길동</td>
   </tr>
   <tr>
     <td>2</td>
     <td>테이블 테스트  테이블 테스트 테이블 테스트 <span class="badge bg-danger"> 중요 </span></td>
     <td>임꺽정 </td>
   </tr>
   <tr>
     <td>3</td>
     <td>테이블 테스트  테이블 테스트 테이블 테스트 <span class="badge bg-info"> 정보 </span></td>
     <td>성춘향 </td>
   </tr>
 </table>
  <hr>

このようにtdタグではspan class=「badgebg-~~」
宣言されると、secondary、risk、infoなどのプロパティが受信され、適用されます.
badge bg-
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>

バッジとして宣言できるタグの属性は次のとおりです.
badge rounded-pill bg-
<h4> 알약 배지 </h4>

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

badge bourn-pill bg-~~を使う
錠剤の形をしたバッジも使えます.
span class="badge bg-~~~ 
<h4> 네비게이션 & 배지 </h4>
<div class="col-md-2">
   <ul class="nav nav-pills flex-column">
       <li class="nav-item"><a class="nav-link active" href="#">  메세지 <span class="badge bg-light float-right mt-1">4</span></a></li>
       <li class="nav-item"><a class="nav-link" href="#">친구</a></li>
       <li class="nav-item"><a class="nav-link" href="#">알림 <span class="badge bg-danger float-right mt-1">11</span></a></li>
   </ul>
</div>

span class=「badgebg-~~~」ナビゲータのリストラベルに挿入します.
上記のメッセージまたは通知を表示できます.
難しくないでしょう.
早く慣れなさい.
命名規則
ぶんかつ