zoukankan      html  css  js  c++  java
  • Bootstrap内联表单

    有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block)。

    在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可。

    <form class="form-inline" role="form">
    <div class="form-group">
      <label class="sr-only" for="exampleInputEmail2">邮箱</label>
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
    </div>
    <div class="form-group">
      <label class="sr-only" for="exampleInputPassword2">密码</label>
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
    </div>
    <div class="checkbox">
    <label>
       <input type="checkbox">记住密码
    </label>
    </div>
    <button type="submit" class="btnbtn-default">进入邮箱</button>
    </form>

    运行显示结果:

     

    回过头来看示例,你或许会问,为什么添加了label标签,而且没有放置在”form-group”这样的容器中,input也不会换行;还有label标签怎么没显示出来。如果你仔细看,在label标签运用了一个类名“sr-only”,标签没显示就是这个样式将标签隐藏了。

    那么Bootstrap为什么要这么做呢?这样不是多此一举吗?其实不是的,如果没有为输入控件设置label标签,屏幕阅读器将无法正确识别。这也是Bootstrap框架另一个优点之处,为残障人员进行了一定的考虑。

  • 相关阅读:
    聊天工具分享bug
    Git命令查看代码提交次数
    短链接生成实例
    .Net MVC用户注册验证码
    js写验证码
    笔记
    jq获取数组中的某个字段拆分成字符串。
    IIS部署后中文Cookie乱码
    C#反射(Reflection)与特性(Attribute)实例
    jmm
  • 原文地址:https://www.cnblogs.com/agile2011/p/4107627.html
Copyright © 2011-2022 走看看