• 表单


    在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可。
    内联表单实现原理非常简单,欲将表单控件在一行显示,就需要将表单控件设置成内联块元素(display:inline-block)。
    /*源码请查阅bootstrap.css文件第1928行~第1962行*/

    如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中

    multiple

    1.     <div class="form-group">
        <select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          </select>
      </div>

    效果:

    2.<div class="form-group">
          <select multiple class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
      </div>

    效果:

    1.表单的禁用状态      只需要在需要禁用的表单控件上加上“disabled”

    <input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>

    2.据说对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用

    <form role="form">
    <fieldset disabled>
    <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>
        …
    </fieldset>

    </form>


    1、.has-warning:警告状态(黄色) .has-error:错误状态(红色) .has-success:成功状态(绿色)
    <form role="form">
      <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      </div>
      <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
      </div>
      <div class="form-group has-error">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
      </div>
    </form> 
    效果:


    <form role="form">
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
      <div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
      </div>

    </form>
    效果



    按钮   多标签支持

    要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果
    <button class="btn btn-default" type="button">button标签按钮</button>
    <input type="submit" class="btn btn-default" value="input标签按钮"/>
    <a href="##" class="btn btn-default">a标签按钮</a>
    <span class="btn btn-default">span标签按钮</span>
    <div class="btn btn-default">div标签按钮</div>
    注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用buttona标签来制作按钮。
    按钮颜色

    
    
  • 相关阅读:
    iOS开发基础-UITableView基本属性
    iOS开发基础-UITableView控件简单介绍
    iOS开发基础-UIScrollView实现图片缩放
    iOS开发基础-UIScrollView基础
    iOS开发基础-序列帧动画之Tom猫
    iOS开发基础-KVC简单介绍
    iOS开发基础-九宫格坐标(6)
    iOS开发基础-九宫格坐标(5)
    iOS开发基础-九宫格坐标(4)
    iOS开发基础-九宫格坐标(3)之Xib
  • 原文地址:https://www.cnblogs.com/zhuyuanyuan/p/4209602.html
Copyright © 2020-2023  润新知