关于bootstrap--表单(下拉<select>、输入框<input>)

html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。

role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role=“button”,辅助工具就可以认出这实际上是个button比如,

<div role="checkbox" aria-checked="checked"></div>辅助工具就会知道,这个div实际上是个checkbox的角色,为选中状态。

1、下拉菜单(单选):

<form role="form">
  <div class="form-group">
    <select class="form-control">
        <option>踢足球</option>
        <option>游泳</option>
        <option>慢跑</option>
        <option>跳舞</option>
    </select>
  </div>
</form> 

2、下拉菜单(多选):

<form role="form">
  <div class="form-group">
    <select multiple class="form-control">
        <option>踢足球</option>
        <option>游泳</option>
        <option>慢跑</option>
        <option>跳舞</option>
    </select>
  </div>
</form> 

3、输入框(input):

</form>
<form role="form">
  <div class="form-group">
    <input type="email" class="form-control" placeholder="输入邮箱">

  </div>
</form> 

4、文本域(textare)

</form>
<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>(rows:可以输入的行数)
  </div>
</form>设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%auto

5、复选框checkbox和单选按钮radio(纵向排列)

<form role="form">
  <h3>案例1</h3>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
      喜欢
    </label>
  </div>
    <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜欢
    </label>
  </div>

</form>

6、复选框checkbox和单选按钮radio(横向排列)

1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

<form role="form">
    <div class="form-group">
      <label class="radio-inline">
        <input type="radio"  value="option1" name="sex"> 男性
      </label>
      <label class="radio-inline">
        <input type="radio"  value="option2" name="sex"> 女性
      </label>
      <label class="radio-inline">
        <input type="radio"  value="option3" name="sex"> 中性
      </label>
</div>
</form>
时间: 2024-10-10 04:37:55

关于bootstrap--表单(下拉<select>、输入框<input>)的相关文章

angular 使用 bootstrap多选下拉 select multi

跟单选下拉写法有差别,直接按照单选写的话,获取不到绑定的ng-model值 <select multiple ng-multiple="true" ng-model="ctrl.readyToSeletcedList" ng-options="item.name for item in ctrl.resources"> </select>

asp.net MVC4 表单 - 下拉框

1.下拉框代码方式 控制器内构建下拉项目: List<SelectListItem> list = new List<SelectListItem>(); list.Add(new SelectListItem() { Text = "计算机", Value = "computer" }); list.Add(new SelectListItem() { Text = "数学", Value = "math&qu

详解Bootstrap表单组件

表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss bootstrap仅对表单内的fieldset.legend.label标签进行了定制 fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; padding: 0;

bootstrap -- 表单控件

若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; bor

bootstrap 表单类

bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form>     添加 role="form" 把标签和控件放在   .form-control 类的div里面 向所有的文本元素   input  textarea   seclect   添加类   .form-control 三种表单布局类:  垂直表单(默认)    内联表单     水平表单 摘自菜鸟教程 默认表单<form ro

Bootstrap中的下拉菜单

下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ?  LESS版本:对应的源码文件为 dropdowns.less ?  Sass版本:对应的源码文件为 _dropdowns.scss ?  编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版

bootstrap里的下拉菜单

bootstrap里的下拉菜单用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性.将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素.然后加入组成菜单的 HTML 代码.以下代码就是生成一个简单的下拉菜单 <div class="dropdown">  <button class="btn btn-default dropdown-togg

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

单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如: <form role="form"

Bootstrap系列 -- 15. 下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</