master

分支 (3)

管理

管理

master

style

feature/非圆角青绿配色

Light-Year-Admin-Using-Iframe-v4
/
lyear_forms_input_group.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>输入框组 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">输入框组</div></header>
        <div class="card-body">

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">@</span>
            </div>
            <input type="text" class="form-control" placeholder="用户名">
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="收件人的用户名">
            <div class="input-group-append">
              <span class="input-group-text" id="basic-addon2">@example.com</span>
            </div>
          </div>

          <label for="basic-url">您的博客地址</label>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
            </div>
            <input type="text" class="form-control" id="basic-url">
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control">
            <div class="input-group-append">
              <span class="input-group-text">.00</span>
            </div>
          </div>

          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">文本区域</span>
            </div>
            <textarea class="form-control" aria-label="With textarea"></textarea>
          </div>
          <h6 class="mt-3">包装</h6>
          <p>默认情况下，输入组通过 <code>flex-wrap: wrap</code> 以便在输入组中容纳自定义表单字段验证，你可以使用以下命令禁用此功能 <code>.flex-nowrap</code>。</p>
          <div class="input-group flex-nowrap">
            <div class="input-group-prepend">
              <span class="input-group-text" id="addon-wrapping">@</span>
            </div>
            <input type="text" class="form-control" placeholder="用户名">
          </div>
          <h6 class="mt-3">规格尺寸</h6>
          <p>将相对表单大小的class样式加到 <code>.input-group</code> 中，其内容会自动调整大小，如 <code>.input-group-lg</code>、<code>.input-group-sm</code>，不需要在每个元素上重重使用样式控制其大小。</p>
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
            </div>
            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
          </div>

          <div class="input-group input-group-lg">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
            </div>
            <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          </div>
          <h6 class="mt-3">复选框和单选框</h6>
          <p>在输入组的插件中放置任何复选框或单选七天，而不仅仅文本。</p>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <input type="checkbox" aria-label="Checkbox for following text input">
              </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with checkbox">
          </div>

          <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">
              <input type="radio" aria-label="Radio button for following text input">
              </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with radio button">
          </div>
          <h6 class="mt-3">多个输入</h6>
          <p>尽管可视化支持多个 <code>&lt;input&gt;</code> 但验证样式仅适用于具有单个 <code>&lt;input&gt;</code> 的输入组。</p>
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="">First and last name</span>
            </div>
            <input type="text" class="form-control">
            <input type="text" class="form-control">
          </div>
          <h6 class="mt-3">多类型控件组合</h6>
          <p>支持多种控件结合，比如复选框和、文本、input框混合使用。</p>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">$</span>
              <span class="input-group-text">0.00</span>
            </div>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
          </div>

          <div class="input-group">
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
            <div class="input-group-append">
              <span class="input-group-text">$</span>
              <span class="input-group-text">0.00</span>
            </div>
          </div>
          <h6 class="mt-3">按钮组合</h6>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button">Button</button>
            </div>
            <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="收件人的用户名" >
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button">Button</button>
            </div>
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button">Button</button>
              <button class="btn btn-outline-secondary" type="button">Button</button>
            </div>
            <input type="text" class="form-control" placeholder="">
          </div>

          <div class="input-group">
            <input type="text" class="form-control" placeholder="收件人的用户名">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button">Button</button>
              <button class="btn btn-outline-secondary" type="button">Button</button>
            </div>
          </div>
          <h6 class="mt-3">带下拉列表的按钮组合</h6>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉菜单</button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#!">庄子</a>
                <a class="dropdown-item" href="#!">道德经</a>
                <a class="dropdown-item" href="#!">菜根谭</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="#!">牡丹亭</a>
              </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with dropdown button">
          </div>

          <div class="input-group">
            <input type="text" class="form-control" aria-label="Text input with dropdown button">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉菜单</button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#!">西厢记</a>
                <a class="dropdown-item" href="#!">纳兰词</a>
                <a class="dropdown-item" href="#!">楚辞</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="#!">浮生六记</a>
              </div>
            </div>
          </div>
          <h6 class="mt-3">分裂式下拉与input组合</h6>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <button type="button" class="btn btn-outline-secondary">书籍</button>
              <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#!">庄子</a>
                <a class="dropdown-item" href="#!">道德经</a>
                <a class="dropdown-item" href="#!">菜根谭</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="#!">牡丹亭</a>
              </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
          </div>

          <div class="input-group">
            <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
            <div class="input-group-append">
              <button type="button" class="btn btn-outline-secondary">书籍</button>
              <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#!">西厢记</a>
                <a class="dropdown-item" href="#!">纳兰词</a>
                <a class="dropdown-item" href="#!">楚辞</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="#!">浮生六记</a>
              </div>
            </div>
          </div>
          <h6 class="mt-3">自定义选择</h6>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="inputGroupSelect01">选项</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
              <option selected>请选择...</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>

          <div class="input-group mb-3">
            <select class="custom-select" id="inputGroupSelect02">
              <option selected>请选择...</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
            <div class="input-group-append">
              <label class="input-group-text" for="inputGroupSelect02">选项</label>
            </div>
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button">按钮</button>
            </div>
            <select class="custom-select" id="inputGroupSelect03">
              <option selected>请选择...</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>

          <div class="input-group">
            <select class="custom-select" id="inputGroupSelect04">
              <option selected>请选择...</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button">按钮</button>
            </div>
          </div>
          <h6 class="mt-3">自定义文件输入</h6>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">上传</span>
            </div>
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="inputGroupFile01">
              <label class="custom-file-label" for="inputGroupFile01">选择文件</label>
            </div>
          </div>

          <div class="input-group mb-3">
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="inputGroupFile02">
              <label class="custom-file-label" for="inputGroupFile02">选择文件</label>
            </div>
            <div class="input-group-append">
              <span class="input-group-text" id="">上传</span>
            </div>
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button">按钮</button>
            </div>
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="inputGroupFile03">
              <label class="custom-file-label" for="inputGroupFile03">选择文件</label>
            </div>
          </div>

          <div class="input-group">
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="inputGroupFile04">
              <label class="custom-file-label" for="inputGroupFile04">选择文件</label>
            </div>
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button">按钮</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/main.min.js"></script>
<!--示例中file选择框使用到的js，这里采用外部js，不使用该功能无需引入-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  bsCustomFileInput.init();
});
</script>
</body>
</html>