zoukankan      html  css  js  c++  java
  • bootscrap——Css学习2

    1.Bootstrap 提供了下列类型的表单布局:

    • 垂直表单(默认)
    • 内联表单
    • 水平表单

     创建基本表单的步骤:

    • 向父 <form> 元素添加 role="form"
    • 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
    • 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control

     1.1垂直表单:

    <form role="form">
      <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入名称">
      </div>
      <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
        <p class="help-block">这里是块级帮助文本的实例。</p>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox">请打勾
        </label>
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </form>

    1.2垂直表单:它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline

    • 默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。
    • 使用 class .sr-only,您可以隐藏内联表单的标签。
    <form class="form-inline" role="form">
      <div class="form-group">
        <label class="sr-only" for="name">名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入名称">
      </div>
      <div class="form-group">
        <label class="sr-only" for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox">请打勾
        </label>
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </form>

    1.3水平表单:

      创建步骤:(与上不同)

    • 向父 <form> 元素添加 class .form-horizontal
    • 把标签和控件放在一个带有 class .form-group 的 <div> 中。
    • 向标签添加 class .control-label

     

  • 相关阅读:
    python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
    python 全栈开发,Day73(django多表添加,基于对象的跨表查询)
    python 全栈开发,Day72(昨日作业讲解,昨日内容回顾,Django多表创建)
    bootstrap源码里的function加上了+号
    php get set方法深入理解
    20160519
    NetStatusEvent info对象的状态或错误情况的属性
    php 代码大全
    常见HTTP状态(304,200等)
    php strtotime 和 date 日期操作
  • 原文地址:https://www.cnblogs.com/lyfingchow/p/6547368.html
Copyright © 2011-2022 走看看