字体图标的应用示例

下拉菜单示例

按钮工具栏与按钮组

 
 
 Button 1
 Button 2
 Button 3
 
 
 Button 4
 Button 5
 Button 6
 
 
 Button 7
 Button 8
 Button 9
 

按钮下拉菜单

 
  
 默认 
 
 
 
功能
 
另一个功能
 
其他
 

 
分离的链接
 
 

表单中的输入框组

导航（tab标签页）

标签式的导航菜单

 
Home
 
SVN
 
iOS

基本的胶囊式导航菜单

 
Home
 
SVN

垂直的胶囊式导航菜单

 
Home
 
SVN

导航栏

响应式的导航栏

以下金黄色部分为对一般的导航栏的区别

面包屑导航

分页和翻页

 
«
 
1
 
2
 
3
 
4
 
5
 
»



 
Previous
 
Next



 
← Older
 
Newer →

标签

默认标签
主要标签
成功标签
信息标签
警告标签
危险标签

徽章

徽章比标签更圆滑，主要用于突出显示新的或未读的项

 

 
 42
 首页
 
 
 
简介
 

 
 3
 消息
 
 

超大屏幕

页面标题示例

缩略图

警告

 
 ×
 
 成功！很好地完成了提交。


 
 ×
 
 成功！很好地完成了提交。


 
 ×
 
 警告！请不要提交。


 
 ×
 
 错误！请进行一些更改。

进度条

媒体标签

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

 

 
 
 
 
 
媒体标题
 
这是一些示例文本。这是一些示例文本。 
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 
 
 
 
 
 
 
嵌套的媒体标题
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 
 
 
 
 
 
 
嵌套的媒体标题
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 
 
 
 
 
 
 
 
 
 
 
嵌套的媒体标题
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 
 
 
 
 

 
 
 
 
 
媒体标题
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 这是一些示例文本。这是一些示例文本。
 
 

列表组

 
免费域名注册
 

 新
 24*7 支持
 
 
每年更新成本
 

 新
 折扣优惠
 



 
 

 入门网站包
 
 
 
 

 免费域名注册
 
 

 您将通过网页进行免费域名注册。
 
 
 
 

 24*7 支持
 
 

 我们提供 24*7 支持。
 
 

面板

 
 

 带有 title 的面板标题
 
 
 
 面板内容
 
 
 

 
产品
价格 
 
产品 A
200
 
产品 B
400
 
 
 
 
免费域名注册
 
免费 Window 空间托管
 
图像的数量
 
24*7 支持
 
每年更新成本
 
 面板脚注

well效果

Well 是一种会引起内容凹陷显示或插图效果的容器

您好，我在大的 Well 中！
您好，我在小的 Well 中！