Bootstrap4 面包屑导航+表单+输入框组+自定义表单

更新时间:2023-04-03 18:11:02 阅读：评论：0

bootstrap4 面包屑导航（breadcrumb）

<ul class="breadcrumb">    <li class="breadcrumb-item"><a href="#">item1</a></li>    <li class="breadcrumb-item"><a href="#">item2</a></li>    <li class="breadcrumb-i节奏感强的英文歌曲tem"><a href="#">item3</a></li></ul>

也可以不用列表形式

<nav class="breadcrumb">    <a href="#" class="breadcrumb-item">item1&中国最大地震lt;/a>    <a href="#" class="breadcrumb-item">item2</a>    <a href="#" class="breadcrumb-item">item3</a></nav>

bootstrap4 表单

堆叠表单

<form action="">    <div class="form-group">        <label for="">urname</label>        <input type="text" class="form-control">    </div>    <div class="form-group">        <label for="">password</label>        <input type="password" class="form-control">    </div></form>

内联表单

所有内联表单中的元素都是左对齐的。
注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上

<form class="form-inline">    <div class="form-group">        <label for="">urname</label>        <input type="text" class="form-control">    </div>    <div class="form-group">        <label for="">password</label>        <input type="password" class="form-control">    </div></form>

bootstrap4 输入框组

<form>    <div class="input-group mb-3">        <div class="input-group-prepend">            <span class="input-group-text">@</span>        </div>        <input type="email">    </div>    <div class="input-group mb-3">                <input type="email">        <div class="input-group-append">            <span class="input-group-text">@qq.com</span>        </div>    </div></form>

文本信息可以使用复选框与单选框替代

<form>    <div class="input-group mb-3">        <div class="input-group-prepend">            <div class="input-group-text">                <input type="checkbox" name="" id="">            </div>        </div>        <input type="email">    </div>    <div class="input-group mb-3">                <input type="email">        <div class="input-group-append">            <div class="input-group-text">                <input type="radio" name="" id="">            </div>        </div>    </div></form>

输入框添加按钮组

<form>    <div class="input-group mb-3">        <div class="input-group-prepend">            <button type="button" class="btn btn-primary">提交</button>        </div>        <input type="email">    </div>    <div class="input-group mb-3">                <input type="email">        <div class="input-group-append">            <button type="submit" class="btn btn-primary">提交</button>        </div>    </div></form>

输入框中添加下拉菜单

<form>    <div class="input-group mb-3">        <div class="input-group-prepend">            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">提交</butt元宵节传说on>            <div class="dropdown-menu">                <a href="#" class="dropdown-item">item1</a>                &l司马迁父亲t;a href="#" class="dropdown-item">item2</a>                <a href="#" class="dropdown-item">item3</a>            </div>            </div>            <input type="email">    </div></form>

输入框组标签

<form>    <label for="email">write your email here:</label>    <div class="input-group mb-3">                <input type="email" id="email">        <div class="input-group-append">            <span class="input-group-text">@qq.com</span>        </div>        </div></form>

bootstrap4 自定义表单

自定义复选框

<form>    <div class="custom-control custom-checkbox">        <input type="checkbox" name="hobby" id="hobby" class="custom-control-input">        <label for="hobby" class="custom-control-label">hobby</label>    </div></form>

自定义单选框

<form>    <div class="custom-control custom-radio">        <input type="radio" name="hobby" id="hobby" class="custom-control-input">        <label for="hobby" class="custom-control-label">hobby</label>    </div></form>

自定义下拉选择菜单

<form>    <lect name="" id="" class="custom-lect-sm">        <option lected>请选择</option>        <option value="1">item1</option>        <option value="2">item2</关于运动的option>        <option value="3">item3</option>    </lect></form>

自定义滑块控件

<form>    <label for="range">range</label>    <input type="range" class="custom-range" /></form>

<form>    <div class="custom-file" style="width:200px;">        <label for="file" class="custom-file-label">选择文件</label>        <input type="file" class="custom-file-input" input="file" />    </div></form>