Bootstrap入门(十九)组件13:页头与缩略

1.页头

2.默认的缩略图

3.自定义缩略图

页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)。

先引入CSS文件

<link href="bootstrap.min.css" rel="stylesheet">

1.页头

需要把<hn>标签放在一个class="page-header"的div当中即可

     <div class="page-header">
<h1>hello world?<small>hello world</small></h1>
</div>

效果(文字下方是有一条线的,箭头指着,这里看不清楚)
Bootstrap入门(十九)组件13:页头与缩略图-LMLPHP

根据页面需求,我们可以嵌入其他

2.默认的缩略图

(也就是只有单纯的图片)

首先要制定一个class为row的div

注意这里用到了栅格

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

效果,这里我们可以看到一张图片,而且是带有一个圆角的外边框的,鼠标略过,外框颜色会变深色一点

Bootstrap入门(十九)组件13:页头与缩略图-LMLPHP

3.自定义缩略图

与默认样式不同,自定义缩略图可以搭配上文字性的描述,也可以嵌入按钮

     <div class="row">
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="1.png">
<div class="caption">
<h3>标题h3</h3>
<p>内容</p>
<p>
<a href="#" class="btn btn-primary" role="button">内容链接1</a>
<a href="#" class="btn btn-default" role="button">内容链接12</a>
</p>
</div>
</div>
</div>
</div>

效果,可以选择来制作成一些投票等

Bootstrap入门(十九)组件13:页头与缩略图-LMLPHP

05-01 00:34