欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

● 页头组件

.page-header

<div class="page-header">
    <div class="container">
        <h1>我是大标题,<small>我是小标题</small></h1>
    </div>
</div>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

● 缩略图组件

设置一个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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

<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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

<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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

缩略图组件增加自定义内容

可以向缩略图添加各种 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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

● 警告框组件

.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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

带关闭按钮的警告框

添加带有data-dismiss="alert" data 属性的<button>元素,并且使用样式.close

<div class="alert alert-success">
   我是一个警告框!
    <button class="close" data-dismiss="alert">&times;</button>
</div>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

带超链接的警告框

.alert-link

<div class="alert alert-success">
    我是一个警告框!
    <a href="#" class="alert-link">查看详细信息</a>
    <button class="close" data-dismiss="alert">&times;</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学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

● 进度条组件

为当前工作流程或动作提供实时反馈
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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

结合情景的进度条

.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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

条纹进度条(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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

动画进度条

只有条纹进度条可以使用动画
div.progressdiv.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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

● 媒体对象组件

媒体对象组件可以包含图片、音视频,以达到对象和文本组合显示的样式效果(如博客评论)
两种形式:.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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

.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>

【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

相关标签: bootstrap