紀永のコンポーネント

各種コンポーネントの表示例とソースの一覧です。掲載されていないコンポーネントについては、Getting started をご覧下さい。

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-body

.bg-white

.bg-transparent

.bg-primary.bg-gradient

.bg-secondary.bg-gradient

.bg-success.bg-gradient

.bg-danger.bg-gradient

.bg-warning.bg-gradient

.bg-info.bg-gradient

.bg-light.bg-gradient

.bg-dark.bg-gradient

This is default success background

This is 75% opacity success background

This is 50% opacity success background

This is 25% opacity success background

This is 10% opacity success background

Radio 1 Radio 2 Radio 3

Primary Secondary Success Danger Warning Info Light Dark

primary 色のアラートとリンク

secondary 色のアラートとリンク

success 色のアラートとリンク

danger 色のアラートとリンク

warning 色のアラートとリンク

info 色のアラートとリンク

light 色のアラートとリンク

dark 色のアラートとリンク

キャプション
Active
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
table-active	table-primary	table-secondary
table-success	table-danger	table-warning
table-info	table-light	table-dark

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1

primary 色のリストグループ項目
secondary 色のリストグループ項目
success 色のリストグループ項目
danger 色のリストグループ項目
warning 色のリストグループ項目
info 色のリストグループ項目
light 色のリストグループ項目
dark 色のリストグループ項目
action 色のリストグループ項目
action active 色のリストグループ項目
primary action 色のリストグループ項目
primary action active 色のリストグループ項目

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus

@

オプション

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.

Toggle first element

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.