通用元素 一些通用元素

Color Palette

Primary

Disabled
#3c8dbc
Active

Info

Disabled
#00c0ef
Active

Success

Disabled
#00a65a
Active

Warning

Disabled
#f39c12
Active

Danger

Disabled
#f56954
Active

Gray

Disabled
#d2d6de
Active

Navy

Disabled
#001F3F
Active

Teal

Disabled
#39CCCC
Active

Purple

Disabled
#605ca8
Active

Orange

Disabled
#ff851b
Active

Maroon

Disabled
#D81B60
Active

Black

Disabled
#111111
Active

警告

Alert!

Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

Alert!

Info alert preview. This alert is dismissable.

Alert!

Warning alert preview. This alert is dismissable.

Alert!

Success alert preview. This alert is dismissable.

提示

I am a danger callout!

There is a problem that we need to fix. A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

I am an info callout!

Follow the steps to continue to payment.

I am a warning callout!

This is a yellow callout.

I am a success callout!

This is a green callout.

不同大小的进度条

.progress

40% Complete (success)

Class: .sm

20% Complete

Class: .xs

60% Complete (warning)

Class: .xxs

60% Complete (warning)

常规进度条

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
20% Complete

带动画且不同规格的进度条

用法:.vertical and .progress-sm, .progress-xs or .progress-xxs到包裹层:

40%
100%
60%
60%

垂直进度条

用法:.vertical到包裹层

40%
20%
60%
80%

风琴效果

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

幻灯片

悬浮我显示隐藏

点击我显示隐藏

Hello, world!

...

Learn more

面板标题

面板内容

面板标题

面板内容

Headlines ,副标题small

h1. Bootstrap heading sub heading

h2. Bootstrap heading sub heading

h3. Bootstrap heading sub heading

h4. Bootstrap heading sub heading

h5. Bootstrap heading sub heading
h6. Bootstrap heading sub heading

文本突出

Lead to emphasize importance .lead

Text green to emphasize success,usage.text-green

Text aqua to emphasize info ,usage.text-aqua

Text light blue to emphasize info (2) ,usage.text-light-blue

Text red to emphasize danger,usage .text-red

Text yellow to emphasize warning ,usage.text-yellow

Text muted to emphasize general,usage .text-muted

块状引用

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

来源右浮动

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

无序列表

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

有序列表

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

没有默认样式的无序列表

用法:<ul class="list-unstyled"></ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

自定义列表

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

自定义列表水平显示

用法:<dl class="dl-horizontal"></dl>

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.