一、Bootstrap徽章
用于显示一些最新收到的消息、需要多少审批的消息等,给span样式应用.badge样式即可,示例代码:
<h1>JavaScript权威指南<span class="badge">58</span></h1>
效果:
给它加一个pull-left样式:
<h1>JavaScript权威指南<span class="badge pull-left">58</span></h1>
效果:
注意:用户可以自己定义它的大小,背景色等。。。。
二、大屏幕展播
在设计网页布局的时候,经常会有一些大屏(或大块头)内容的显示,.jumbotron样式提供了这个效果,示例代码:
效果:<div class="jumbotron"> <h1>Hello world!</h1> <p>这个可以是一个很大的内容段落</p> </div>
另外,将其放在<div class="container"></div>可以显示圆角效果:
<div class="container"> <div class="jumbotron"> <h1>Hello world!</h1> <p>这个可以是一个很大的内容段落</p> </div> </div>效果:
三、页面标题
Bootstrap中的.page-header样式提供了类似h1元素的显示效果,只不过margin和底部padding距离稍大一些,底部有1像素的边框稍大一些。使用方式如下:
<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div>
效果:
css源码:
.page-header {
padding-bottom: 9px; /* 设置底部内边距*/
margin: 40px 0 20px; /* 设置上下外边距*/
border-bottom: 1px solid #eee; /* 设置底部边框为1像素,并设置颜色*/
}
四、缩略图
所谓缩略图,就是在一个图片四周还有一内的内边距,使用 .thumbnail样式,示例代码:
<div class="row"> <div class="col-md-2"> <a href="#" class="thumbnail"> <img data-src="img src" src="s.jpg"> </a> </div> </div>效果: