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. 【机器学习】--Kmeans从初识到应用

    一.前述 Kmeans算法一般在数据分析前期使用,选取适当的k,将数据分类后,然后分类研究不同聚类下数据的特点. Kmeans算法是一种无监督的算法. 常用于分组,比如用户偏好. 二.概念及原理 Km ...

  2. C#版 - HDUoj 5391 - Zball in Tina Town(素数) - 题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. HDUoj 5 ...

  3. 从零开始学习PYTHON3讲义（七）条件分支和哥德巴赫猜想

    <从零开始PYTHON3>第七讲 人生是由无数个选择组成,每个选择都有不同的限定条件.现在来说人生有点早是吧:)不过事实的确是这样的. 程序也充满着选择,满足不同的条件,则运行不同的运算. ...

  4. Django中的templates(你的HTML页面放哪里)

    本文回答Django里面的HTML文件应该怎么放,以及Django是如何查找模板文件的. 到目前为止我们没有使用HTML页面,在之前的说明中所有内容都是写死在程序里的,如果你想改变内容就要修改代码.但 ...

  5. HBase BulkLoad批量写入数据实战

    1.概述 在进行数据传输中,批量加载数据到HBase集群有多种方式,比如通过HBase API进行批量写入数据.使用Sqoop工具批量导数到HBase集群.使用MapReduce批量导入等.这些方式, ...

  6. 【ASP.NET Core快速入门】（十三）Individual authentication 模板、EF Core Migration

    Individual authentication 模板 我们首先用VSCode新建一个mvc的网站,这个网站创立的时候回自动为我们创建Identuty Core以及EF Core的代码示例,我们可以 ...

  7. TFS2012服务端环境搭建

    微软提供的TFS(Team Foundation Server)是为开发者团队提供的一个集 代码仓库.任务管理.文档管理等众多强大功能的服务平台. 1.TFS依赖项 目前TFS已经出到了2018版本, ...

  8. Pycharm远程调试原理及配置

    工作中使用Pycharm作为python开发的IDE,作为专业的python集成开发环境,其功能之强大令人折服.开发过程中Debug是必不可少的.平时经常使用Pycharm的remote debug功 ...

  9. BUG心得

    在<程序员,你会从 Bug 中学习么?>一文中,我写了我是怎样追踪这些年遇到的最有趣 bug 的.最近我重新浏览了这所有的 194 个条目(历时 13 年),看看我从这些 bug 中学到了 ...

  10. linux查看和修改PATH环境变量的方法

    查看PATH:echo $PATH以添加mongodb server为列修改方法一:export PATH=/usr/local/mongodb/bin:$PATH//配置完后可以通过echo $PA ...