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. HTTP请求定义不同Content-Type及在SpringMVC如何接收（必看！！！）

    前言最近在和三方对接的时候发现了一些问题,这也是我写这篇文章的原因.我大概花了三天时间把这些内容了解,实践,整理,然后分享给大家,希望对大家会有所帮助.废话不多说,在和三方对接的时候我们规定使用jso ...

  2. 开启 IPv6 新时代，升级后的 IPv6 厉害在哪？

    IPv6,Internet Protocol Version 6,从字面翻译 “互联网协议第 6 版”,它是IETF设计的用于替代现行版本 IP 协议-IPv4 协议,被称作“下一代互联网协议”.早在 ...

  3. Zabbix通过IPMI监控HPE服务器硬件

    IPMI是智能型平台管理接口(Intelligent Platform Management Interface)的缩写,是管理基于 Intel结构的企业系统中所使用的外围设备采用的一种工业标准,该标 ...

  4. MVC从Controller到View的呈现

    图说MVC底层运行机制: 当路由机制已经激活Controller并InvokeAction后,如果返回的是View, 则ViewResult基于View呈现的请求响应机制内部借助MVC提供的View引 ...

  5. C# 8中的范围类型(Range Type)

    C# 8.0中加入了一个新的范围类型(Range Type). 这里我们首先展示一些代码,并一步一步为代码添加一些不同的东西, 为大家展示一下范围类型的功能和用法. 我们最原始的代码如下: stati ...

  6. Visual Studio 2017中使用Libman管理客户端库

    什么是Libman 微软在Visual Studio 2017 15.8版本中内嵌了一个新的工具Library Manager. Library Manager(简称Libman)是一个客户端库管理工 ...

  7. C++版 - 剑指Offer 面试题35：第一个只出现一次的字符 解题报告(华为OJ034-找出字符串中第一个只出现一次的字符)

    面试题35:第一个只出现一次的字符 题目:在一个字符串中找到第一个只出现一次的字符.如输入abaccdeff,则输出b.(2006年google的一道笔试题.) 分析: 首先应向确认一下是ASCII字 ...

  8. 解读经典《C#高级编程》泛型 页114-122.章4

    前言 本章节开始讲解泛型..Net从2.0开始支持泛型,泛型不仅是C#的一部分,也与IL代码紧密集成.所以C#中泛型的实现非常优雅.相对于C#,Java是后期引入的泛型,受限于最初的设计架构,就实现的 ...

  9. es简单打造站内搜索

    最近挺忙的,在外出差,又同时干两个项目.白天一个晚上一个,特别是白天做的项目,马上就要上线了,在客户这里 三天两头开会,问题很多真的很想好好静下来怼代码,半夜做梦都能fix bugs~ 和客户交流真的 ...

  10. Java开发笔记（十九）规律变化的for循环

    前面介绍while循环时,有个名叫year的整型变量频繁出现,并且它是控制循环进出的关键要素.不管哪一种while写法,都存在三处与year有关的操作,分别是“year = 0”.“year<l ...