문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap List Groups======
<WRAP left notice 80%>
  * description : Bootstrap List Groups
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-26
</WRAP>
<WRAP clear></WRAP>
\\
=====Basic List Groups=====
가장 기본적인 목록 그룹은 목록 항목이 있는 정렬되지 않은 목록입니다.\\
{{:wiki:bootstrap:bootstrap_note:basic-list-group.png?600|}}\\
\\
기본 목록 그룹을 만들기 위해, ''%%.list-group%%'' 클래스와 ''%%<ul>%%'' 요소를 사용하고,\\
''%%.list-group-item%%'' 클래스와 ''%%<li>%%'' 요소를 사용하세요.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Basic List Group</h2>
        <ul class="list-group">
            <li class="list-group-item">First item</li>
            <li class="list-group-item">Second item</li>
            <li class="list-group-item">Third item</li>
        </ul>
    </div>

</body>
</HTML>
\\
=====List Group With Badge=====
목록 그룹에 배지도 추가할 수 있습니다. 배지는 자동으로 오른쪽에 배치됩니다.\\
{{:wiki:bootstrap:bootstrap_note:list-group-with-badges.png?600|}}\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>List Group With Badges</h2>
        <ul class="list-group">
            <li class="list-group-item">New <span class="badge">12</span></li>
            <li class="list-group-item">Deleted <span class="badge">5</span></li>
            <li class="list-group-item">Warnings <span class="badge">3</span></li>
        </ul>
    </div>

</body>
</HTML>
\\

=====List Group With Linked Items=====
목록 그룹의 항목들은 하이퍼링크가 될 수도 있습니다. 마우스 오버시 회색 배경색이 추가됩니다:\\
{{:wiki:bootstrap:bootstrap_note:list-group-with-linked-items.png?600|}}\\
링크된 항목을 가진 목록 그룹을 만들기 위해, ''%%<ul>%%'' 대신에 ''%%<div>%%''를 사용하고,\\
''%%<li>%%'' 대신에 ''%%<a>%%''를 사용하세요.
====예제====
<HTML>
<body>

    <div class="container">
        <h2>List Group With Linked Items</h2>
        <div class="list-group">
            <a href="#" class="list-group-item">First item</a>
            <a href="#" class="list-group-item">Second item</a>
            <a href="#" class="list-group-item">Third item</a>
        </div>
    </div>

</body>
</HTML>
\\
=====Active State=====
{{:wiki:bootstrap:bootstrap_note:active-item-in-a-list-group.png?600|}}\\
''%%.active%%'' 클래스를 사용하여, 현재 항목을 강조 표시하십시오.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Active Item in a List Group</h2>
        <div class="list-group">
            <a href="#" class="list-group-item active">Python</a>
            <a href="#" class="list-group-item">Java</a>
            <a href="#" class="list-group-item">JavaScript</a>
        </div>
    </div>

</body>
</HTML>
\\
=====Disabled Item=====
아래의 목록 그룹에는 비활성화 항목이 있습니다.\\
{{:wiki:bootstrap:bootstrap_note:list-group-with-a-disabled-item.png?600|}}\\
항목을 비활성화하기 위해, ''%%.disabled%%'' 클래스를 추가하세요:\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>List Group With a Disabled Item</h2>
        <div class="list-group">
            <a href="#" class="list-group-item disabled">설레는 건 짧을수록 좋아</a>
            <a href="#" class="list-group-item">겁내지 않고 그림 그리는 법</a>
            <a href="#" class="list-group-item">원피스 98</a>
        </div>
    </div>

</body>
</HTML>
\\
=====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|}}\\






{{tag>오션 Bootstrap List Groups}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
