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

最新推荐文章于 2022-06-14 07:25:27 发布

sunraito

最新推荐文章于 2022-06-14 07:25:27 发布

阅读量320

点赞数

分类专栏： Bootstrap学习笔记(李炎恢版) 文章标签： bootstrap

本文链接：https://blog.csdn.net/sunraito/article/details/81749668

版权

Bootstrap学习笔记(李炎恢版) 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

十、巨幕页头缩略图和警告框组件

学习内容

巨幕组件
页头组件
缩略图组件
给缩略图增加自定义内容
警告框组件
带关闭按钮的警告框
带超链接的警告框

● 巨幕组件

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">&times;</button>
</div>

这里写图片描述

带超链接的警告框

.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 进度条使用 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>

这里写图片描述

sunraito

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件

十、巨幕页头缩略图和警告框组件学习内容● 巨幕组件 1.巨幕组件主要是展示网站的关键性区域 2.两种形式，一种是固定在一个width范围内，有圆角；另一种是width全屏，没有圆角快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q插入链接 Ctrl + L插入代码 Ctrl + K插入图片 ...
复制链接

扫一扫