Bootstrap 4参考手册
Bootstrap4 表单
Bootstrap4 表单
Bootstrap4 表单
在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下,宽度都是设置为 100%。
Bootstrap4 表单布局
- 堆叠表单 (全屏宽度):垂直方向
- 内联表单:水平方向
Bootstrap 提供了两种类型的表单布局:
堆叠表单
以下实例使用两个输入框,一个复选框,一个提交按钮来创建堆叠表单:
实例
尝试一下 »
内联表单
所有内联表单中的元素都是左对齐的。
注意:在屏幕宽度小于 576px 时为垂直堆叠,如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。
内联表单需要在 <form> 元素上添加 .form-inline类。
以下实例使用两个输入框,一个复选框,一个提交按钮来创建内联表单:
实例
尝试一下 »
Bootstrap4 表单 |
---|
Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
主页 | https://getbootstrap.com/ |
源码 | https://github.com/twbs/bootstrap |
版本 | 4 |
发布版本 | 4.0.0-beta.2 |