<!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>