【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件
程序员文章站
2022-04-29 22:43:22
...
十、巨幕页头缩略图和警告框组件
学习内容
- 巨幕组件
- 页头组件
- 缩略图组件
- 给缩略图增加自定义内容
- 警告框组件
- 带关闭按钮的警告框
- 带超链接的警告框
● 巨幕组件
1.巨幕组件主要是展示网站的关键性区域
2.两种形式，一种是固定在一个width范围内，有圆角；另一种是width全屏，没有圆角
<!--container写在外面，巨幕被固定在一个范围内-->
<div class="container">
<div class="jumbotron">
<h1>我是一个巨幕</h1>
<p>这是巨幕的简介...</p>
<p><a href="#" class="btn btn-info">点击进入</a></p>
</div>
</div>
<!--jumbotron写在外面，宽为100%-->
<div class="jumbotron">
<div class="container">
<h1>我是一个巨幕</h1>
<p>我是巨幕的简介...</p>
<p><a href="#" class="btn btn-danger">点击离开</a></p>
</div>
</div>● 页头组件
.page-header
<div class="page-header">
<div class="container">
<h1>我是大标题，<small>我是小标题</small></h1>
</div>
</div>● 缩略图组件
设置一个class为
.thumbnail的div包裹<img>，图片如需点击，直接将<div>替换成<a>更好，配合栅栏系统使用。
但在一行只有一张图片时，样式并不好看。一行两张以上效果更好，所以建议不要设置.col-*-12的样式。
具有响应式功能。
其实直接用img的.img-thumbnail样式同样可以实现这个效果。样式稍有不同，注意对比。
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="thumbnail">
<img src="image/1.jpg" alt="">
</div>
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="image/1.jpg" alt="">
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="image/1.jpg" alt="">
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="image/1.jpg" alt="">
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="image/1.jpg" alt="">
</div>
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img class="img-thumbnail" src="image/1.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img class="img-thumbnail" src="image/1.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img class="img-thumbnail" src="image/1.jpg" alt="">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img class="img-thumbnail" src="image/1.jpg" alt="">
</div>
</div>
</div>缩略图组件增加自定义内容
可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。
1.把带有 class.thumbnail的标签固定为<div>
2.在.thumbnail的<div>下，增加class为.caption的<div>，你想添加的任何标题、段落或按钮，都放在这个<div>下
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">
<div class="thumbnail">
<img src="image/1.jpg" alt="">
<div class="caption">
<h3>图片标题</h3>
<p>图片简介</p>
<p><a href="#" class="btn btn-info">点击查看</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<div class="thumbnail">
<img src="image/1.jpg" alt="">
<div class="caption">
<h3>图片标题</h3>
<p>图片简介</p>
<p><a href="#" class="btn btn-info">点击查看</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<div class="thumbnail">
<img src="image/1.jpg" alt="">
<div class="caption">
<h3>图片标题</h3>
<p>图片简介</p>
<p><a href="#" class="btn btn-info">点击查看</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<div class="thumbnail">
<img src="image/1.jpg" alt="">
<div class="caption">
<h3>图片标题</h3>
<p>图片简介</p>
<p><a href="#" class="btn btn-info">点击查看</a></p>
</div>
</div>
</div>
</div>
</div>● 警告框组件
.alert .alert-success .alert .alert-info .alert .alert-warning .alert .alert-danger
<div class="alert alert-success">
我是一个警告框！
</div>
<div class="alert alert-info">
我是一个警告框！
</div>
<div class="alert alert-warning">
我是一个警告框！
</div>
<div class="alert alert-danger">
我是一个警告框！
</div>带关闭按钮的警告框
添加带有
data-dismiss="alert"data 属性的<button>元素，并且使用样式.close
<div class="alert alert-success">
我是一个警告框！
<button class="close" data-dismiss="alert">×</button>
</div>带超链接的警告框
.alert-link
<div class="alert alert-success">
我是一个警告框！
<a href="#" class="alert-link">查看详细信息</a>
<button class="close" data-dismiss="alert">×</button>
</div>十一、进度条媒体对象和Well组件
学习内容
- Well组件
- 进度条组件
- 基本进度条
- 结合场景的进度条
- 条纹进度条
- 动画进度条
- 堆叠进度条
● Well组件
Well 是一种会引起内容凹陷显示，或插图效果的容器
除默认效果，还有.well-lg.well-sm两种尺寸大小
.well
<div class="well">我爱北京*-default</div>
<div class="well well-lg">我爱北京*-lg</div>
<div class="well well-sm">我爱北京*-sm</div>● 进度条组件
为当前工作流程或动作提供实时反馈
Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。
基本进度条
外层一个div
.progress，内层一个div.progress-bar，内层div给予width属性style="width:60%"
<div class="progress">
<div class="progress-bar" style="width:60%">
60%
</div>
</div>结合情景的进度条
.progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:60%;">progress-bar-success</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:70%">progress-bar-info</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:80%">progress-bar-warning</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:90%">progress-bar-danger</div>
</div>条纹进度条(IE10+支持)
两种实现方法：
1.外围的div.progress增加一个class.progress-striped，情景进度条同样适用
2.内层的div.progress-bar增加一个class.progress-bar-striped,情景进度条同样适用
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:60%">default</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-danger" style="width:60%;">progress-bar-danger</div>
</div>动画进度条
只有条纹进度条可以使用动画
div.progress或div.progress-bar增加class.active即可
<div class="progress progress-striped ">
<div class="progress-bar progress-bar-success active" style="width:60%">default</div>
</div>
<div class="progress active">
<div class="progress-bar progress-bar-striped progress-bar-danger" style="width:60%;">progress-bar-danger</div>
</div>堆叠进度条
把多个进度条放在相同的
div.progress中即可实现堆叠
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:20%;">20%</div>
<div class="progress-bar progress-bar-into" style="width:30%">30%</div>
<div class="progress-bar progress-bar-warning" style="width:50%">50%</div>
</div>● 媒体对象组件
媒体对象组件可以包含图片、音视频，以达到对象和文本组合显示的样式效果（如博客评论）
两种形式：.media和.media-list
.media
主要样式有：
1..media
2..media-left/.media-right.media-bottom
3..media-object
4..media-body
5..media-heading
<div class="media">
<div class="media-left"><img src="image/small.jpg" alt="" class="media-object"></div>
<div class="media-body">
<h3 class="media-heading">我是留言标题</h3>
<p>
我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~
</p>
<!--嵌套-->
<div class="media">
<div class="media-left"><img src="image/small.jpg" alt="" class="media-object"></div>
<div class="media-body">
<h3 class="media-heading">我是留言标题</h3>
<p>
我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~
</p>
</div>
</div>
</div>
</div>
<div class="media">
<div class="media-left"><img src="image/small.jpg" alt="" class="media-object"></div>
<div class="media-body">
<h3 class="media-heading">我是留言标题</h3>
<p>
我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~
</p>
</div>
</div>
.media-list
用法大同小异，注意ul.media-list>li.media，以及嵌套时li.media换成div.media
<ul class="media-list">
<li class="media">
<div class="media-left"><img src="image/small.jpg" alt="" class="media-object">
</div>
<div class="media-body">
<div class="media-heading">
我是留言标题
</div>
<p>
我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~
</p>
<!--嵌套-->
<div class="media">
<div class="media-left"><img src="image/small.jpg" alt="" class="media-object">
</div>
<div class="media-body">
<div class="media-heading">
我是留言标题
</div>
<p>
我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~
</p>
</div>
</div>
</div>
</li>
<li class="media">
<div class="media-left"><img src="image/small.jpg" alt="" class="media-object">
</div>
<div class="media-body">
<div class="media-heading">
我是留言标题
</div>
<p>
我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~我是留言内容~
</p>
</div>
</li>
</ul>