bootstrap-面板中嵌套列表组

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>面板--面板中嵌套列表组</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">
            <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、
            渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
            </p>
            <ul class="list-group">
                <li class="list-group-item">我是列表项</li>
                <li class="list-group-item">我是列表项</li>
                <li class="list-group-item">我是列表项</li>
            </ul>
        </div>
        <div class="panel-footer">作者：大漠</div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>

时间： 2024-10-29 19:10:47

bootstrap-面板中嵌套列表组的相关文章

【p2】·python中嵌套列表list元素输出·模块封装·发布上传(pigeon详细说)

如果你也正在学习<Head First Python>,可以相互学习.接下来将记录如何完成书本的这一章以及遇到的问题如何解决. 一.简单访问列表数据 [1]通过位置访问具体数据,0表示第一位[如下图] [2]计算列表长度[使用len] [3]列表末尾增加--删除元素,append增肌,pop删除,注意不同用法 append括号里放想添加元素,列表.pop()就能删除 [4]extend添加多个元素[如想在后面添加5,6,7],留意跟append区别 append保留着数据项中括号,缺陷 ---

html 中的列表组

详解Bootstrap面板组件

面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了类.panel的样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-body来放置面板主体内容 .panel主要对边框.间距.圆角.左右一定的设置: .panel { ma

Bootstrap历练实例：带列表组的面板

带列表组的面板我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从列表组一章中学习如何创建列表组. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

详解Bootstrap列表组组件

列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.less SASS:_list-group.scss 列表组看上去就是去掉了列表符号的列表项,并且配上一些特定的样式,在bootstrap框架中的基础列表组主要包括两个部分: list-group:列表组容器,常用的是ul元素,也可以是ol或div元素 list-group-item:列表项,常用的是l

Bootstrap <基础二十八>列表组

列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的列表组</title> <link href="/boo

bootstrap-面板中嵌套表格

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>面板--面板中嵌套表格</title> <!-- 最新版本的

缩略图\警示框\进度条\媒体对象\列表组\面板组件

欢迎收看大奥编写的Bootstrap快速学习笔记(6)缩略图\警示框\进度条\媒体对象\列表组\面板组件本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 缩略图警示框进度条媒体对象列表组面板详细介绍缩略图通过配合网格系统来实现,div.container>div.row>div.col-md-3 col-xs-6>a.thumbnail>img来实现,这样的效果就是当宽屏的时候能够一行显示4个缩略图,窄屏的时候一行显示两个

列表组和面板

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i