Bootstrap之使用面板

最新推荐文章于 2023-07-22 10:43:08 发布
最新推荐文章于 2023-07-22 10:43:08 发布
阅读量539 收藏
点赞数
分类专栏： HTML bootstrap 文章标签： bootstrap class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33733970/article/details/78115241
版权

面板

<!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="container">
    <div class="row">
        <h2>请输入标题</h2>
    </div>
    <div class="row">
        <div class="panel panel-primary">

            <div class="panel-heading">表格练习</div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="sr-only" for="search"></label>
                        <input type="email" class="form-control" id="search" placeholder="Email" value="搜索">
                    </div>

                    <button type="submit" class="btn btn-primary">搜索</button>
                    <button type="button" class="btn btn-success pull-right">添加</button>
                </form>

            </div>

            <!-- 表格 -->
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <td>#</td>
                    <td>Column Heading</td>
                    <td>Column Heading</td>
                    <td>Column Heading</td>
                    <td>Column Heading</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                        </button>
                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                        </button>
                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                        </button>
                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                        </button>
                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                        </button>
                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                        </button>
                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                        </button>
                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                        </button>
                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                        </button>
                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <nav aria-label="Page navigation">
  <ul class="pagination pull-right">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
    </div>
</div>


</body>
</html>

效果图

效果图

Quincy379
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap的面板展示
实践求真知
02-04 1010
一 代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;面板&lt;/title&gt; &lt;link rel=
Bootstrap 面板
dxm809的博客
05-30 235
@{    Layout = null;}&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta name="viewport" content="width=device-width" /&gt;    &lt;title&gt;Index&lt;/title&gt;    &lt;link href=&
Bootstrap 面板（Panels）
weixin_33950035的博客
01-28 118
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap面板
遇见更好的自己
06-13 662
1.面板组件用于把DOM组件插入到一个盒子中，创建一个基本面板，只需要添加.panel和panel-default两个类既可。//基本的面板 <div class="panel panel-default"> <div class="panel-body">基本的面板</div> </div>2.面板标题 使用.panel-heading可以很简单的向面板添加标题容器。使用.panel-t
3.19 Bootstrap 面板(Panels)
最新发布
梁辰兴的博客
07-22 399
为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 中即可。元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组。注意：面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。
Bootstrap每天必学之面板
01-19
面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码： :ballot_box_with_check: Less版本：对应的源码文件是 panels.less :ballot...
浅析Bootstrap组件之面板组件
09-02
除了基础样式，Bootstrap面板组件还支持多种颜色主题，以适应不同的设计需求和情境。这些预设的主题包括： 1. `.panel-primary` - 主要颜色，通常是蓝色，用于突出重要的信息。 2. `.panel-success` - 成功颜色，...
Bootstrap面板使用方法
08-31
面板样式除了内容之外，还有一个面板头部可以添加标题，让我们通过这篇文章看看Bootstrap面板样式的使用方法
Bootstrap面板学习使用
08-31
下面将详细介绍Bootstrap面板的使用方法和特点。 首先，Bootstrap面板的HTML结构通常包括以下几个部分： 1. `.panel` 类：这是面板的基本容器，用于定义一个完整的面板区域。 2. `.panel-heading` 类：定义面板的...
零基础Bootstrap入门教程(6)--使用面板
程序员大阳
04-26 867
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 4 和 Material 风格的控制面板.zip
05-14
采用Bootstrap框架搭建的Material风格平台，高拓展性高兼容性快速响应都给这个平台加分不少，需要的朋友可以关注一下
Bootstrap面板（Panels）
暖心~的博客
03-07 1215
面板基本结构：<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> 带有 title 的面板标题 </h3> </div> <div class="panel-body"> 面板内容
Bootstrap的面板上
实践求真知
02-04 363
一 基础面板 1 代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;面板--基础面板&lt;/title&gt; &lt;link rel="stylesheet" href="//maxcd
Bootstrap的面板下
实践求真知
02-04 346
一 面板中嵌套表格 1 代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;面板--面板中嵌套表格、列表组（一）&lt;/title&am
深入解析Bootstrap：媒体对象、列表组与面板源码详解
面板（Panel）是Bootstrap中用于显示内容块的组件，通常包含标题和内容区域。它提供了多种样式，如默认样式、成功样式、警告样式和危险样式，可以通过不同的CSS类（如`.panel-default`、`.panel-success`等）来切换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值