zoukankan      html  css  js  c++  java
  • Bootstrap 表单

    
    
    col-sm-2指的是12栅格系统中在小屏幕下占两列, control-label则指的是控制标签(label)样式的一个类,一般用于控制表单控件。
    <form class="form-horizontal" role="form">
        <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                        <input type="password" class="form-control" id="pwd" placeholder="请输入你的密码“>
                </div>
        </div>
    </form>
    label 的 for 属性:
    当点击label标签中的文字 会定位到 for指向的标签.
    <form role="form"></form> 中 role属性是给给读屏软件识别用的,方便有阅读障碍的人.

    对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldsetlegendlabel标签进行了定制。
    对于inputselecttextarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
    legend 下划线


    内联表单:
    有时候我们需要将表单的控件都在一行内显示,在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可。
    
    如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中,如:
    <form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">Email address</label>
    </div>
    <div class="form-group">
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
    </div>
    </form>
    单行输入框
    <form role="form">
    <div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
    </div>
    </form>

  • 相关阅读:
    2021年4月1日
    2021年3月31日
    2021年3月30日
    2021年3月29日
    2021年3月27日
    2021年3月26日
    2021年3月25日
    人件集阅读笔记03
    2020年3月24日
    构建之法阅读笔记02
  • 原文地址:https://www.cnblogs.com/cjshuang/p/5907068.html
Copyright © 2011-2022 走看看