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. java自动拆装箱（转载）

    转载自:http://www.cnblogs.com/dolphin0520/p/3780005.html 注意:Integer的缓存机制.

  2. HTML常用特殊字符编码对照表以及其对应英文

    符号 说明 对应编码(使用时去掉空格) 英文 & AND 符号 & amp; ampersand < 小于 & lt; little > 大于 & gt; ...

  3. Java String：重要到别人只能当老二的字符串类

    字符串,是Java中最重要的类.这句肯定的推断不是Java之父詹姆斯·高斯林说的,而是沉默王二说的,因此你不必怀疑它的准确性. 关于字符串,有很多的面试题,但我总觉得理论知识绕来绕去没多大意思.你比如 ...

  4. C++版 - 剑指Offer 面试题39：二叉树的深度(高度)(二叉树深度优先遍历dfs的应用) 题解

    剑指Offer 面试题39:二叉树的深度(高度) 题目:输入一棵二叉树的根结点,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度.例如:输入二叉树 ...

  5. 初探Java设计模式4：JDK中的设计模式

    JDK中设计模式 本文主要是归纳了JDK中所包含的设计模式,包括作用和其设计类图.首先来个总结,具体的某个模式可以一个一个慢慢写,希望能对研究JDK和设计模式有所帮助.一.设计模式是什么(1)反复出现 ...

  6. JavaScript面向对象--继承 （超简单易懂，小白专属）

    一.继承的概念 子类共享父类的数据和方法的行为,就叫继承. 二.E55如何实现继承?探索JavaScript继承的本质 2.1构造函数之间的"复制粘贴" 第一条路是通过构造函数来继 ...

  7. React Native (二) ios打包到真机

    每当在模拟器上完成了开发,都想到真机上试试,正好前段时候淘了一个imac. 这里就以打包rndemo到iphone为例,讲一下react ntive ios打包到真机的流程. 一.前置 1.有个iph ...

  8. Python并发编程之学习异步IO框架：asyncio 中篇（十）

    大家好,并发编程 进入第十章.好了,今天的内容其实还挺多的,我准备了三天,到今天才整理完毕.希望大家看完,有所收获的,能给小明一个赞.这就是对小明最大的鼓励了.为了更好地衔接这一节,我们先来回顾一下上 ...

  9. arcgis 10 版本连接SDE数据库报错：No ArcSDE server license found 最有效的解决方法

    这个问题可以这样解决:就在在Oracle中登入SDE数据库 进入到SDE数据库中后,找到表SERVER_CONFIG,其中有一行数据记录的就是我们需要进行修改的数据 你需要做的就是找到一个可用的,前面 ...

  10. AlwaysUp使用方法

    AlwaysUp是一款能将可执行文件.批处理文件及快捷方式作为Windows系统服务,并且进行管理和监视确保100%运行.当程序崩溃.挂起.弹出错误对话框时,AlwaysUp 能自动重启程序,并运行自 ...