zoukankan      html  css  js  c++  java
  • Bootstrap系列 -- 13. 内联表单

      有时候我们需要将表单的控件都在一行内显示。在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">邮箱</label>
                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址"/>
            </div>
            <div class="form-group">
                <label class="sr-only" for="exampleInputPassword2">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码"/>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"/>
                    记住密码
       
                </label>
            </div>
            <button type="submit" class="btn btn-default">进入邮箱</button>
    </form>

      在label标签运用了一个类名“sr-only”,可以将label标签影藏起来

  • 相关阅读:
    Openlayers2中vector扩展FeatureLayer
    点图层叠加与事件响应
    geoserver服务wfs之GetFeature
    Echart在Openlayers的应用-航班的炫光特效
    Echart在Openlayers的应用-热力图
    Echart在Openlayers的应用
    WMS图例展示
    Java新手锻炼
    Java动手又动脑
    java递归问题小程序
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4598620.html
Copyright © 2011-2022 走看看