Bootstrap4 自定义表单


自定义复选框

如果要自定义一个复选框,可以设置 <div> 为父元素,类为 .custom-control.custom-checkbox,复选框作为子元素放在该 <div> 里面,然后复选框设置为 type="checkbox",类为 .custom-control-input
复选框的文本使用 label 标签,标签使用 .custom-control-label 类,label 的 for 属性值需要匹配复选框的 id。


  <div class="custom-control custom-checkbox">
    
    <label class="custom-control-label" for="customCheck">自定义复选框</label>
  </div>

Bootstrap4 自定义表单

自定义单选框

如果要自定义一个单选框,可以设置 <div> 为父元素,类为 .custom-control.custom-radio,复选框作为子元素放在该 <div> 里头,然后单选框设置为 type="radio",类为 .custom-control-input
单选框的文本使用 label 标签,标签使用 .custom-control-label 类,label 的 for 属性值需要匹配单选框的 id。


  <div class="custom-control custom-radio">
    
    <label class="custom-control-label" for="customRadio">自定义单选框</label>
  </div>

Bootstrap4 自定义表单

自定义控件显示在同一行

我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件,这样自定义表单控件就能显示在同一行:


  <div class="custom-control custom-radio custom-control-inline">
    
    <label class="custom-control-label" for="customRadio">自定义单选框 1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    
    <label class="custom-control-label" for="customRadio2">自定义单选框 2</label>
  </div>

Bootstrap4 自定义表单

自定义选择菜单

创建自定义选择菜单可以在 元素上添加 .custom-select 类:


  
    自定义选择菜单
    蜻蜓树
    蜻蜓屋
    一千零一站
  

Bootstrap4 自定义表单
如果我们要设置自定义选择菜单大小,可以使用 .custom-select-sm、.custom-select-lg 来设置它们的大小:


  <!-- 小 -->
  
    比较小的自定义选择菜单
    蜻蜓树
    蜻蜓屋
    一千零一站
  
  <!-- 大 -->
  
    比较大的自定义选择菜单
    蜻蜓树
    蜻蜓屋
    一千零一站
  

Bootstrap4 自定义表单

自定义滑块控件

我们可以在 inputtype="range" 的输入框中添加 .custom-range 类来设置自定义滑块控件:


  <label for="customRange">自定义滑块控件</label>
  

Bootstrap4 自定义表单

自定义文件上传控件

我们可以在父元素添加 .custom-file 类,然后在 input 设置为 type="file" 并添加 .custom-file-label
上传控件的文本使用 label 标签,标签使用 .custom-file-label 类,label 的 for 属性值需要匹配复选框的 id。


  <div class="custom-file">
    
    <label class="custom-file-label" for="customFile">选择文件</label>
  </div>

Bootstrap4 自定义表单


<< Bootstrap4 输入框组 Bootstrap4 轮播 >>
  • 作者 建站迷

    建站迷

    让天下没有难做的网站!
    解决中小型企业的无站之伤。



没有账号? 忘记密码?

社交账号快速登录