这里介绍一下panel

--标 题 样 式--

h1. Bootstrap 标题 Secondary text

h2. Bootstrap 标题 Secondary text

h3. Bootstrap 标题 Secondary text

h4. Bootstrap 标题 Secondary text

h5. Bootstrap 标题 Secondary text

h6. Bootstrap 标题 Secondary text

.lead 中心内容突出显示

--特 殊 排 版 样 式--

这是一行引用<blockquote>

--代 码 排 版--

内联代码code标签<code>示例

键盘输入样式kbd标签 ctrl + ,

代码块预处理pre标签（带有灰色背景）

<p>Sample text here...</p>

变量标签var
y = mx + b

samp标签标记
程序输出的内容

--对 齐 版 式--

Left text-left

text-center

text-right

text-justify

class="text-nowrap" —— 文本不换行

--情 景 文 本--

这里使用了div.well

--警 告 框--

--响 应 式--

-- 列 表 --

-- 表 格 --

--表 单 样 式--

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    <p class="help-block">Example block-level help text here.</p>
  </div>
</form>

--表 单 状 态--

--表 单 尺 寸--

--表 单 组--

<a>、<button> 或 <input> 元素添加按钮类.btn（必写）即可使用 Bootstrap 提供的样式。

（默认样式）btn-default （首选项）btn-primary （成功）btn-success （一般信息）btn-info （警告）btn-warning （危险）btn-danger

（大按钮）btn-lg （默认尺寸） （小按钮）btn-sm （超小尺寸）Extra small button

按钮状态

.active类 Primary button / disabled 属性 Primary button

--特 殊 按 钮 / ico--

--Glyphicons 字 体 图 标--

使用注意事项：

创建一个嵌套的 空白的<span> 标签，并将.glyphicon应用到这个标签上。然后根据所需，添加图标类名称

注：1、建议添加aria-hidden属性为true，目的是使图标仅供装饰用
2、自测在火狐下加载失败，chrome等有效 解决办法：
① 字体文件的位置尽量为根目录下（默认为../fonts/目录）
② 在火狐的地址栏中输入“about:config”，进入后，搜索“security.fileuri.strict_origin_policy”，键值改为false，即可。

--下 拉 菜 单--

--按 钮 组/ 工 具 栏--

圆角图片.img-rounded	圆形图片.img-circle	略缩图.img-thumbnail
.img-responsive 类可以让图片支持响应式布局。
略缩图标签 略缩图描述文字 Button Button 略缩图标签 略缩图描述文字 Button Button 略缩图标签 略缩图描述文字 Button Button

--div.media 媒 体 对 象--

.media heading 媒体标题

媒体内容

div.media

div.media-left / .media-right > a > img.media-object

div.media-body > .media-heading

图片与文字的垂直对齐
.media-top / .media-middle /.media-bottom

.media heading 媒体标题

媒体内容

--.breadcrumb 面 包 屑 导 航 --

ol.breadcrumb

1. Home
2. Library
3. Data

--.nav 导 航 --

--.navbar 导 航 条 --

.navbar-default

.navbar-inverse

--.pagination 翻 页 导 航 --

标签示例

-- 标 签 页 切 换 / 工 具 条 / 弹 出 提 示 框 --

-- 折 叠 collapse --

-- Affix 滚 动 监 听 导 航 固 定 --

模态框触发按钮

-- 滚 动 监 听 / Affix 导 航 固 定 --

Affix 用法

1. 通过data-属性为 目标导航元素（本例中的ul），添加data-spy="affix"。

   1

2. • 页面加载开始，导航为.affix-top
   • 滚动页面到达触发位置，导航切换为fixed定位的.affix
   • 接近底部触发位置（该项可选），导航切换为.affix-bottom
3. 通过data-设置：data-offset-top / bottom设置触发点affix-bottom的position属性设置为absolute
4. 通过JavaScript：

   1

   $('导航元素').affix({
     offset: {
       top: ,
       bottom: 
     } 
   })

affix 事件

• 为监听对象添加 data-spy="scroll" ；监听成功后的触发对象（如导航） data-target="#"
• 一般监听对象为 body，position 应为 relative；若是其他对象，务必设置 height 及 overflow-y:scroll

-- carousel 滚动展示条 --

第一张

第二张

第三张

Previous Next

<div id="ID" class="carousel slide" data-ride="carousel">
  ... 
</div>

<!-- 主图片区 -->
<div class="carousel-inner" role="listbox">
    <div class="item active">
    <img src="..." alt="...">
  <div class="carousel-caption">...</div>
  </div>
  <div class="item">
    <img src="..." alt="...">
    <div class="carousel-caption">...</div>
  </div>
...</div>

<!-- 下方导航圆点 -->
<ol class="carousel-indicators">
  <li data-target="#ID" data-slide-to="0" class="active"></li>
  <li data-target="#ID" data-slide-to="1"></li>
  <li data-target="#ID" data-slide-to="2"></li>
</ol>

<!-- 左右控制按钮 -->
<a class="left carousel-control" href="#ID" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#ID" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>