Bootstrap -- 缩略图、进度条、列表组、面板

1. 缩略图

大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：
    (1) 在图像周围添加带有 class .thumbnail 的 <a> 标签。
    (2) 这会添加四个像素的内边距（padding）和一个灰色的边框。
    (3) 当鼠标悬停在图像上时，会动画显示出图像的轮廓

使用缩略图：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="col-md-3">

        <div class="thumbnail">

            <img src="./img/test.jpg"  alt="测试图片1">

            <div class="caption">

                <h3>测试图片1</h3>

                <p>Windows10屏幕截图1</p>

                <p>

                    <a href="#" class="btn btn-primary" role="button">

                        按钮1

                    </a>

                    <a href="#" class="btn btn-default" role="button">

                        按钮2

                    </a>

                </p>

            </div>

        </div>

    </div>

    <div class="col-md-3">

        <div class="thumbnail">

            <img src="./img/test.jpg"  alt="测试图片2">

            <div class="caption">

                <h3>测试图片2</h3>

                <p>Windows10屏幕截图2</p>

                <p>

                    <a href="#" class="btn btn-primary" role="button">

                        按钮1

                    </a>

                    <a href="#" class="btn btn-default" role="button">

                        按钮2

                    </a>

                </p>

            </div>

        </div>

    </div>

</body>

</html>

缩略图效果：

2. 进度条

使用进度条样式：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="progress">

        <div class="progress-bar progress-bar-success" role="progressbar"

             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

             style="width: 60%;">

            <span class="sr-only">90% 完成</span>

        </div>

    </div>

    <div class="progress progress-striped active">

        <div class="progress-bar progress-bar-info" role="progressbar"

             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

             style="width: 20%;">

            <span class="sr-only">50% 完成</span>

        </div>

    </div>

</body>

</html>

样式效果：

3. 列表组: 列表组件用于以列表形式呈现复杂的和自定义的内容。

使用列表组样式：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <ul class="list-group">

        <li class="list-group-item">学习C#书籍</li>

        <li class="list-group-item">编写C#代码</li>

        <li class="list-group-item">优化性能</li>

        <li class="list-group-item">

            <span class="badge">新</span>

            学习目标

        </li>

    </ul>

</body>

</html>

样式效果：

4. 面板：面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可。

使用面板样式：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h3 class="panel-title">面板1--学习板块</h3>

        </div>

        <div class="panel-body">

            这里是学习相关的内容

        </div>

    </div>

    <div class="panel panel-success">

        <div class="panel-heading">

            <h3 class="panel-title">面板2--娱乐版块</h3>

        </div>

        <div class="panel-body">

            这里是娱乐相关的内容

        </div>

    </div>

</body>

</html>

样式效果：

Bootstrap -- 缩略图、进度条、列表组、面板的更多相关文章

  1. Bootstrap 学习笔记6 列表组面板嵌入组件

    列表组组件: 面板组件:

  2. 第二百四十二节，Bootstrap列表组面板和嵌入组件

    Bootstrap列表组面板和嵌入组件 学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应 式嵌入组 ...

  3. Bootstrap 各种进度条详解

    一:默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class . ...

  4. Bootstrap(11)列表组面板和嵌入组件

    一．列表组组件列表组组件用于显示一组列表的组件.//基本实例 <ul class="list-group"> <li class="list-group ...

  5. Bootstrap(10) 进度条媒体对象和 Well 组件

    一．Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...

  6. Bootstrap各种进度条的实例讲解

    本章将讲解 Bootstrap 进度条.在本教程中,您将看到如何使用bootstrap教程.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Interne ...

  7. Bootstrap学习 进度条

    本文将介绍Bootstrap进度条,在本文中你将看到如何使用Bootstrap创建加载,重定向或动作状态的进度条 bootstrap进度条使用CSS3过渡和动画来获得该效果.Internet Expl ...

  8. Bootstrap学习2--组件-列表组

    备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html 1.列表组 列表组是Bootstrap框架新增的一个组件 ...

  9. bootstrap组件---进度条

    <div class="progress"> <div class="progress-bar progress-bar-success" r ...

  10. bootstrap.css 进度条没有动画效果

    操作系统设置会影响浏览器的行为 Win+R 输入 sysdm.cpl ,3 打开 性能 的 设置 确保 窗口内动画控件和元素 被勾选

随机推荐

  1. Spring多线程批量发送邮件（ThreadPoolTaskExecutor）

    1,需求:使用多线程批量发送邮件 需要批量发送邮件大概400封左右,但是因为发送邮件受网络限制,所以经常导致等待超时.所以就想到了使用多线程来发邮件,因为是异步的所以返回结果不受发邮件影响. 2,思路 ...

  2. 又拍云 API 使用的那些小事

    又拍云提供了丰富的 API 调用,为了减少用户在初次接入时可能会遇到的坑”,本文将对又拍云常用的 API 使用方法做个简单的梳理,力求让业务接入变得更简单,更高效. 目前我们的 API 主要有四大类, ...

  3. C# 调用IP库（QQWry.Dat）查询IP位置及自动升级IP库方法【转】

    前言 C# 用IP地址(123.125.114.144)查询位置(北京市百度公司)的东西,非常好用也非常方便,可手动升级刷新IP库,一次编码永久收益,可支持winform.asp.net等程序. 本文 ...

  4. 并发编程（三）—— ReentrantLock的用法

    ReentrantLock是Java并发包中提供的一个可重入的互斥锁.ReentrantLock和synchronized在基本用法,行为语义上都是类似的,同样都具有可重入性.只不过相比原生的Sync ...

  5. 根据bootstrap框架实现移动端触摸滑动的方法

    有一个移动端的项目要求用jquery+bootstrap,其中有一个轮播图,需求是要求可以手触滑动,但是bootstrap中没有写手触滑动的方法,自己琢磨着写了出来,供大家参考. $(function ...

  6. SpringBoot入门教程(八)配置logback日志

    Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和logback-access.logback-c ...

  7. linux中文件的三种time（atime,mtime,ctime）

    linux下文件有3个时间的,分别是atime,mtime,ctime.有些博友对这3个时间还是比较迷茫和困惑的,我整理了下,写下来希望对博友们有所帮助. 1 这三个time的含义 简名 全名 中文名 ...

  8. SSH学习

    简介 SSH或Secure Shell是一种远程管理协议,允许用户通过Internet控制和修改远程服务器.该服务是作为未加密Telnet的安全替代品创建的,它使用加密技术确保与远程服务器之间的所有通 ...

  9. 【代码笔记】Web-CSS-CSS Border(边框)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  10. html iframe高度自适应

    想到的一种办法是,在父页面里获取子页面的高度,在父页面onlod里把获取到子页面的高度赋值给父页面iframe标签,不过这种方法感觉不是很好,因为浏览器兼容性不好,获取不到高度 这种方法有两种写法 & ...