intellij idea下载 centos linq knockoutjs datatables vue网页 plsql连接mysql python逻辑运算符 简单python脚本实例 java实战 java编程学习入门 java重载和重写的区别 java的random java截取 java环境下载 linux入门 linux基础教程 linux镜像安装 lanhelper c语言程序100例 福昕阅读器绿色版 jlabel linux定时任务 视频编辑专家下载 ios12录屏 剑灵龙骨卷轴 vc运行库合集 主播音效 远程桌面管理工具 樱桃b站怎么发动态 js对象深拷贝 set函数 在线正则表达式测试 角标怎么打 jquery版本 dnf虚拟机 谷歌浏览器无痕模式 cad怎么截图 电商源码 ppt分栏
当前位置: 首页 > 学习教程  > 

1-18. Bootstrap 表单(各种输入框、控件汇总)

2020/10/16 17:43:12 文章标签: bootstrap文本框

Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select 输入框(input) 最常见的表单文本字段是输入框 input Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、pas…

Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select

 

输入框(input)

最常见的表单文本字段是输入框 input

Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

适当的 type 声明是必需的,这样才能让 input 获得完整的样式

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

 

文本域(textarea)

进行多行输入的时,则可以使用文本框 textarea。必要时可以改变 rows 属性

如果禁止文本域进行大小改变可以加 style="resize:none";属性

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

 

复选框(Checkbox)和单选框(Radio)

  • 复选框和单选按钮用于让用户从一系列预设置的选项中进行选择
  • 当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio
  • 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline,控制它们显示在同一行上
<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
  <label>
    <input type="checkbox" value="">选项 1
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" value="">选项 2
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>选项 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
  </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1">选项 1
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox2" value="option2">选项 2
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox3" value="option3">选项 3
  </label>
  <label class="checkbox-inline">
    <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>选项 1
  </label>
  <label class="checkbox-inline">
    <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">选项 2
  </label>
</div>

 

选择框(Select)

  • 想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。
  • 使用 <select> 展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。
  • 使用 multiple="multiple" 允许用户选择多个选项
<form role="form">
  <div class="form-group">
    <label for="name">选择列表</label>
    <select class="form-control">
      <option>江苏</option>
      <option>浙江</option>
      <option>山西</option>
      <option>云南</option>
      <option>河南</option>
    </select>
	
	<br><br><br><br><br><br><br>
		
    <label for="name">可多选的选择列表</label>
    <select multiple class="form-control">
      <option>江苏</option>
      <option>浙江</option>
      <option>山西</option>
      <option>云南</option>
      <option>河南</option>
    </select>
  </div>
</form>

 

静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">用户名</label>
    <div class="col-sm-10">
      <p class="form-control-static">RONIN.FANG</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
    </div>
  </div>
</form>

表单控件状态

除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,并提供了表单验证的 class

  • 输入框焦点

当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow。

  • 禁用的输入框 input

如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

  • 禁用的字段集 fieldset

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

  • 验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">聚焦</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入(Fieldset disabled)</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单(Fieldset disabled)</label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>禁止选择</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success">
    <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
    </div>
  </div>
  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>
  <div class="form-group has-error">
    <label class="col-sm-2 control-label" for="inputError">输入错误</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
    </div>
  </div>
</form>

 

表单控件大小

使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度

<form role="form">
  <div class="form-group">
    <input class="form-control input-lg" type="text" placeholder=".input-lg">
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="默认输入">
  </div>
  <div class="form-group">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">
  </div>
  <div class="form-group"></div>
  <div class="form-group">
    <select class="form-control input-lg">
      <option value="">.input-lg</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control">
      <option value="">默认选择</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control input-sm">
      <option value="">.input-sm</option>
    </select>
  </div>
  <div class="row">
    <div class="col-lg-2">
      <input type="text" class="form-control" placeholder=".col-lg-2">
    </div>
    <div class="col-lg-3">
      <input type="text" class="form-control" placeholder=".col-lg-3">
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder=".col-lg-4">
    </div>
  </div>
</form>

 

表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。

为了添加一个占用整个宽度的内容块,请在 <input> 后使用 .help-block。

<form role="form">
  <span>帮助文本实例</span>
  <input class="form-control" type="text" placeholder="请输入用户名">
  <span class="help-block">用户名只能是字母或数字</span>
</form>

 


本文链接: http://www.dtmao.cc/news_show_300017.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?