Bootstrap - 表单

作者: 廖马儿 | 来源:发表于2018-01-27 16:15 被阅读17次

    Bootstrap 给HTML大部分表单都设置了默认样式,我们可以给表单添加相应类名,以实现表单的水平排列,个性化定制等。

    代码:

    <form>
          <div class="form-group">
            <label for="">这是一个输入框:</label>
            <input type="text" class="form-control" placeholder="这是一个输入框">
          </div>
          <div class="form-group">
            <label for="">这是一个输入框:</label>
            <select class="form-control">
              <option>北京</option>
              <option>北京</option>
              <option>北京</option>
            </select>
          </div>
          <div class="form-group">
            <label for="">这是一个输入框:</label>
            <textarea class="form-control"></textarea>
          </div>
        </form>
    

    效果:


    图片.png

    class:
    对<form>标签添加:class="form-inline"
    可以让它水平排列:


    图片.png

    对Input设置大小可以添加class:

    input-sm
    input-lg
    

    应该使用form-group设置group。

    对<label>可以设置sr-only:隐藏掉提示信息。

    对表单控件添加颜色
    对form-group添加class:

    has-success
    has-feedback
    has-error
    

    eg:

    ...
      <div class="form-group has-error" >
            <label for="">这是一个输入框:</label>
            <textarea class="form-control "></textarea>
      </div>
    </form>
    

    效果:


    图片.png

    如果让<label>也有颜色的改变,需要对label添加class="control-label"

    <div class="form-group has-error" >
            <label class="control-label">这是一个输入框:</label>
            <textarea class="form-control "></textarea>
    </div>
    
    图片.png

    表单中的按钮

    Bootstrap中的按钮不仅可以用<a>标签去写,也可以使用<button>去写。

    <button>的大小:

    btn-lg
    btn-sm
    

    一般情况下,btn与btn-*结合使用。可以设置样式和颜色:

    btn
    btn-default
    btn-primary
    btn-success
    btn-info
    btn-warning
    btn-danger
    

    示例:

    <button class="btn btn-default">default</button>
    <button class="btn btn-success">success</button>
    <button class="btn btn-info">info</button>
    <button class="btn btn-warning">warning</button>
    <button class="btn btn-danger">danger</button>
    <button class="btn btn-link">danger</button>
    

    效果:


    图片.png

    使用disabled属性。

    <a class="btn btn-info" disabled="disabled">danger</a>
    

    相关文章

      网友评论

        本文标题:Bootstrap - 表单

        本文链接:https://www.haomeiwen.com/subject/aivnaxtx.html