wiki:bootstrap:bootstrap_note:bs_list_groups

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:bootstrap:bootstrap_note:bs_list_groups [2021/03/26 10:10]
emblim98
+++ wiki:bootstrap:bootstrap_note:bs_list_groups [2023/01/13 18:44] (현재)
@@ 줄 112: / 줄 112: @@
 =====Contextual Classes=====
 콘텍스추얼 클래스를 사용하여 목록 항목의 색상을 지정할 수 있습니다.\\
+{{:wiki:bootstrap:bootstrap_note:contextual-classes.png?600|}}\\
 목록 항목의 색상을 지정하는 클래스는 다음과 같습니다:''%%.list-group-item-success%%'', ''%%.list-group-item-info%%'', ''%%list-group-item-warning%%'', ''%%.list-group-item-danger%%'':\\
+====예제====
+<HTML>
+<body>
+<div class="container">
+   <h2>List Group With Contextual Classes</h2>
+   <ul class="list-group">
+     <li class="list-group-item list-group-item-success">일은 배신하지 않는다</li>
+     <li class="list-group-item list-group-item-info">IT 좀 아는 사람</li>
+     <li class="list-group-item list-group-item-warning">Do it! 점프 투 파이썬</li>
+     <li class="list-group-item list-group-item-danger">혼자 공부하는 파이썬</li>
+   </ul>
+   <h2>Linked Items With Contextual Classes</h2>
+   <p>Move the mouse over the linked items to see the hover effect:</p>
+   <div class="list-group">
+     <a href="#" class="list-group-item list-group-item-success">혼자 공부하는 머신러닝 + 딥러닝</a>
+     <a href="#" class="list-group-item list-group-item-info">직장인을 위한 실무 엑셀</a>
+     <a href="#" class="list-group-item list-group-item-warning">드로잉 오답노트</a>
+     <a href="#" class="list-group-item list-group-item-danger">비전공자를 위한 IT 지식</a>
+   </div>
+</div>
+</body>
+</HTML>
+\\
+=====Custom Content=====
+목록 그룹 항목 내에 거의 모든 %%HTML%%을 추가 할 수 있습니다.\\
+\\
+Bootstrap은 다음과 같이 사용할 수 있는 ''%%.list-group-item-heading%%'' 및 ''%%.list-group-item-text%%'' 클래스를 제공합니다.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>List Group With Custom Content</h2>
+        <div class="list-group">
+            <a href="#" class="list-group-item active">
+                <h4 class="list-group-item-heading">결정판 아르센 뤼팽 전집 1</h4>
+                <p class="list-group-item-text">모리스 르블랑</p>
+            </a>
+            <a href="#" class="list-group-item">
+                <h4 class="list-group-item-heading">인간 실격</h4>
+                <p class="list-group-item-text">다자이 오사무</p>
+            </a>
+            <a href="#" class="list-group-item">
+                <h4 class="list-group-item-heading">동물농장</h4>
+                <p class="list-group-item-text">조지 오웰</p>
+            </a>
+        </div>
+    </div>
+</body>
+</HTML>
+===Result===
+{{:wiki:bootstrap:bootstrap_note:listgroupwithcustomcontent.png?600|}}\\

/volume1/web/dokuwiki/data/attic/wiki/bootstrap/bootstrap_note/bs_list_groups.1616721009.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)