Home Bootstrap list 목록 구성
Post
Cancel

Bootstrap list 목록 구성

01. 목록 구성 하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="container">
  <div class="page-header">
    <h2>목록 구성하기</h2>
  </div>
  <h3>기본 목록</h3>
  <ul>
    <li>HTML+CSS</li>
    <li>
      Javascript
      <ul>
        <li>jQuery</li>
        <li>Vue.js</li>
        <li>React.js</li>
      </ul>
    </li>
    <li>Twitter Bootstrap</li>
  </ul>
  <h3>마커제거 <small>(자식에게 상속되지 않음)</small></h3>
  <ul class="list-unstyled">
    <li>HTML+CSS</li>
    <li>
      Javascript
      <ul>
        <li>jQuery</li>
        <li>Vue.js</li>
        <li>React.js</li>
      </ul>
    </li>
    <li>Twitter Bootstrap</li>
  </ul>
  <h3>인라인 요소로 설정 <small>(자식에게 상속되지 않음)</small></h3>
  <style>
    /** 세로 정렬을 위로 지정 */
    .vtop {
      vertical-align: top;
    }
  </style>
  <ul class="list-inline">
    <li class="vtop">HTML+CSS</li>
    <li class="vtop">
      Javascript
      <ul class="list-inline">
        <li>jQuery</li>
        <li>Vue.js</li>
        <li>React.js</li>
      </ul>
    </li>
    <li class="vtop">Twitter Bootstrap</li>
  </ul>
</div>
  • 출력결과

    Untitled (13)

2. 설명

특정 단어나 여러 가지 항목들에 대한 목록과 설명을 만들 때에는 <dl> 태그와 <dt>, <dd> 태그를 많이 사용한다.

Bootstrap에서는 이러한 태그들도 모든 브라우저에서 동일하게 보이도록 스타일을 설정하고 있다.

<dl> 태그는 목록 태그에서 <ul>이나 <ol> 태그와 동일하게 사용하면 되고, <dt><dd> 태그는 하나의 쌍을 <li>태그와 동일하게 사용하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <div class="page-header">
    <h2>설명</h2>
  </div>
  <dl>
    <dt>제목을 구성하는 태그</dt>
    <dd>제목에 대한 설명을 구성하기 위한 태그 입니다.</dd>
    <dt>제목을 구성하는 태그</dt>
    <dd>제목에 대한 설명을 구성하기 위한 태그 입니다.</dd>
    <dt>제목을 구성하는 태그</dt>
    <dd>제목에 대한 설명을 구성하기 위한 태그 입니다.</dd>
  </dl>
</div>
  • 출력결과

    Untitled (14)

3. 수평 설명

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <div class="page-header">
    <h2>수평설명 <small>(반응형)</small></h2>
  </div>
  <dl class="dl-horizontal">
    <dt>제목을 구성하는 태그</dt>
    <dd>제목에 대한 설명을 구성하기 위한 태그 입니다.</dd>
    <dt>제목을 구성하는 태그</dt>
    <dd>제목에 대한 설명을 구성하기 위한 태그 입니다.</dd>
    <dt>제목을 구성하는 태그</dt>
    <dd>제목에 대한 설명을 구성하기 위한 태그 입니다.</dd>
  </dl>
</div>
  • 출력결과

    Untitled (15)

This post is licensed under CC BY 4.0 by the author.

Bootstrap 문단 꾸미기

JavaScript Event Listener(이벤트 리스너)