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. Python内置函数(63)——super

    英文文档: super([type[, object-or-type]]) Return a proxy object that delegates method calls to a parent ...

  2. Python内置函数(31)——id

    英文文档: id(object) Return the “identity” of an object. This is an integer which is guaranteed to be un ...

  3. .NET Core实战项目之CMS 第十七章 CMS网站系统的部署

    目前我们的.NET Core实战项目之CMS系列教程基本走到尾声了,通过这一系列的学习你应该能够轻松应对.NET Core的日常开发了!当然这个CMS系统的一些逻辑处理还需要优化,如没有引入日志组件以 ...

  4. WebSocket(3)---实现一对一聊天功能

    实现一对一聊天功能 功能介绍:实现A和B单独聊天功能,即A发消息给B只能B接收,同样B向A发消息只能A接收. 本篇博客是在上一遍基础上搭建,上一篇博客地址:[WebSocket]---实现游戏公告功能 ...

  5. 正则表达式与H5表单

     RegExp 对象    exec 检查字符中是正则表达中的区域    text  检查内容  String 对象的方法    match    search    replace    splic ...

  6. asp.net core 系列 15 中间件

    一.概述 中间件(也叫中间件组件)是一种装配到应用管道以处理请求和响应的软件. 每个组件:(1)选择是否将请求传递到管道中的下一个组件;(2)可以在管道中的下一个组件之前和之后执行工作. 请求委托用于 ...

  7. TypeScript 基础知识点整理

    一.TypeScript的特点 1.支持ES6规范 2.强大的IDE支持(集成开发环境) 允许为变量指定类型,减少你在开发阶段犯错误的几率. 语法提示,在IDE编写代码时,它会根据你所处的上下文把你能 ...

  8. Python多版本共存（生产环境）

    安装pyenv $ git clone git://github.com/yyuu/pyenv.git ~/.pyenv $ echo 'export PYENV_ROOT="$HOME/. ...

  9. leetcode — best-time-to-buy-and-sell-stock-iii

    /** * Source : https://oj.leetcode.com/problems/best-time-to-buy-and-sell-stock-iii/ * * * Say you h ...

  10. adb server is out of date. killing... ADB server didn't ACK解决方法

    在使用ADT Bundle进Android开发时,有时经常会碰到如下错误提示: adb server is out of date. killing... ADB server didn't ACK ...