<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 注意1:form-control之后就会占用一行 -->
<form action=""></form>
<!-- 输入框 -->
<div class="form-group row">
<label for="name" class="col-3 col-form-label">用户名:</label>
<input type="text" class="form-control-plaintext col-7" readonly value="email@example.com">
</div>
<!-- 输入框 -->
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control form-control-lg">
</div>
<!-- 单选 -->
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label for="">请选择</label>
</div>
<!-- 选择框 -->
<div class="form-group">
<label for="">请选择你去过的城市</label>
<select multiple name="" id="" class="form-control">
<option value="">武汉</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</div>
<!-- 文本区域 -->
<div class="form-group">
<label for="">详情:</label>
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
</div>
<!-- 文件上传 -->
<div class="form-group">
<label for="">上传:</label>
<input type="file" class="form-control-file">
</div>
<!-- 排列 -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">Disabled checkbox</label>
</div>
<!-- 无标签 -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input position-static" >
</div>
<!-- 头部 -->
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control">
</div>
</div>
<!-- 横向排列 -->
<div class="form-row">
<div class="form-group col-md-3">
<label for="">用户名:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-3">
<label for="">密码:</label>
<input type="password" class="form-control">
</div>
<div class="form-group col-md-3">
<label for="">邮箱:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-3">
<label for="">选择</label>
<select name="" id="" class="form-control">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</div>
</div>
</form>
<!-- 输入组 -->
<!-- 输入框 -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control">
</div>
<!-- 去除输入框样式 -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" style="box-shadow:none">
</div>
<!-- 文本区域 -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<textarea name="" id="" cols="30" rows="3" class="form-control"></textarea>
</div>
<!-- 输入框大小 -->
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">大</span>
</div>
<input type="text" class="form-control">
</div>
<!-- 多个输入 -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
<!-- 按钮插件 -->
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary">asd</button>
</div>
<input type="text" class="form-control">
</div>
<!-- 自定义表格 -->
<div class="input-group">
<div class="input-group-prepend">
<label for="" class="input-group-text">选项</label>
</div>
<select name="" id="" class="custom-select">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</div>
</body>
</html>
