按钮

颜色


尺寸

样式

按钮组

字体

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

Kanye West, Musician

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Checkboxes

Radio Buttons

开关按钮

此开关可作为单选按钮来使用。

下拉选项

输入框

group

文本框

文本框采用和和普通输入框类似的样式风格。

除了默认的导航条颜色,还提供了一下5种色彩样式可选: 白色,蓝色,绿色,橙色,红色。. 如果你想使用它们请替换上面的.navbar-primary为相应的 .navbar-defaultnavbar-primary.navbar-info.navbar-success.navbar-warning.navbar-danger

对于以上所有的定制化导航条以外, 我们还提供了一类额外的导航条. .navbar-transparent 是一个特别的类,你可以使用这个类使得导航条变成透明然后当网页网上移动260px之后颜色发生改变可以使用这个类 .navbar-color-on-scroll. We recommend that the part of your page that has the transparent navbar contains something non-cluttered, like an image. If you want to see a nice example in details, check the Profile Page.

通过移除 .nav-pills-icons可以使得导航胶囊更为圆滑

垂直选项卡

Navigation Pills - Vertical Tabs

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically maintain clicks-and-mortar solutions without functional solutions. Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. This is very nice.
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.

Dramatically maintain clicks-and-mortar solutions without functional solutions.
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.

Dynamically innovate resource-leveling customer service for state of the art customer service.

垂直带图标选项卡

Navigation Pills Icons - Vertical Tabs

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.

Dramatically maintain clicks-and-mortar solutions without functional solutions. Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

可折叠选项卡

Collapsible Accordion

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.

分离选项卡

Description about product

More information here

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically visualize customer directed convergence without revolutionary ROI.

Location of the product

More information here

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.

Dramatically maintain clicks-and-mortar solutions without functional solutions.

Legal info of the product

More information here

Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.

Dynamically innovate resource-leveling customer service for state of the art customer service.

Help center

More information here

From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.

Another Text. The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.

分页

分页支持以下5种颜色主题 .pagination-primary", .pagination-info, .pagination-success, .pagination-warning, .pagination-danger.

进度条

来自Bootstrap的进度条具有相同的类和功能。 将此套件添加到现有项目中将只会使其看起来更干净。 默认行为灰色,每个栏都具有特定的颜色,但您可以使用下一个类为背景行添加一些颜色: .progress-line-primary, .progress-line-info, .progress-line-success, .progress-line-warning, .progress-line-danger,

30% Complete
60% Complete
30% Complete
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

滑块

滑块支持以下5种颜色主题 .slider-primary,.slider-info, .slider-success, .slider-warning, .slider-danger



<div id="sliderRegular" class="slider slider-primary"></div>
<div id="sliderDouble" class="slider slider-info"></div>

<script>
$('#sliderRegular').noUiSlider({
	start: 40,
	connect: "lower",
	range: {
	    min: 0,
	    max: 100
	}
});

$('#sliderDouble').noUiSlider({
	start: [20, 60] ,
	connect: true,
	range: {
	    min: 0,
	    max: 100
	}
});
</script>

标签

We restyled the default options for labels and we added the filled class, that can be used in any combination.

Default Primary Success Info Warning Danger

Tables

简单常规表格

Name Country City Salary
Dakota Rice Niger Oud-Turnhout $36,738
Minerva Hooper Curaçao Sinaai-Waas $23,789
Sage Rodriguez Netherlands Baileux $56,142
Philip Chaney Korea, South Overland Park $38,735
Doris Greene Malawi Feldkirchen in Kärnten $63,542
Mason Porter Chile Gloucester $78,615

透明背景常规表格

ID Name Salary Country City
1 Dakota Rice $36,738 Niger Oud-Turnhout
2 Minerva Hooper $23,789 Curaçao Sinaai-Waas
3 Sage Rodriguez $56,142 Netherlands Baileux
4 Philip Chaney $38,735 Korea, South Overland Park
5 Doris Greene $63,542 Malawi Feldkirchen in Kärnten
6 Mason Porter $78,615 Chile Gloucester

多彩常规表格

ID Name Salary Country City
1 Dakota Rice (Success) $36,738 Niger Oud-Turnhout
2 Minerva Hooper $23,789 Curaçao Sinaai-Waas
3 Sage Rodriguez (Info) $56,142 Netherlands Baileux
4 Philip Chaney $38,735 Korea, South Overland Park
5 Doris Greene (Danger) $63,542 Malawi Feldkirchen in Kärnten
6 Mason Porter $78,615 Chile Gloucester
7 Mike Chaney (Warning) $38,735 Romania Bucharest

扩展表格

All Boostrap classes for tables are supported and improved.

简单扩展表格

# Name Job Position Since Salary Actions
1 Andrew Mike Develop 2013 ¥ 99,225
2 John Doe Design 2012 ¥ 89,241
3 Alex Mike Design 2010 ¥ 92,144
4 Mike Monday Marketing 2013 ¥ 49,990
5 Paul Dickens Communication 2015 ¥ 69,201

带选择扩展表格

# Product Name Type Qty Price Amount
1
Moleskine Agenda Office 25 ¥ 49 ¥ 1,225
2
Stabilo Pen Office 30 ¥ 10 ¥ 300
3
A4 Paper Pack Office 50 ¥ 10.99 ¥ 109
4
Apple iPad Meeting 10 ¥ 499.00 ¥ 4,990
5
Apple iPhone Communication 10 ¥ 599.00 ¥ 5,999
Total ¥12,999

带图扩展表格

Product Color Size Price Qty Amount
...
Spring Jacket
by Dolce&Gabbana
Red M ¥549 1
¥549
...
Short Pants
by Pucci
Purple M ¥499 2
¥998
...
Pencil Skirt
by Valentino
White XL ¥799 1
¥799
Total ¥2,346

数据表格

支持排序,翻页,搜索,删除等功能

Name Position Office Age Date Actions
Name Position Office Age Start date Actions
Tiger Nixon System Architect Edinburgh 61 2011/04/25 dvr close
Garrett Winters Accountant Tokyo 63 2011/07/25 dvr close
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 dvr close
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 dvr close
Airi Satou Accountant Tokyo 33 2008/11/28 dvr close
Brielle Williamson Integration Specialist New York 61 2012/12/02 dvr close
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 dvr close
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 dvr close
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 dvr close
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 dvr close
Jena Gaines Office Manager London 30 2008/12/19 dvr close
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 dvr close
Charde Marshall Regional Director San Francisco 36 2008/10/16 dvr close
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 dvr close
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 dvr close
Michael Silva Marketing Designer London 66 2012/11/27 dvr close
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 dvr close
Gloria Little Systems Administrator New York 59 2009/04/10 dvr close
Bradley Greer Software Engineer London 41 2012/10/13 dvr close
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 dvr close
Jenette Caldwell Development Lead New York 30 2011/09/03 dvr close
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 dvr close
Caesar Vance Pre-Sales Support New York 21 2011/12/12 dvr close
Doris Wilder Sales Assistant Sidney 23 2010/09/20 dvr close
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 dvr close
Gavin Joyce Developer Edinburgh 42 2010/12/22 dvr close
Jennifer Chang Regional Director Singapore 28 2010/11/14 dvr close
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 dvr close
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 dvr close
Shou Itou Regional Marketing Tokyo 20 2011/08/14 dvr close
Michelle House Integration Specialist Sidney 37 2011/06/02 dvr close
Suki Burks Developer London 53 2009/10/22 dvr close
Prescott Bartlett Technical Author London 27 2011/05/07 dvr close
Gavin Cortez Team Leader San Francisco 22 2008/10/26 dvr close
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 dvr close
Unity Butler Marketing Designer San Francisco 47 2009/12/09 dvr close
Howard Hatfield Office Manager San Francisco 51 2008/12/16 dvr close
Hope Fuentes Secretary San Francisco 41 2010/02/12 dvr close
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 dvr close
Timothy Mooney Office Manager London 37 2008/12/11 dvr close

图片

圆角图片

Rounded Image

圆形图片

Circle Image

带阴影圆角图片

Raised Image

带阴影圆形图片

Thumbnail Image

日期时间选择器

目前提供3种规格选择器:日期时间选择器,日期选择器,时间选择器

文件上传

规则图片

...
选择图片 更换 移除

头像

...
添加头像 更换
移除

Input组件上传

弹框(Sweet Alert 2)

该组件可用于替代alert

提示工具(ToolTips)

提示工具支持4个方位的设置,通过属性data-placement来设置,可选toprightleftbottom

弹出框(Popovers)

弹出框工具支持4个方位的设置,通过属性data-placement来设置,可选toprightleftbottom

通知(Notifications)

The new notifications are looking fresh and clean. They go great with the navbar. For these notifications examples we used the .container-fluid class, so they will be fluid, please use the class .container when you use them outside of the .wrapper so they will be alignd with the general page container.

Info alert: You've got some friends nearby, stop looking at your phone and find them...
Success Alert: Yuhuuu! You've got your $11.99 album from The Weeknd
Warning Alert: Hey, it looks like you still have the "copyright © 2015" in your footer. Please update it!
Error Alert: Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
notifications This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.

动态浮动提示框,支持6个方位浮动

font-awesome图标

支持最新的font-awesome图标集合.

fa-lg fa-2x fa-3x fa-4x fa-5x

Material图标(Material Icons)

支持谷歌的Material图标。

face face face face face