이윰

본문 바로가기

컴포넌트

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

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

Components

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

라벨 (Label)

[ 예제 ]

.label .label-색상

  • Default
  • Light
  • Dark
  • Red
  • Crimson
  • Pink
  • Purple
  • Deep Purple
  • Blue
  • Light Blue
  • Cyan
  • Teal
  • Green
  • Light Green
  • Lime
  • Yellow
  • Amber
  • Orange
  • Deep Orange
  • Brown
  • Gray
  • Light Gray

[ 예제 ]

.label .label-색상 .rounded

  • Default
  • Light
  • Dark
  • Red
  • Crimson
  • Pink
  • Purple
  • Deep Purple
  • Blue
  • Light Blue
  • Cyan
  • Teal
  • Green
  • Light Green
  • Lime
  • Yellow
  • Amber
  • Orange
  • Deep Orange
  • Brown
  • Gray
  • Light Gray
배지 (Badge)

[ 예제 ]

.badge .badge-색상

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

[ 예제 ]

버튼 옵션과 배지 옵션을 조합하여 사용할수 있습니다.

소셜 아이콘

[ 예제 ]

[ 예제 ]

.rounded

[ 예제 ]

.rounded-x

진행바

[ 예제 ] - Backgrounds

None

.bg-success

.bg-info

.bg-warning

.bg-danger

[ 예제 ] - Striped

.progress-bar-striped

[ 예제 ] - Animated stripes

.progress-bar-striped .progress-bar-animated

10%
25%
50%
75%
100%

[ 예제 ] - 응용

15%
30%
20%

[ 예제 ] - 색상

진행률 10%
진행률 20%
진행률 30%
진행률 40%
진행률 50%
진행률 60%
진행률 70%
진행률 80%
진행률 90%
진행률 100%

[ 예제 ] - 색상

진행률 10%
진행률 20%
진행률 30%
진행률 40%
진행률 50%
진행률 60%
진행률 70%
진행률 80%
진행률 90%
진행률 100%

위 옵션들의 조합으로 좀더 다양한 응용이 가능합니다.

진행바 - Vertical

[ 예제 ] - 색상

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

[ 예제 ] - 색상

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

[ 예제 ] - 줄무늬

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

[ 예제 ] - 애니메이션

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Panels

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

[ 예제 ]

Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Primary Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Info Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Success Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Warning Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Danger Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Red Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Crimson Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Pink Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Purple Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Deep Purple Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Indigo Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Blue Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Light Blue Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Cyan Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Teal Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Green Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Light Green Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Lime Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Yellow Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Amber Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Orange Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Deep Orange Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Brown Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Gray Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[ 예제 ]

Dark Panel
Heading Subject

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

사이트 내 전체검색