开心档 - 软件开发入门之 Bootstrap4 自定义表单

简介: Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。

Bootstrap4 自定义表单

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-

Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。

自定义复选框

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-

如果要自定义一个复选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-checkbox,复选框作为子元素放在该 <div> 里头,然后复选框设置为 type="checkbox" ,类为 .custom-control-input。

复选框的文本使用 label 标签,标签使用 .custom-control-label 类,labelfor 属性值需要匹配复选框的 id。

Bootstrap4 实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-custom.html#bootstrap4-%E5%AE%9E%E4%BE%8B

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">自定义复选框</label>
  </div>
</form>

自定义单选框

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-

如果要自定义一个单选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-radio,单选框作为子元素放在该 <div> 里头,然后单选框设置为 type="radio" ,类为 .custom-control-input。

单选框的文本使用 label 标签,标签使用 .custom-control-label 类,labelfor 属性值需要匹配单选框的 id

Bootstrap4 实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-custom.html#bootstrap4-%E5%AE%9E%E4%BE%8B-1

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">自定义单选框</label>
  </div> 
</form>

自定义控件显示在同一行

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-custom.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%A7%E4%BB%B6%E6%98%BE%E7%A4%BA%E5%9C%A8%E5%90%8C%E4%B8%80%E8%A1%8C

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

Bootstrap4 实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-custom.html#bootstrap4-%E5%AE%9E%E4%BE%8B-2

<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">自定义单选框 1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">自定义单选框 2</label>
  </div> 
</form>

自定义选择菜单

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-

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

Bootstrap4 实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-

<form>
  <select name="cars" class="custom-select-sm">
    <option selected>自定义选择菜单</option>
    <option value="Google">Google</option>
    <option value="Runoob">Runoob</option>
    <option value="Taobao">Taobao</option>
  </select>
</form>

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

Bootstrap4 实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-

<form>
  <!-- 小 -->
  <select name="cars" class="custom-select-sm">
    <option selected>比较小的自定义选择菜单</option>
    <option value="Google">Google</option>
    <option value="Runoob">Runoob</option>
    <option value="Taobao">Taobao</option>
  </select>
  <!-- 大 -->
  <select name="cars" class="custom-select-lg">
    <option selected>比较大的自定义选择菜单</option>
    <option value="Google">Google</option>
    <option value="Runoob">Runoob</option>
    <option value="Taobao">Taobao</option>
  </select>
</form>

自定义滑块控件

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-

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

Bootstrap4 实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-

<form>
  <label for="customRange">自定义滑块控件</label>
  <input type="range" class="custom-range" id="customRange" name="points1">
</form>

自定义文件上传控件

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-custom.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E6%8E%A7%E4%BB%B6

我们可以在父元素添加 .custom-file 类,然后在 input 设置为 type="file" 并添加 .custom-file-input:

上传控件的文本使用 label 标签,标签使用 .custom-file-label 类,labelfor 属性值需要匹配上传控件 id

Bootstrap4 实例

http://www.kxdang.com/topic/bootstrap4/bootstrap4-forms-

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

相关文章
N..
|
2月前
|
开发框架 前端开发 UED
Bootstrap表单
Bootstrap表单
N..
33 0
|
10月前
|
前端开发 JavaScript 数据安全/隐私保护
Bootstrap 表单样式-水平排列
Bootstrap 表单样式-水平排列
50 0
|
12天前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
|
16天前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
|
2月前
|
前端开发 容器
bootstrap table 设置自定义列宽
【5月更文挑战第4天】bootstrap table 设置自定义列宽
|
2月前
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程(十五):表单
Bootstrap 5 保姆级教程(十五):表单
|
9月前
|
Web App开发 移动开发 前端开发
|
10月前
|
前端开发
Bootstrap 表单样式
Bootstrap 表单样式
27 0
N..
|
2月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
27 0
|
9月前
|
前端开发 容器