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

概述Bootstrap4 面包屑导航（Breadcrumb） <ul class="breadcrumb"> <li class="breadcrumb-i

bootstrap4 面包屑导航（Breadcrumb）

<ul class="breadcrumb">    li ="breadcrumb-item"><a href="#">item1</a></li>item2>item3>ul>

 

 

也可以不用列表形式

nav ="#" classnav>

 

 

bootstrap4 表单

堆叠表单

form action=""div ="form-group">        label for>usernamelabelinput type="text"="form-control"div>password="password"form>

 

 

内联表单

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

="form-inline">

 

 

bootstrap4 输入框组

="input-group mb-3"="input-group-prepend">            span ="input-group-text">@span="email">                ="input-group-append">@qq.com>

 

 

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

>                ="checkBox" name="" ID="radio">

 

 

输入框添加按钮组

button ="button"="btn btn-primary">提交button="submit">

 

 

输入框中添加下拉菜单

="btn btn-primary dropdown-toggle" data-toggle="dropdown"="dropdown-menu"="dropdown-item">            >

 

 

输入框组标签

>write your email here:="email">        >

 

 

bootstrap4 自定义表单

自定义复选框

="custom-control custom-checkBox"="hobby"="custom-control-input"="custom-control-label">hobby>

 

 

自定义单选框

="custom-control custom-radio">

 

 

自定义下拉选择菜单

select name="custom-select-sm"option selected>请选择optionvalue="1"="2"="3"select>

 

 

自定义滑块控件

="range">range="range"="custom-range" />>

 

 

="custom-file" style="wIDth:200px;"="file"="custom-file-label">选择文件="custom-file-input" input="file" />    >

 

 

总结一下，自定义表单控件比默认的表单控件颜值更高！

 

总结

以上是内存溢出为你收集整理的Bootstrap4 面包屑导航+表单+输入框组+自定义表单全部内容，希望文章能够帮你解决Bootstrap4 面包屑导航+表单+输入框组+自定义表单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。