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.

  • 相关阅读:
    mysql_单表查询
    mysql_建表
    MySQL基础
    JS_左边栏菜单
    Vue框架之组件系统
    Vue常用语法及命令
    Django的缓存,序列化,ORM操作的性能
    Django中的form表单
    Django中的auth模块
    AJAX请求提交数据
  • 原文地址:https://www.cnblogs.com/langwo/p/7102601.html
Copyright © 2011-2022 走看看