BootStrap查询条件布局 卡片card 面板panel 工具栏 标题栏

最新推荐文章于 2024-04-30 14:16:17 发布
最新推荐文章于 2024-04-30 14:16:17 发布
阅读量1.4k 收藏 5
点赞数
分类专栏： BootStrap 文章标签： bootstrap html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tanzongbiao/article/details/123497755
版权

卡片card 

 示例1： 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <div th:include="common::commonCSS" th:remove="tag"></div>
    <title>学员服务跟踪</title>
    <script type="text/javascript" data-main="/js/mini/studentService/ListStudentService.js" src="/jslib/require/require.min.js"></script>
</head>
<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <!-- 这里放我们的内容 -->
        <div class="left_col_qyj" role="main">
            <!--去除之前的样式-->
            <div class="clearfix"></div>
            <!--子窗口向父窗体传参数(取消时不刷新)-->
            <input id="childReturnData" name="childReturnData" type="hidden" value=""/>

            <!--检索-->
            <div class="row" style="margin: 2px">
                <!--查询条件-->
                <div class="col-md-12" style="padding-left: 0px;padding-right: 0px">
                    <!--卡片-->
                    <div class="card bg-info text-white">
                        <div class="card-header">
                            <strong class="card-title"><i class="fa fa-filter"></i>查询条件</strong>
                        </div>
                        <div class="card-body bg-white">
                            <form class="form-inline" id="form_Condition">
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="studentName" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">学员姓名：</label>
                                        <input type="text" class="form-control input-sm" id="studentName" name="studentName" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="studentIdCard" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">身份证号：</label>
                                        <input type="text" class="form-control input-sm" id="studentIdCard" name="studentIdCard" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="workerName" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">责任人：</label>
                                        <input type="text" class="form-control input-sm" id="workerName" name="studentName" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="studentStatus" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">学员状态：</label>
                                        <select class="form-control" id="studentStatus" style="width: 120px;margin-right: 5px"></select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="status" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">信息状态：</label>
                                        <select class="form-control" id="status" style="width: 120px;margin-right: 5px"></select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="departmentName" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">分校名称：</label>
                                        <select class="form-control" id="departmentName" style="width: 120px;margin-right: 5px"></select>&nbsp;&nbsp;
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="startTime" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">起始时间：</label>
                                        <input class="laydate-icon form-control layer-date" id="startTime" name="startTime" onclick="laydate({format: 'YYYY-MM-DD'})" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="endTime" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">结束时间：</label>
                                        <input class="laydate-icon form-control layer-date" id="endTime" name="endTime" onclick="laydate({format: 'YYYY-MM-DD'})" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="serviceType" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">类别：</label>
                                        <select class="form-control" id="serviceType" style="width: 120px;margin-right: 5px"></select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="description" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">问题描述：</label>
                                        <select class="form-control" id="description" style="width: 120px;margin-right: 5px"></select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="content" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">联系内容：</label>
                                        <input type="text" class="form-control input-sm" id="content" name="studentName" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <div class="btn-group" style="margin-left: 65px">
                                            <button type="button" class="btn btn-secondary btn-sm" id="btn_Clear">
                                                <i class="fa fa-eraser"></i>清空
                                            </button>
                                            <button type="submit" class="btn btn-info btn-sm" id="btn_Search">
                                                <i class="fa fa-search"></i>查询
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!--工具栏-->
            <div class="row" id="toolbar">
                <!--新增及导出-->
                <div class="btn-group" style="margin-left: 11px">
                    <button type="button" class="btn btn-outline btn-success btn-sm" id="btn_Add">
                        <i class="fa fa-plus"></i>新增
                    </button>
                    <button type="button" class="btn btn-outline btn-secondary btn-sm" id="btn_ExportExcelPoi">
                        <i class="fa fa-file-excel-o"></i>导出
                    </button>
                </div>
                <div class="btn-group" style="margin-left: 10px">
                    <button type="button" class="btn btn-outline btn-primary btn-sm" id="btn_ManualGenerate">
                        <i class="fa fa-hand-rock-o"></i>手动抽取
                    </button>
                </div>
            </div>
            <!--表格-->
            <div class="row" style="margin: -8px">
                <div class="col-md-12">
                    <table id="tb_Table" style="cursor: pointer"></table>
                </div>
            </div>
        </div>
        <!-- /这里放我们的内容-->

    </div>
</div>
</body>
</html>

示例2： 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <div th:include="common::commonCSS" th:remove="tag"></div>
    <title>商家管理</title>
    <script type="text/javascript" data-main="/js/mini/garageInfo/ListGarageInfo.js" src="/jslib/require/require.min.js"></script>
</head>
<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <!-- 这里放我们的内容 -->
        <div class="left_col_qyj" role="main">
            <!--去除之前的样式-->
            <div class="clearfix"></div>
            <!--子窗口向父窗体传参数(取消时不刷新)-->
            <input id="childReturnData" name="childReturnData" type="hidden" value=""/>

            <!--检索-->
            <div class="row" style="margin: 2px">
                <!--查询条件-->
                <div class="col-md-12" style="padding-left: 0px;padding-right: 0px">
                    <!--卡片-->
                    <div class="card bg-info text-white">
                        <div class="card-header">
                            <strong class="card-title"><i class="fa fa-filter"></i>查询条件</strong>
                        </div>
                        <div class="card-body bg-white">
                            <form class="form-inline" id="form_Condition">
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="startTime" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">起始：</label>
                                        <input class="laydate-icon form-control layer-date" id="startTime" name="startTime" onclick="laydate({format: 'YYYY-MM-DD'})" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="endTime" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">结束：</label>
                                        <input class="laydate-icon form-control layer-date" id="endTime" name="endTime" onclick="laydate({format: 'YYYY-MM-DD'})" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="garageName" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">名称：</label>
                                        <input type="text" class="form-control input-sm" id="garageName" name="garageName" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="garageAddress" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">地址：</label>
                                        <input type="text" class="form-control input-sm" id="garageAddress" name="garageAddress" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <label for="garagePhone" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">电话：</label>
                                        <input type="text" class="form-control input-sm" id="garagePhone" name="garagePhone" style="width: 120px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row">
                                        <div class="btn-group" style="margin-left: 65px">
                                            <button type="button" class="btn btn-secondary btn-sm" id="btn_Clear">
                                                <i class="fa fa-eraser"></i>清空
                                            </button>
                                            <button type="submit" class="btn btn-info btn-sm" id="btn_Search">
                                                <i class="fa fa-search"></i>查询
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!--工具栏-->
            <div class="row" id="toolbar">
                <!--新增及导出-->
                <div class="btn-group" style="margin-left: 11px">
                    <button type="button" class="btn btn-outline btn-success btn-sm" id="btn_Add">
                        <i class="fa fa-plus"></i>新增
                    </button>
                    <button type="button" class="btn btn-outline btn-secondary btn-sm" id="btn_ExportExcelPoi">
                        <i class="fa fa-file-excel-o"></i>导出
                    </button>
                </div>
            </div>
            <!--表格-->
            <div class="row" style="margin: -8px">
                <div class="col-md-12">
                    <table id="tb_Table" style="cursor: pointer"></table>
                </div>
            </div>
        </div>
        <!-- /这里放我们的内容-->

    </div>
</div>
</body>
</html>

参考：ajax 局部刷新 条件查询_weixin_40781373的博客-CSDN博客

Bootstrap4 卡片 | 菜鸟教程

Bootstrap 面板 | 菜鸟教程

tanzongbiao
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap卡片图文列表布局特效代码
03-20
bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。
Bootstrap系列之卡片（Cards）
老__L的博客
05-29 5502
Bootstrap卡片提供了一个灵活的、可扩展的内容容器，具有多个变体和选项。卡片是一种灵活的、可扩展的内容容器。它包括页眉和页脚选项、各种各样的内容、背景颜色和强大的显示选项。如果你熟悉Bootstrap 3，卡片可以代替我们的旧面板、井和缩略图。与这些组件类似的功能可用作纸牌的修饰类。卡片使用尽可能少的标记和样式，但仍然设法提供大量的控制和定制。建立与flexbox，他们提供容易对齐和混合好与其他Bootstrap组件。默认情况下它们没有空白，因此需要时使用间距实用程序。下面是一个混合内容和固定宽度的基
Bootstrap卡片图文列表布局样式代码
06-11
基于jQuery和Bootstrap实现的卡片图文列表布局样式代码，包括普通的卡片布局、等高卡片布局等。
Bootstrap Table使用整理（四）之工具栏
08-30
主要介绍了Bootstrap Table使用整理（四）之工具栏的相关资料,需要的朋友可以参考下
Bootstrap组件——卡片
xun__xing的博客
07-29 4137
卡片一、卡片（card）1.基础卡片2.内容类型2.宽度设置3.文本对齐4.导航5. 图像6.文本放在图片身上7.水平排列8.卡片样式9.卡片组 一、卡片（card） 卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体。 卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。 1.基础卡片 <div class="row"> <div cla
bootstrap 查询条件布局
ligengdipan的专栏
12-23 3019
效果如下： 代码： <div class="container-fluid"> <div class="row"> <div class="panel panel-default"> <div class="panel-head...
bootstrap第二章：bootstrap布局
qq_62244121的博客
10-17 3554
bootstrap布局详细介绍，附有网格列偏移和网格列嵌套
Bootstrap的页面功能实现
m0_68126539的博客
05-01 523
第一个功能是图片(主要引入的样式与库) <!-- 引入Bootstrap的css(样式) --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <style type="text/css"> <!--支持手机端 --> <meta name="viewport" content="width=device-width,initi
媒体查询 + 02-bootstrap基本使用
xumengxia的博客
09-01 220
1. 媒体查询的书写顺序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
条件查询
weixin_44540140的博客
06-09 1719
开发工具与关键技术：VS C# 作者：宋永烨 撰写时间：2019-6-2 当用户查看表格的大量数据是,由于数据量过于巨大会导致很难获取到需要的数据,在这时,就需要一个方法,一个可以通过用户输入获取到用户需要的数据并回填入表格, 1.获取用户输入 这是条件查询的第一步,首先获取到用户的输入,然后在查询数据时,通过查询方法的筛选功能,将不需要的数据全部除去,只留下与用户输入的数据匹配的,然后将...
BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
09-01
主要介绍了BootStrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果，非常不错，具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
bootstrap自定义样式之bootstrap实现侧边导航栏功能
12-02
bootstrap自带的响应式导航栏是向下滑动的，有时满足不了个性化的需求，需要做一个类似于android drawerLayout 侧滑的菜单，这就是我要实现的bootstrap自定义侧滑菜单，参考了很多官网的侧滑，实现方法各有不同，优...
Bootstrap实现响应式导航栏效果
11-22
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-...
这是一个简单的照明材料网站，后续还会更新
m0_64180190的博客
04-29 2326
产品中心|联系方式|新闻动态网页首页|产品中心|联系方式|新闻动态
用html画一个四叶草
liulang68的博客
04-20 2151
以上是部分代码，需要请看主页加联系方式。
HTML 学习笔记
m0_62870588的博客
04-28 1032
html超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 1.HTML文档的后缀名 (1) .html (2) .htm 这里更推荐使用 ".html "，命名应该遵从含义清晰、简洁、一致性原则。".htm"写法是来源于老的8.3文件格式，DOS操作系统只支持后缀名的长度为三位，现在的版本则没有对命名长度的限制，因此建议选择无限制命名长度的方式" html"。 2.HTML网页结构 下面是一个HTML的叶面结构
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1656
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
使用html画一个键盘
liulang68的博客
04-22 3707
【代码】使用html画一个键盘。
前端html中iframe的基本使用
最新发布
Keep trying, keep going
04-30 766
的容器，通过 CSS 控制容器的样式和尺寸。此示例中的通信是在同一个域名下进行的，因此没有出现跨域问题。// 通过通过父窗口找到子窗口的window， 再向子窗口发送消息。因此，postMessage的作用是 父窗口向子窗口发送了一条消息。// 父窗口 监听子窗口发出的消息(如果有；需要注意的是，由于跨域安全策略的限制，父窗口只能与同源的。事件，当页面加载完成时，隐藏覆盖层，显示。是父窗口（当前窗口）中的一个引用，通过。中加载的文档的通信。元素嵌入子窗口的，可以通过。对象，并与子窗口进行通信。
bootstrap panel
09-02
Bootstrap Panel 是 Bootstrap 框架中的一种组件，用于创建漂亮的面板式布局。它提供了一个容器，可以用于显示内容、图像、列表或任何其他元素。Panel 组件具有标题和内容区域，可以选择性地添加头部和底部。 要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值