【web开发】3、Bootstrap基础

TechMasterPlus

已于 2023-09-15 12:20:54 修改

阅读量421

点赞数 5

分类专栏： web开发 python工具包的简单应用文章标签：前端 bootstrap html

于 2023-09-08 15:39:38 首次发布

本文链接：https://blog.csdn.net/qq_46644680/article/details/132730367

版权

python工具包的简单应用同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

web开发

6 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、Bootstrap是什么？

Bootstrap提供了一组预先设计的HTML、CSS和JavaScript组件，如按钮、表单、导航栏等，以帮助开发人员快速轻松地创建响应迅速、视觉吸引力强的网站和web应用程序。 Bootstrap允许开发人员通过提供一组一致且记录良好的设计元素来节省时间，这些元素可以根据特定的项目需求进行定制。
Bootstrap官网：https://v3.bootcss.com/
在这里插入图片描述

二、使用步骤

1.引入Bootstrap

法一：官网提供了CDN 的支持，直接使用这些 BootCDN.cn 提供的链接即可。

css写在html文件的head体中

 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

js写在html文件的body体中

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

法二：去官网下载压缩包，在根目录下创建static目录，并在static目录下分别创建js\css\plugins\img目录，将压缩包里面的文件放到plugins目录下，如下图：
在这里插入图片描述

对应路径，引入css和js

<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">

<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>

2.Bootstrap常用全局 CSS 样式介绍与示例

布局容器

在Bootstrap中，.container 是一个常用的类，用于包裹网页内容，帮助实现响应式设计。.container 类有两个变种：.container 和 .container-fluid，它们在网页布局中有不同的用途。

1.container 类：
.container 类用于固定宽度并支持响应式布局的容器。

2.container-fluid 类：
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
    <div style="background-color: pink">起始位置距离前面边缘有一段位置</div>
</div>
<div class="container-fluid">
    <div style="background-color: grey">起始位置在最前方</div>
</div>
</body>

</html>

在这里插入图片描述

栅格系统

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid System Example</title>
    <!-- 引入Bootstrap CSS -->
   <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container" >
        <!-- 一行有12列 -->
        <div class="row">
             <!-- 创建列，占4列的宽度（一行最多12列）在中等屏幕以上的情况下 -->
            <div class="col-md-4" style="background-color: grey">占4列</div>
             <!-- 创建列，占8列的宽度（一行最多12列）在中等屏幕以上的情况下 -->
            <div class="col-md-8" style="background-color: #0e90d2">占8列</div>
        </div>
    </div>
<!-- 引入Bootstrap JavaScript，确保在引入之前引入Bootstrap CSS -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述
列偏移

<div class="container" style="background-color: red">
    <div>1</div>
    <div class=" col-sm-offset-2 col-sm-6" style="background-color: #9d9d9d">2</div>

在这里插入图片描述
嵌套列

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

在这里插入图片描述

排版

标题
HTML 中的所有标题标签，h1-h6均可使用。

<div class="container">
 <h1>标题</h1>
 <h2>标题</h2>
 <h3>标题</h3>
 <h4>标题</h4>
 <h5>标题</h5>
 <h6>标题</h6>
</div>

在这里插入图片描述
在标题内还可以包含 small 标签或赋予 .small 类的元素，可以用来标记副标题。

<div class="container">
 <h1>标题 <small>副标题</small></h1>
<h2>标题 <small>副标题</small></h2>
<h3>标题 <small>副标题</small></h3>
<h4>标题 <small>副标题</small></h4>
<h5>标题 <small>副标题</small></h5>
<h6>标题 <small>副标题</small></h6>
</div>

在这里插入图片描述
页面主体
p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

<p>
    CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</p>
<p>
    CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</p>

在这里插入图片描述
中心内容
通过添加 .lead 类可以让段落突出显示。

<p class="lead">
    CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</p>
<p>
    CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</p>

在这里插入图片描述
内联文本元素
用mark来标记

<p class="lead">
    <mark>CSDN</mark>是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</p>

在这里插入图片描述
被删除的文本
用del来删除

<p>
    <del>
        CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
    </del>
</p>

在这里插入图片描述
无用文本
对于没用的文本使用 s标签。

<p>
    <s>
        CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
    </s>
</p>

在这里插入图片描述
插入文本
额外插入的文本使用 ins标签。

<ins> CSDN是全球知名中文IT技术交流平台</ins>

带下划线的文本
为文本添加下划线，使用 u标签。

<u> CSDN是全球知名中文IT技术交流平台</u>

着重
通过增加 font-weight 值强调一段文本。

<strong>CSDN是全球知名中文IT技术交流平台</strong>

斜体
用斜体强调一段文本。

<em>CSDN是全球知名中文IT技术交流平台</em>

对齐
多种对齐方式

<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
<p class="text-nowrap">无换行</p>

改变大小写
通过这几个类可以改变文本的大小写。

<p class="text-lowercase">小写</p>
<p class="text-uppercase">大写</p>
<p class="text-capitalize">首字母大写</p>

缩略语
使用abbr，实现对英文的缩写

<abbr title="bootstrap">bstp</abbr>

首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加
可以保留需要的样式。

<address>
  <strong>邮箱</strong><br>
  <a href="mailto:#">111111@163.com</a>
</address>

引用
在你的文档中引用其他来源的内容，默认：

<blockquote>
  <p>CSDN是全球知名中文IT技术交流平台。</p>
</blockquote>

说明命名来源：
添加 footer 用于标明引用来源。来源的名称可以包裹进 cite标签中。

<blockquote>
  <p>CSDN是全球知名中文IT技术交流平台</p>
  <footer>Someone famous in <cite title="baidu">baidu</cite></footer>
</blockquote>

另一种展示风格:
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

<blockquote class="blockquote-reverse">
      <p>CSDN是全球知名中文IT技术交流平台</p>
      <footer>Someone famous in <cite title="baidu"> baidu</cite></footer>
    </blockquote>

代码

内联代码
通过 code 标签包裹内联样式的代码片段。

Please believe, <code>&lt;sunshine &gt;</code> always comes after wind and rain

用户输入
通过 kbd标签标记用户通过键盘输入的内容。

<kbd><kbd>Ctrl</kbd> +windows <kbd>+S</kbd></kbd> is a screenshot function

在这里插入图片描述

代码块
多行代码可以使用 pre 标签。为了正确的展示代码，注意将尖括号做转义处理。

<pre>&lt;p&gt;Code content...&lt;/p&gt;</pre>

在这里插入图片描述

变量
通过 var标签标记变量。y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

程序输出
通过 samp标签来标记程序输出的内容。

<samp>This is the output of the program.</samp>

表格

<div>
        <h1>数据表格</h1>
            <table  class="table">
                <thead>
                   <tr>  <th>ID</th> <th>姓名</th>  <th>年龄</th>  </tr>
                </thead>
                <tbody>
                    <tr> <td>10</td> <td>aa</td> <td>22</td> </tr>
                    <tr> <td>11</td> <td>bb</td> <td>23</td> </tr>
                    <tr> <td>12</td> <td>cc</td> <td>12</td> </tr>
                    <tr> <td>13</td> <td>dd</td> <td>23</td> </tr>
                </tbody>
            </table>
    </div>

在这里插入图片描述

条纹状表格
通过 .table-striped 类可以给之内的每一行增加斑马条纹样式。

<table class="table table-striped">
  ...
</table>

带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
  ...
</table>

鼠标悬停
通过添加 .table-hover 类可以让中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
  ...
</table>

紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<table class="table table-condensed">
  ...
</table>

状态类
通过这些状态类class可以为行或单元格设置颜色。
.active :鼠标悬停在行或单元格上时所设置的颜色
.success :标识成功或积极的动作
.info :标识普通的提示信息或动作
.warning :标识警告或需要用户注意
.danger :标识危险或潜在的带来负面影响的动作

<tr>
   <th class="active" >active</th>
    <th class="success">success</th>
    <th class="warning">warning</th>
    <th class="danger">danger</th>
    <th class="info">info</th>
</tr>

在这里插入图片描述

表单

<div class="container">
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">文本输入框</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="文本输入框">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码输入框</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码输入框">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">上传文件</label>
            <input type="file" id="exampleInputFile">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Check me out
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</div>

在这里插入图片描述
注意：不要将表单组和输入框组混合使用
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

<div class="container">
    <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
            <div class="input-group">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                <div class="input-group-addon">.00</div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Transfer cash</button>
    </form>
</div>

在这里插入图片描述

添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

在这里插入图片描述

按钮

可作为按钮使用的标签或元素
为、或元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

在这里插入图片描述
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

在这里插入图片描述
尺寸
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

在这里插入图片描述

图片

图片形状
通过为元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

辅助类

情境文本颜色
通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

情境背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

让内容块居中
为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。

<div class="center-block">...</div>

<style>
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}
</style>

3.Bootstrap常用组件介绍与示例

字体图标

在页面上鼠标右键–检查–选择图标–复制
在这里插入图片描述

下拉菜单

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

<div class="dropdown">
<!----class="dropup"让菜单向上弹出>
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

分割线

为下拉菜单添加一条分割线，用于将多个链接分组。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

作为额外元素的多选框和单选框

可以将多选框或单选框作为额外元素添加到输入框组中。

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

默认样式的导航条

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

表单

将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。使用对齐选项可以规定其在导航条上出现的位置。

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

路径导航

在一个带有层次的导航结构中标明当前页面的位置。
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

分页

为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

警告框

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

带标题的面版

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的

-

标签，添加一个预定义样式的标题。不过，

-

标签的字体大小将被 .panel-heading 的样式所覆盖。

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>