Core Typography
h1. Heading Secondary text
h2. Heading Secondary text
h3. Heading Secondary text
h4. Heading Secondary text
h5. Heading Secondary text
h6. Heading Secondary text
TIPS: Create lighter, secondary text in any heading with a generic <small>
tag or the .small
class.
Example body text
This is a lead paragraph. Make a paragraph stand out by adding .lead
.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
An abbreviation of the word attribute is attr.
Address
Company Name795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890Full Name
P: (123) 456-7890
该 Email 地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。
Emphasis classes
This is a .mute
paragraph.
This is a .text-primary
paragraph.
This is a .text-warning
paragraph.
This is a .text-danger
paragraph.
This is a .text-success
paragraph.
This is a .text-info
paragraph.
Alignment classes
This is a left aligned text .text-left
This is a center aligned text .text-center
This is a right aligned text .text-right
This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with .text-justify
class.
Blockquotes
This is a
Quote's author in Source Title<blockquote>
in a<.well>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote's author in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote's author in Source Title
Color Swatches
Brand Colors
- #cc0000
- Brand Primary
- #669900
- Brand Secondary
- #ff8800
- Brand Warning
- #cc0000
- Brand Danger
- #0099cc
- Brand Info
- #669900
- Brand Success
Grayscale Levels
- #222222
- Gray Darker
- #444444
- Gray Dark
- #666666
- Gray
- #999999
- Gray Light
- #eeeeee
- Gray Lighter
- #f8f8f8
- Gray Lightest
Navigations
Forms
Buttons
Inputs
Sample Basic Form
Hero Units
Jumbotron
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Primary Jumbotron
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Masthead
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Primary Masthead
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Media Object
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.More nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Tables
Basic Tables
# | 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 |
# | 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 |
Bordered Tables
# | 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 |
# | 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 |
Indicators
Alerts and Notifications
Badges
Labels
Other useful components
List groups
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- Morbi leo risus
- Morbi leo risus
- 1 Morbi leo risus
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus.
List group item heading
Donec id elit non mi porta gravida at eget metus.
Panels
Panel primary
Panel success
Panel warning
Panel danger
Panel info
Wells
序 号 | 套餐A品类 | 套餐A标准 | 备 注 |
---|---|---|---|
01 | 清蒸大鲍鱼 | 1只/人 | |
02 | 海参蘸酱 | 1只/人 | |
03 | 清蒸大海螺 | 1只/人 | |
04 | 清蒸大扇贝 | 1只/人 | |
05 | 生蚝刺身 | 1只/人 | |
06 | 螃蟹或虾怪 | 1只/人 | |
07 | 海胆 | 1只/人 | |
08 | 炖黄鱼 | 1 盘 | |
09 | 大蛤炒鸡蛋 | 1 盘 | |
10 | 龙须菜拌蚬子肉 | 1 盘 | |
11 | 蛇皮黄瓜 | 1 盘 | |
12 | 炒时令蔬菜 | 1 盘 | |
13 | 主食:米饭、玉米或玉米饼 |
序 号 | 套餐B品类 | 套餐B标准 | 备 注 |
---|---|---|---|
01 | 清蒸中鲍鱼 | 1只/人 | |
02 | 海参蘸酱 | 1只/人 | |
03 | 清蒸中海螺 | 1只/人 | |
04 | 扇贝 | 1只/人 | |
05 | 螃蟹 | 1只/人 | |
06 | 海胆或生蚝 | 1只/人 | |
07 | 炖鱼 | 1 盘 | |
08 | 拌假鲍鱼 | 1 盘 | |
09 | 蛇皮黄瓜 | 1 盘 | |
10 | 炒时令蔬菜 | 1 盘 | |
11 | |||
12 | |||
13 | 主食:米饭、玉米或玉米饼 |
序 号 | 套餐C品类 | 套餐C标准 | 备 注 |
---|---|---|---|
01 | 清蒸小鲍鱼 | 1只/人 | |
02 | 清蒸小海螺 | 1只/人 | |
03 | 海胆或生蚝 | 1只/人 | |
04 | 扇贝10只或栉孔扇贝 | 1 盘 | |
05 | 炖鱼 | 1 盘 | |
06 | 蛇皮黄瓜 | 1 盘 | |
07 | 凉拌菜 | 1 盘 | |
08 | 炒蚬子 | 1 盘 | |
09 | 炒时令蔬菜 | 1 盘 | |
10 | 炸花生米 | 1 盘 | |
11 | |||
12 | |||
13 | 主食:米饭、玉米或玉米饼 |