700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Bootstrap 表单控件一(单行输入框input 下拉选择框select 文本域textarea)

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

时间:2024-04-28 23:39:56

相关推荐

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

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

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

<form role="form"><div class="form-group"><inputtype="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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。