页头与缩略图

页头

页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔

xxxxxxxxxx
<div class="page-header">
    <h1>Example page header <small>Subtext for header</small></h1>
</div>

缩略图

通过缩略图组件扩展 Bootstrap 的栅格系统，可以很容易地以网格的方式展示图像、视频、文本等内容

默认样式的实例

Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片

xxxxxxxxxx
<div class="row">
    <div class="col-md-3">
        <a href="#" class="thumbnail">
            <img src="./1.jpg" alt="...">
        </a>
    </div>
    ...
</div>

自定义内容

添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内

xxxxxxxxxx
<div class="row">
    <div class="col-md-3">
        <a href="#" class="thumbnail">
            <img src="./1.jpg" alt="...">
            <div class="caption">
                <h3>美女</h3>
                <p>这是一个大美女哦</p>
            </div>
        </a>
    </div>
</div>

实时效果反馈

1. 下列可以实现缩略图类是哪一个：

A .page-header

B .thumbnail

C .jumbotron

D .badge

答案

1=>B