Bootstrap的面板下

最新推荐文章于 2023-07-25 18:37:50 发布
最新推荐文章于 2023-07-25 18:37:50 发布
阅读量346 收藏
点赞数
分类专栏： Bootstrap 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengqiuming/article/details/86763353
版权

一 面板中嵌套表格

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>面板--面板中嵌套表格、列表组（一）</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h3>面板中嵌套表格（一）</h3>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>＃</th>
                <th>我的书</th>
                <th>发布时间</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>《图解CSS3》</td>
                <td>2014-07-10</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>
<h3>面板中嵌套表格（二）</h3>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
    </div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>＃</th>
            <th>我的书</th>
            <th>发布时间</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>《图解CSS3》</td>
            <td>2014-07-10</td>
        </tr>
        </tbody>
    </table>
    <div class="panel-footer">作者：大漠</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

2 效果

二 面板中嵌套列表组

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>面板--面板中嵌套表格、列表组（二）</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h3>面板中嵌套列表组（一）</h3>
<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>

<h3>面板中嵌套列表组（二）</h3>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
    </ul>
    <div class="panel-footer">作者：大漠</div>
</div>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

2 效果

chengqiuming
关注
专栏目录
Bootstrap 面板（Panels）
shengyin714959的博客
08-16 114
本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 元素添加 class和 class。
Bootstrap面板学习使用
08-31
Bootstrap面板是前端开发中常用的一个组件，它为网页内容提供了一种有组织、美观的展示方式。在Bootstrap框架中，面板主要用于封装和美化各种类型的信息，如数据列表、卡片或任何需要突出显示的内容。下面将详细介绍...
Bootstrap每天必学之面板
最新发布
Andyfu2019的博客
07-25 498
详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性。从效果中不难发现，这几个样式只是改变了面板的背景色、文本和边框颜色：具体源码可以查看bootstraphttp://.css文件第5195行～第5302行。同样的道理，Bootstrap将嵌套在面板中的列表组做了一定的样式优化。以上针对面板，分别介绍了基础面板、彩色面板等，帮助大家更全面的学习Bootstrap面板，希望大家从中得到收获。
3.19 Bootstrap 面板(Panels)
梁辰兴的博客
07-22 400
为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 中即可。元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组。注意：面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。
1.bootstrap网格系统与panel面板组件
岁月的童话
04-14 687
一、网格系统 1.基本使用方式 网格系统是bootstrap用来分配页面空间的一种方法，把每一行看成12份，分的越多空间越大，基本使用方式如下 代码 <!DOCTYPE html> <html> <head> <title>bootstrap</title> <!--使用网格系统的引用--> <...
零基础Bootstrap入门教程(6)--使用面板
程序员大阳
04-26 871
HTML表格 先来回忆下HTML中的表格元素 &amp;lt;table&amp;gt; &amp;lt;caption&amp;gt;标题&amp;lt;/caption&amp;gt; &amp;lt;thead&amp;gt; &amp;lt;tr&amp;gt; &amp;lt;th&amp;gt;姓名&amp;lt;/th&amp;gt;
Bootstrap面板使用方法
08-31
面板样式除了内容之外，还有一个面板头部可以添加标题，让我们通过这篇文章看看Bootstrap面板样式的使用方法
Bootstrap面板（Panels）的简单实现代码
08-31
主要为大家详细介绍了Bootstrap面板（Panels）的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于 Bootstrap 4 和 Material 风格的控制面板.zip
05-14
采用Bootstrap框架搭建的Material风格平台，高拓展性高兼容性快速响应都给这个平台加分不少，需要的朋友可以关注一下
Bootstrap 面板
soindy
03-23 1518
整理自慕课笔记 面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。基础面板基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置
Bootstrap组件学习笔记（七）——列表组和面板
Andy_lau
09-01 970
目录：     1. 列表组     2. 面板 1.列表组     1.1 总结     1.2 示例效果截图       1.3 示例代码 12html>3head lang="en">4    meta charset="UTF-8">5    title>
Bootstrap之使用面板
Quincy.Coder的博客
09-27 540
面板<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <div class="
Bootstrap之带标题的面板
Quincy.Coder的博客
09-27 2818
代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <div class="
Bootstrap栅格系统（屏幕大小）
热门推荐
qq_40139513的博客
09-28 1万+
栅格 屏幕在Bootstrap的栅格系统中有：/* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */ .col-xs-/* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } .col-sm-/*
Bootstrap 组件-面板
litengbin的博客
01-21 318
1 : 基本面板     2 : 面板标题     3 : 面板脚注     4 : 面板颜色     基本面板 面板内容 面板标题 面板标题 面板内容 面板脚注 面板内容 面板脚注 面板颜色 面板标题 面
【Bootstrap学习笔记】6.列表组面板和嵌入组件
sunraito的博客
08-21 637
十二、列表组面板和嵌入组件 学习内容 列表组组件 带徽章的列表页组件、禁用选项、带情景的选项 向列表组添加自定义内容 面板组件 响应式嵌入组件 ● 列表组组件 1..list-group .list-group-item 2.&amp;lt;ul&amp;gt;和&amp;lt;li&amp;gt;的组合存在局限性，在有链接的情况下，只有a标签区域可以点击跳转，建议使用&amp;lt;div&amp;gt;和&amp;lt;a&
Bootstrap面板与MediaObject详解：必备组件指南
一、Bootstrap面板（Panels） 1. 面板基础结构 面板是Bootstrap中用于组织内容的基本容器，通过向`<div>`元素添加`class="panel panel-default"`样式，可以创建一个默认的面板。面板通常由面板主体（`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值