Bootstrap 网页显示组件

标签

<span class="label label-default">默认标签(灰色)</span>
<span class="label label-primary">主要标签(蓝色)</span>
<span class="label label-success">成功标签(绿色)</span>
<span class="label label-info">信息标签(浅蓝色)</span>
<span class="label label-warning">警告标签(黄色)</span>
<span class="label label-danger">危险标签(红色)</span>

徽章

一般用于显示未读消息个数，或者显示新消息个数

<span class="badge">10</span>

Well 文本容器

显示一段比较好看的文字，一般用来显示提示信息

<div class="well">这是一个Well文本区域</div>
<div class="well-lg">大号的Well</div>
<div class="well-sm">小号的Well</div>
<div class="well"><blockquote>配合HTML的blockquote标签更好看</blockquote></div>

Alert 提示文本区域

Alert比Well外观更加活泼，色彩比较鲜艳

• .alert-success 绿色背景
• .alert-info 蓝色背景
• .alert-waring 黄色背景
• .alert-danger 红色背景

用法：

<div class="alert alert-success">操作成功</div>
<div class="alert alert-info">请填写个人简洁</div>
<div class="alert alert-warning">请慎重修改个人属性</div>
<div class="alert alert-danger">密码不能为空</div>

面板

面板是可以包含标题、脚注、内容区的显示区域，比较大气美观

面板的色彩选择：
- .panel-default 灰色
- .panel-primary 蓝色
- .panel-success 绿色
- .panel-info 浅蓝
- .panel-warning 黄色
- .panel-danger 红色

面板的构成

<div class="panel panel-default"><!--面板区域-->
    <div class="panel-heading"><!--面板头部-->
        <h3 class="panel-title">
            这里是面板的标题
        </h3>
    </div>
    <div class="panel-body">
        这里是面板的内容区域
    </div>
    <div class="panel-footer">
        这里是面板的脚注区域
    </div>
</div>

Jumbotron 超大屏幕布局块

外国网站常用的首页标题显示区域、感觉国内用的不多

<div class="container">
   <div class="jumbotron"><!--超大屏幕区域-->
        <h1>欢迎访问XX公司</h1>
        <p>世界领先的XXX服务提供商</p>
        <p><a class="btn btn-primary btn-lg">了解更多</a>
      </p>
   </div>
</div>

图片

• .img-responsive 响应式样式，图片将自适应父元素
• .img-rounded 圆角图片
• .img-circle 圆形图片
• .img-thumbnail 带边框样式

图标

Bootstrap可以免费使用Glyphicons字体图标，这个算一个很好的福利。

用法：

<span class="glyphicon glyphicon-plus"></span><!--这是一个添加图标-->

常见的图标可从下面的网址查询：
http://w3c.3306.biz/bootstrap/eg/bootstrap–glyphicons-list.html