이윰

본문 바로가기

테이블 & 탭

본 페이지의 테마코드 활용법은 2022년 01월 이후 선보인 이윰빌더 시즌4 부트스트랩5 기반의 테마코드 활용법입니다.

이전 이윰빌더 시즌4 부트스트랩3 기반의 테마코드 활용법은 아래 링크를 참조하여 주시기 바랍니다.
https://eyoom.net/page/eb4_code

Tables

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

기본 예제

모든 테이블 소스는 <div class="table-list-eb"></div> 로 감싸줍니다. <table> 에 약간의 패딩과 수평 구분선이 있는 기본 스타일의 .table 클래스를 추가하세요.

[ 예제 ]

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
줄무늬 행

<tbody> 안에 테이블 행에 얼룩말같은 줄무늬를 추가하려면, .table-striped 를 사용하세요.

[ 예제 ]

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
행 hover

<tbody> 안의 테이블 행에 hover 상태를 확인할 수 있게끔 하려면 .table-hover 를 추가하세요.

[ 예제 ]

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
선있는 테이블

테이블의 모서리와 셀에 선을 그리기 위해 .table-bordered 을 추가하세요.

[ 예제 ]

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Captions

<caption> 는 테이블의 제목과 같은 기능을 합니다. 스크린 리더를 사용하는 사용자가 테이블을 찾고 테이블의 내용을 이해하고 읽을지 여부를 결정하는데 도움이 됩니다.

[ 예제 ]

List of users
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<caption> 를 사용하여 테이블 상단에 놓을 수도 있습니다. .caption-top

[ 예제 ]

List of users
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
혼합

.table-bordered .table-striped .table-hover 혼합

[ 예제 ]

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

.table-bordered .table-dark .table-striped .table-hover 혼합

[ 예제 ]

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

.table-bordered .table-primary 혼합

.table-primary 대신 .table-info, .table-success, .table-warning, .table-danger 혼합 가능

[ 예제 ]

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<thead> 태그에 .table-dark 사용

[ 예제 ]

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<tfoot> 사용

[ 예제 ]

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Footer Footer Footer Footer
맥락적인 클래스들

테이블 행이나 셀에 색을 넣으려면 맥락적인 클래스들을 사용하세요. .table-primary .table-secondary .table-success .table-danger .table-warning .table-info .table-light .table-dark

[ 예제 ]

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
반응형 테이블

.table 을 .table-responsive 으로 감싸서 작은 기기에서는 수평 스크롤을 할 수 있는 반응형 테이블을 만듭니다(991px 이하). 992px 보다 큰 기기에서는 보기에 차이가 없습니다.

[ 예제 ]

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

[ 예제 ]

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Accordion

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

예제의 샘플을 작동해 보았다면, 새로고침 후 소스코드를 복사하여 사용하세요. (작동 후 불필요한 소스가 잔존하기 때문)

[ 예제 ]

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

[ 예제 ] - Always open

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

[ 예제 ] - Flush

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

[ 예제 ] - 응용

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.

Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus.

[ 예제 ] - 응용

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.

Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus.

Collapse

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

예제의 샘플을 작동해 보았다면, 새로고침 후 소스코드를 복사하여 사용하세요. (작동 후 불필요한 소스가 잔존하기 때문)

[ 예제 ]

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

[ 예제 ] - Horizontal

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

[ 예제 ] - Multiple targets

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Tabs

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

예제의 샘플을 작동해 보았다면, 새로고침 후 소스코드를 복사하여 사용하세요. (작동 후 불필요한 소스가 잔존하기 때문)

[ 예제 ] - <ul> 태그

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis est at lobortis. vestibulum.

Heading Subject

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh, ut fermentum massa justo sit amet risus.

[ 예제 ] - <nav> 태그

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis est at lobortis. vestibulum.

Heading Subject

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh, ut fermentum massa justo sit amet risus.

[ 예제 ]

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis est at lobortis. vestibulum.

Heading Subject

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh, ut fermentum massa justo sit amet risus.

[ 예제 ]

Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis est at lobortis. vestibulum.

Heading Subject

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh, ut fermentum massa justo sit amet risus.

Heading Subject

Cras justo odio, dapibus ac facilisis in, egestas eget Fusce dapibus, tellus ac cursus commodo.

사이트 내 전체검색