Bootstrap表单组件详解：样式、布局和效果

Bootstrap 表单组件教程详解 Bootstrap 框架提供了丰富的表单组件，包括文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。这些组件可以通过不同的 Bootstrap 版本实现，例如 LESS 和 SASS。 在 Bootstrap 框架中，fieldset、legend、label 标签进行了定制。fieldset 标签的样式设置包括:min-width: 0; padding: 0; margin: 0; border: 0;。legend 标签的样式设置包括：display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333; border: 0; border-bottom: 1px solid #e5e5e5;。label 标签的样式设置包括：display: inline-block; margin-bottom: 5px; font-weight: bold;。 除了这些基本标签外，Bootstrap 框架还提供了一些其他的表单元素，例如 input、select、textarea 等。这些元素可以通过添加类名 .form-control 来实现效果，例如： * 宽度变成了 100%； * 设置了一个浅灰色（#ccc）的边框 * 具有 4px 的圆角 * 设置阴影效果，并且元素得到焦点时，阴影和边框效果会有所变化 * 设置了 placeholder 的颜色为 #999 在 Bootstrap 框架中，还提供了内联表单的功能。可以在 input 元素之前添加一个 label 标签，但这可能会导致 input 元素换行显示。如果必须添加 label 标签，并且不想让 input 元素换行，可以将 label 标签放在容器 .form-group 中，例如： <div class="form-group"> <label class="sr-only">邮箱地址</label> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="请输入邮箱号"> </div> Bootstrap 框架还提供了水平表单的功能，可以通过添加类名 .form-inline 来实现，例如： <form class="form-inline"> <!-- 表单控件 --> </form> 这种方式可以将表单控件设置成内联块元素（display: inline-block），让表单控件在一行显示。 Bootstrap 框架提供了丰富的表单组件和样式设置，可以满足不同的开发需求。