前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BootStrap干货篇之表单

BootStrap干货篇之表单

作者头像
爱撒谎的男孩
发布2019-12-31 11:19:13
1.2K0
发布2019-12-31 11:19:13
举报
文章被收录于专栏:码猿技术专栏

文章目录

  1. 1. BootStrap干货篇之表单
    1. 1.1. 基本介绍
    2. 1.2. 内联表单
    3. 1.3. 水平表单
    4. 1.4. 多选和单选框
      1. 1.4.0.1. 内联单选和多选框
      2. 1.4.0.2. 不带label文本的Checkbox 和 radio
      3. 1.4.0.3. 下拉列表(select)
  2. 1.5. 静态控件
  3. 1.6. 参考文章
  4. 1.7. 作者说

BootStrap干货篇之表单

基本介绍

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input><textarea><select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 基本实例:

代码语言:javascript
复制
<div class='container'>
    <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
    </div>

说明:这里的form-control是对所有的输入控件而言的,源码中将width设置为100%,表示会将这个输入控件占满一整行,form-group是用来对labelinput更好的排版的,其中还有form-group-sm,form-group-lg,源码中分别利用这个对带有form-control的控件设置了不同的高度,具体看源码,不过正常情况下还是使用form-group

内联表单

<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)从源码中可以看到对form-inline下的form-group,form-control,form-control-static,input-group,radio,checkbox都是用了display:inline-block 注意:

  • Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我们将这些元素的宽度设置为width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。
  • 一定要有label标签,如果不想要label标签可以设置.sr-only将其隐藏如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案,比如 aria-labelaria-labelledbytitle 属性。如果这些都不存在,屏幕阅读器可能会采取使用 placeholder 属性,如果存在的话,使用占位符来替代其他的标记,但要注意,这种方法是不妥当的。

实例:

代码语言:javascript
复制
<form class="form-inline">    <!--指定了form-inline类-->
  <div class="form-group">
  <!--label中的for标签是用于绑定组件的,如果指定了for标签,input中的id也和for标签的内容相同,那么就会当鼠标点击<label>内容时会自动聚焦在input上-->
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

水平表单

水平表单通过指定为form指定form-horizontal类来设定,其中可以使用BootStrap的栅栏系统设置水平间距,其中的form-groupdiv就表示一行了,相当于<div class='row'></div>,因此只需要在labelinput中指定列就行了,但是input标签不能直接使用,要在外面加上div 实例:

代码语言:javascript
复制
<form class="form-horizontal">
  <div class="form-group">   
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">   <!--相当与<div class='row'></div>-->
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

说明上面的label标签中的control-label主要的作用是设置文字的对齐方式为左对齐,如果不加这个将会在右边出现很大的空白

多选和单选框

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。其中提供的类有checkbox,checkbox-inline,radio,radio-inline

内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。 实例:

代码语言:javascript
复制
<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="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
<div class="checkbox-inline">
            <label for="sex"><input type="checkbox">男</label>
    </div>
    <div class="checkbox-inline">
        <label for="sex"><input type="checkbox">男</label>
    </div>
不带label文本的Checkbox 和 radio

如果需要 <label> 内没有文字,输入框(input)正是你所期望的。 目前只适用于非内联checkboxradio。 请记住,仍然需要为使用辅助技术的用户提供某种形式的 label(例如,使用 aria-label)。 实例:

代码语言:javascript
复制
<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>
下拉列表(select)

实例:

代码语言:javascript
复制
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行,为<p>标签设置为form-control-static 实例:

代码语言:javascript
复制
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

参考文章

作者说 本人秉着方便他人的想法才开始写技术文章的,因为对于自学的人来说想要找到系统的学习教程很困难,这一点我深有体会,我也是在不断的摸索中才小有所成,如果你们觉得我写的不错就帮我推广一下,让更多的人看到。另外如果有什么错误的地方也要及时联系我,方便我改进,谢谢大家对我的支持

版权信息所有者:chenjiabing 如若转载请标明出处:chenjiabing666.github.io6

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-04-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • BootStrap干货篇之表单
    • 基本介绍
      • 内联表单
        • 水平表单
          • 多选和单选框
            • 静态控件
              • 参考文章
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档