zoukankan      html  css  js  c++  java
  • 表单

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

    Example block-level help text here.

    复制
    复制
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter 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>

    不要将表单组合输入框组混合使用

    不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

    内联表单

    为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

    可能需要手动设置宽度

    在 Bootstrap 中,输入框和单选/多选框控件默认被设置为  100%; 宽度。在内联表单,我们将这些元素的宽度设置为  auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。

    一定要添加 label 标签

    如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label 设置 .sr-only 类将其隐藏。 There are further alternative methods of providing a label for assistive technologies, such as the aria-labelaria-labelledby or title attribute. If none of these is present, screen readers may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised.

  • 相关阅读:
    企业微信开发基本步骤
    简单的企业微信开发 前后端
    真分页
    企业微信“三次握手”
    Android项目的图标
    Android项目的目录结构
    Android系统提供了哪些东西,供我们可以开发出优秀的应用程序
    Android中的四层架构,五块区域
    MySQL中的concat函数
    Activity生命周期
  • 原文地址:https://www.cnblogs.com/langwo/p/7102601.html
Copyright © 2011-2022 走看看