Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

2024-04-23 08:52:04

单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。

为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”，如：

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>运行的结果

表单控件(下拉选择框select)

Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。

<form role="form">
<div class="form-group"><select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class="form-group"><select multiple class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
</div>
</form>

运行结果：

表单控件(文本域textarea)

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form"><div class="form-group"><textarea class="form-control" rows="3"></textarea></div>
</form>

转载于:https://www.cnblogs.com/agile2011/p/4107669.html

Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）相关推荐

Bootstrap 表单控件的状态
在使用过程中,每个控件可能都会有很多状态,通过表单控件的状态,可以给用户或访问者提供一些有用的反馈. Bootstrap提供了 4 种状态,分别是获得焦点状态.无效输入状态.禁用状态.验证状态,并为每 ...
Bootstrap 表单控件的尺寸
在Bootstrap中,有三种设置控件尺寸的方法,一种是让控件成为块级元素,一种是使用相对尺寸,一种是使用网格尺寸. 1.让控件成为块级元素如果想让控件像块级元素一样占满容器,就可以为它添加 .in ...
Bootstrap表单控件的尺寸
控件的尺寸在Bootstrap中,可以通过类似.input-lg的类为控件设置高度,类似.col-*的类为控件设置宽度. 1.高度尺寸一般情况下,控件的默认高度就能满足要求.当然,你也可以为控件添 ...
bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block;width: 100%;height: 34px;padding: 6px 12px;font-size: 14px;li ...
Angular学习笔记（五） - 自定义表单控件
本文简单介绍封装使用ngModel实现自定义表单控件的过程. NgModel 相关 NgModel NgModel用于从作用域创建一个FormControl实例,并将它绑定到一个表单控件元素. ngM ...
自定义组合控件：下拉选择框
Spinner 自定义组合控件之下拉选择框项目概述下拉选择框主要是通过在EditText 下用PopupWindow 动态显示ListView 控件来实现的.下拉选择框可以方便用户的输入效率,以此 ...
JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮
JS对象迭代知识点 v-for v-for 循环JS对象,把对象内容循环显示到页面上. <div id="myApp"><h1>JS对象迭代</h1 ...
css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略
0804 css3伪类 target 突出显示活动的 HTML 锚 div:target{background: #0e3757;} 表单控件伪类 <style>input:enabled ...
bootstrap 大小表格,表单控件大小
前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...

最新文章

热门文章