master

分支 (1)

管理

管理

master

light-year-admin-using-v5-for-example
/
lyear_layout_search_1.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>搜索布局 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--日期选择插件-->
<link rel="stylesheet" href="js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>

</style>
</head>

<body>
<div class="container-fluid">

  <div class="row">

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header d-flex justify-content-between">
  	      <div class="card-title">搜索布局</div>
          <ul class="card-actions">
            <li><a href="#!" class="card-btn-slide rotate-180"><i class="mdi mdi-chevron-up"></i></a></li>
          </ul>
  	    </header>
  		<div class="card-body" style="display: none">

  		  <form>
            <div class="mb-3 row">
              <label for="inputEmail3" class="col-md-2 col-form-label">范围</label>
              <div class="col-md-10">
                <div class="input-group" data-date-format="yyyy-mm-dd">
                  <input class="form-control" type="text" name="start_time" value="" placeholder="开始时间">
                  <span class="input-group-text">~</span>
                  <input class="form-control" type="text" name="end_time" value="" placeholder="结束时间">
                </div>
              </div>
            </div>
            <div class="mb-3 row">
              <label for="inputPassword3" class="col-md-2 col-form-label">单选框</label>
              <div class="col-md-10 pt-2">
                <div class="form-check form-check-inline">
      	          <input type="radio" id="customRadioInline1" name="customRadioInline" class="form-check-input">
      	          <label class="form-check-label" for="customRadioInline1">羽毛球</label>
      	        </div>
                <div class="form-check form-check-inline">
      	          <input type="radio" id="customRadioInline2" name="customRadioInline" class="form-check-input">
      	          <label class="form-check-label" for="customRadioInline2">冰球</label>
      	        </div>
                <div class="form-check form-check-inline">
      	          <input type="radio" id="customRadioInline3" name="customRadioInline" class="form-check-input">
      	          <label class="form-check-label" for="customRadioInline3">网球</label>
      	        </div>
              </div>
            </div>
            <div class="mb-3 row">
              <label for="inputPassword3" class="col-md-2 col-form-label">复选框</label>
              <div class="col-md-10 pt-2">
                <div class="form-check form-check-inline">
      	          <input type="checkbox" id="customCheckboxInline1" name="customCheckboxInline1" class="form-check-input">
      	          <label class="form-check-label" for="customCheckboxInline1">篮球</label>
      	        </div>
      	        <div class="form-check form-check-inline">
      	          <input type="checkbox" id="customCheckboxInline2" name="customCheckboxInline2" class="form-check-input">
      	          <label class="form-check-label" for="customCheckboxInline2">足球</label>
      	        </div>
      	        <div class="form-check form-check-inline">
      	          <input type="checkbox" id="customCheckboxInline3" name="customCheckboxInline2" class="form-check-input">
      	          <label class="form-check-label" for="customCheckboxInline3">排球</label>
      	        </div>
              </div>
            </div>
            <div class="mb-3 row">
              <label for="inputPassword3" class="col-md-2 col-form-label">下拉列表</label>
              <div class="col-md-10 row">
                <div class="col-sm-3">
                  <select name="type" class="form-select">
                    <option value="1">小说</option>
                    <option value="2">古籍</option>
                    <option value="3">专辑</option>
                    <option value="4">自传</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="mb-3 row">
              <label for="inputPassword3" class="col-md-2 col-form-label">联动下拉(这里只是布局)</label>
              <div class="col-md-10 row">
                <div class="col-sm-3 mb-1">
                  <select name="one" class="form-select">
                    <option value="0">请选择省份</option>
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                    <option value="3">天津</option>
                  </select>
                </div>
                <div class="col-sm-3 mb-1">
                  <select name="two" class="form-select">
                    <option value="0">选择市</option>
                  </select>
                </div>
                <div class="col-sm-3 mb-1">
                  <select name="three" class="form-select">
                    <option value="0">选择区县</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="mb-3 row">
              <div class="col-md-12">
                <button type="submit" class="btn btn-default">确认选择</button>
              </div>
            </div>
          </form>

  	    </div>
  	  </div>
    </div>

    <!--单行条件搜索-->
	<div class="col-lg-12">
	  <div class="card">
	    <div class="card-body">
          <form class="row row-cols-lg-auto g-3 align-items-center">
		    <div class="col-12 mb-1">
			  <div class="input-group">
                <div class="input-group-prepend search-bar">
                  <input type="hidden" name="search_field" id="search-field" value="title">
                  <button class="btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="search-btn">标题</button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="javascript:void(0)" data-field="title">标题</a>
                    <a class="dropdown-item" href="javascript:void(0)" data-field="author">作者</a>
                  </div>
                </div>
                <input type="text" class="form-control" value="" name="keyword" placeholder="请输入关键词">
              </div>
			</div>
			<div class="col-12 mb-1">
			  <label for="start_time" class="visually-hidden">时间</label>
              <div class="input-group">
                <input class="form-control" type="text" name="start_time" value="" placeholder="开始时间">
                <span class="input-group-text">~</span>
                <input class="form-control" type="text" name="end_time" value="" placeholder="结束时间">
              </div>
			</div>
			<div class="col-12 mb-1">
			  <label for="type" class="visually-hidden">分类</label>
              <select name="type" class="form-select">
                <option value="1">小说</option>
                <option value="2">古籍</option>
                <option value="3">专辑</option>
                <option value="4">自传</option>
              </select>
			</div>
			<div class="col-12 mb-1">
              <button type="submit" class="btn btn-default">查询</button>
			</div>
          </form>
		</div>
	  </div>
	</div>

    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><div class="card-title">搜索布局</div></div>
        <!--默认使用-->
        <div class="m-3">
          <form class="row row-cols-lg-auto g-3 align-items-center" action="#!" method="post">
            <div class="col-12 mb-1">
              <input class="form-control" type="email" name="keywords" placeholder="请输入邮箱..">
            </div>
            <div class="col-12 mb-1">
              <input class="form-control" type="password" name="usernbame" placeholder="请输入用户名..">
            </div>
            <div class="col-12 mb-1">
              <input class="form-control" type="phone" name="phone" placeholder="请输入手机号..">
            </div>
            <a class="btn btn-default mb-1 me-2" href="#!"><i class="mdi mdi-magnify"></i> 搜索</a>
            <a class="btn btn-primary mb-1 me-2" href="#!"><i class="mdi mdi-plus"></i> 新增</a>
            <a class="btn btn-success mb-1 me-2" href="#!"><i class="mdi mdi-check"></i> 启用</a>
            <a class="btn btn-warning mb-1 me-2" href="#!"><i class="mdi mdi-block-helper"></i> 禁用</a>
            <a class="btn btn-danger mb-1 me-2" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>
            <button class="btn btn-secondary mb-1" type="reset"><i class="mdi mdi-delete"></i> 清空数据</button>
          </form>
        </div>
        <!--更多内容-->
        <div class="m-3">
          <div class="row row-cols-lg-auto g-3 align-items-center">
            <div class="col-12 mb-1">
              <input class="form-control" type="email" name="keywords" placeholder="请输入邮箱..">
            </div>
			<div class="col-12 mb-1">
              <div class="input-group" data-provide = 'datepicker' date-date-format="yyyy-mm-dd" data-autoclose="false">
                <input class="form-control" type="text" name="start_time" value="" placeholder="开始时间">
                <span class="input-group-text">~</span>
                <input class="form-control" type="text" name="end_time" value="" placeholder="结束时间">
              </div>
			</div>
            <div class="col-12 mb-1">
              <input class="form-control" type="password" name="usernbame" placeholder="请输入手机号..">
            </div>
			<div class="col-12 mb-1">
              <select name="type" class="form-select">
                <option value="1">小说</option>
                <option value="2">古籍</option>
                <option value="3">专辑</option>
                <option value="4">自传</option>
              </select>
			</div>
            <div class="col-12 mb-1">
              <a class="btn btn-default me-2" href="#!"><i class="mdi mdi-magnify"></i> 搜索</a>
              <a class="btn btn-primary me-2" href="#!"><i class="mdi mdi-plus"></i> 新增</a>
              <a class="btn btn-success me-2" href="#!"><i class="mdi mdi-check"></i> 启用</a>
              <a class="btn btn-warning me-2" href="#!"><i class="mdi mdi-block-helper"></i> 禁用</a>
              <a class="btn btn-danger me-2" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>
              <button class="btn btn-secondary" type="reset"><i class="mdi mdi-delete"></i> 清空数据</button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--日期选择插件-->
<script type="text/javascript" src="js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
;$(function(){
	// 下拉选择
    $('.search-bar .dropdown-menu a').click(function() {
        var field = $(this).data('field') || '';
        $('#search-field').val(field);
        $('#search-btn').html($(this).text());
    });
});
</script>
</body>
</html>