Accordion & Tabs

"이윰빌더에서 기본적으로 제공하는 BASIC 테마의 ShortCodes 입니다."

Info! 부트스트랩의 기본 가이드는 아래 링크를 참조하세요.

Bootstrap Site - http://getbootstrap.com/
부트스트랩 한글번역 - http://bootstrapk.com/
Accordion Tabs

Accordion

Collapsible Item - 1

Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

  • Aenean lectus lorem, imperdiet at, ultrices eget..
  • Proin eu wisi suscipit nulla suscipit..
  • Donec mattis libero eget urna. Duis pretium velit..

Collapsible Item - 2

Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

Collapsible Item - 3

Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.
?
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<div class="panel-group acc-v1" id="accordion-1">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-1" href="#collapse-One">
                    Collapsible Item - 1
                </a>
            </h4>
        </div>
        <div id="collapse-One" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-8">
                        <p>Nullam non wisi a sem semper eleifend..</p>
                        <ul class="list-unstyled">
                            <li><i class="fa fa-check color-red"></i> Aenean lectus lorem...</li>
                            <li><i class="fa fa-check color-red"></i> Proin eu wisi suscipit...</li>
                            <li><i class="fa fa-check color-red"></i> Donec mattis libero eget...</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <img class="img-responsive" src="/eyoom/theme/dynamic/image/no_img.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-1" href="#collapse-Two">
                    Collapsible Item - 2
                </a>
            </h4>
        </div>
        <div id="collapse-Two" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4">
                        <img class="img-responsive" src="/eyoom/theme/dynamic/image/no_img.jpg" alt="">
                    </div>
                    <div class="col-md-8">
                        Nullam non wisi a sem semper eleifend...
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-1" href="#collapse-Three">
                    Collapsible Item - 3
                </a>
            </h4>
        </div>
        <div id="collapse-Three" class="panel-collapse collapse">
            <div class="panel-body">
                Nullam non wisi a sem semper eleifend...
            </div>
        </div>
    </div>
</div>

Tabs

Heading Subject

Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

Heading Subject

Pellentesque habitant morbi tristique senectus. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

Heading Subject

Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. malesuada fames Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

?
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
<div class="tab-e1">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab-2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab-3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content margin-top-15">
        <div class="tab-pane fade in active" id="tab-1">
            <img alt="" class="pull-left lft-img-margin img-width-200" src="/image/no_img.jpg">
            <h4>Heading Subject</h4>
            <p>Nullam non wisi a sem semper eleifend...</p>
        </div>
        <div class="tab-pane fade in" id="tab-2">
            <h4>Heading Subject</h4>
            <p><img alt="" class="pull-right rgt-img-margin img-width-200" src="/image/no_img.jpg"> <strong>Pellentesque habitant morbi tristique senectus.</strong> Nullam non wisi a sem...</p>
        </div>
        <div class="tab-pane fade in" id="tab-3">
            <div class="row">
                <div class="col-md-4">
                    <img alt="" class="img-responsive img-tab-space" src="/image/no_img.jpg">
                </div>
                <div class="col-md-8">
                    <h4>Heading Subject</h4>
                    <p>Nullam non wisi a sem semper eleifend... Pellentesque pede.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Heading Subject

Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. malesuada fames Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

Heading Subject

Pellentesque habitant morbi tristique senectus. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

Heading Subject

Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="tab-e2">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-4" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab-5" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab-6" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content padding-all-15">
        <div class="tab-pane fade in active" id="tab-4">
            <h4>Heading Subject</h4>
            <p>Nullam non wisi a sem semper...</p>
        </div>
        <div class="tab-pane fade in" id="tab-5">
            <img alt="" class="pull-left lft-img-margin img-width-200" src="/image/no_img.jpg">
            <h4>Heading Subject</h4>
            <p><strong>Pellentesque habitant morbi tristique senectus.</strong> Nullam non wisi a sem...</p>
            <div class="clearfix"></div>
        </div>
        <div class="tab-pane fade in" id="tab-6">
            <h4>Heading Subject</h4>
            <p><img alt="" class="pull-right rgt-img-margin img-width-200" src="/image/no_img.jpg"> Nullam non wisi a sem semper...</p>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

Heading Subject

Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. malesuada fames Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum.

Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

Heading Subject

Pellentesque habitant morbi tristique senectus. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

Heading Subject

Pellentesque habitant morbi tristique senectus. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede.

?
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
<div class="row tab-e3">
    <div class="col-sm-3">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#tab-7" data-toggle="tab"><i class="fa fa-comments"></i> Tab 1</a></li>
            <li><a href="#tab-8" data-toggle="tab"><i class="fa fa-thumbs-up"></i> Tab 2</a></li>
            <li><a href="#tab-9" data-toggle="tab"><i class="fa fa-envelope-o"></i> Tab 3</a></li>
        </ul>
    </div>
    <div class="col-sm-9">
        <div class="tab-content padding-all-15">
            <div class="tab-pane fade in active" id="tab-7">
                <h4>Heading Subject</h4>
                <p>Nullam non wisi a sem semper...</p>
            </div>
            <div class="tab-pane fade in" id="tab-8">
                <img alt="" class="pull-left lft-img-margin img-width-200" src="/eyoom/theme/dynamic/image/no_img.jpg">
                <h4>Heading Subject</h4>
                <p><strong>Pellentesque habitant morbi tristique senectus.</strong> Nullam non wisi a sem...</p>
                <div class="clearfix"></div>
            </div>
            <div class="tab-pane fade in" id="tab-9">
                <h4>Heading Subject</h4>
                <p><img alt="" class="pull-right rgt-img-margin img-width-200" src="/eyoom/theme/dynamic/image/no_img.jpg"> <strong>Pellentesque habitant morbi tristique senectus.</strong> Nullam non wisi...</p>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>