• 이윰빌더 시즌 4
  • 테마/스킨상점
이윰

테이블 & 탭

테이블

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

기본 예제

모든 테이블 소스는 <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
혼합

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

예제

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

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

예제

# 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
9 Column content Column content Column content
반응형 테이블

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

예제

# 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

아코디언

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

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

예제

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.

예제

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.

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

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

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

예제

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Heading Subject

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Heading Subject

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.