Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板

最新推荐文章于 2023-10-17 11:53:00 发布

VIP文章 gengfu_AI

最新推荐文章于 2023-10-17 11:53:00 发布

阅读量927

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/gengfu_php/article/details/78165782

版权

1 缩略图

缩略图（一）

缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。

Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
            </a>
        </div>
    </div>
</div>

上面的结构表示的是在宽屏幕（可视区域大于768px）的时候，一行显示四个缩略图:
这里写图片描述
在窄屏（可视区域小于768px）的时候，一行只显示两个缩略图：

1、布局实现的主要是依靠于Bootstrap框架的网格系统，而缩略图对应的样式代码：/bootstrap.css文件第4402行～第4426行/
2、class=”col-xs-6 col-md-3”的意思是在小屏幕时，一排显示两个缩略图，而大屏幕时一排显示四个缩略图。
3、col-xs-6 col-md-3 12/6=2 12/3=4 所以xs小屏是2个一排 md 中屏是4个
4、
.col-xs- 超小屏幕手机 (<768px)

.col-sm- 小屏幕平板 (≥768px)

.col-md- 中等屏幕桌面显示器 (≥992px)

.col-lg- 大屏幕大桌面显示器 (≥1200px)

1.2 缩略图（二）

除了这种方式之外，还可以让缩略图配合标题、描述内容，按钮等.

在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等。

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>  
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p> Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>   
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                    <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                    <p>
                        <a href="##" class="btn btn-primary">开始学习</a>
                        <a href="##" class="btn btn-info">正在学习</a>
                    </p>
            </div>   
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>   
        </div>
    </div>
</div>

这里写图片描述

以下内容取自评论，未作验证，可以帮助自己理解

1、caption只有在thumbnail内部其样式才能生效

.thumbnail .caption {
  padding: 9px;
  color: #333;
}

2、caption:标题的意思. 很智能的插件.是说明型文字。

2 警示框

在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示：

2.1 警示框–默认警示框

Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果，通过追加相应的类即可：

1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；
2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；
3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；
4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>

这里写图片描述

2.2 警示框–可关闭的警示框

有些警示框带有关闭按钮，点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功！
</div>
<div class="alert alert-info alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    请输入正确的密码
</div>
<div class="alert alert-warning alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    您已操作失败两次，还有最后一次机会
</div>
<div class="alert alert-danger alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    对不起，您输入的密码有误
</div>

这里写图片描述
代码解析及使用方法：

1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2、在button标签中加入class=”close”类，实现警示框关闭按钮的样式。
3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss=”alert””（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

在样式上，需要在基本警示框“alert”的基础上添加“alert-dismissable”样式，这样就可以实现带关闭功能的警示框。

/*bootstrap.css文件第4447行～第4455行*/
.alert-dismissable {
  padding-right: 35px;
}
.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

有评论说不要类.alert-dismissable也可以实现关闭警示框功能，从上面代码可以看出是可以的，因为.alert-dismissable与.close的样式设置基本一致，而前者多了一个padding-right: 35px ;

× 表示乘号<

最低0.47元/天解锁文章

gengfu_AI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板

1 缩略图缩略图（一）缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。<div class="container"> <div class="row"> <div
复制链接

扫一扫