zoukankan      html  css  js  c++  java
  • bootstrap表单样式

    <body>
    <div class="container-fluid">  //container-fluid:全屏
    <form action="#" method="post"></form> //method:提交方法;action:提交之后跳转的页面
    <fieldset>     //组合表单中的相关元素
    <legend>用户登陆</legend>  //legend 元素为 fieldset 元素定义标题
    <div class="form-group">   
    <label>用户名:</label>
    <input type="text" class="form-control" name="name" placeholder="输入用户名"/>
    </div>
    <div class="form-group">
    <label>密码:</label>
    <input type="password" class="form-control" name="pwd"/>
    </div>
    <div class="form-group">
    <label><input type="checkbox"/>记住密码</label>
    </div>

    <div >
    <button type="submit" class="btn btn-default" >登陆</button>
    </div>
    <button type="submit"class="btn btn-default"></button>
    </fieldset>
    </div>

    <div class="container">
    <form action="#" method="post" class="form-inline">
    <fieldset>
    <legend>用户登陆</legend>
    <div class="form-group">
    <label class="sr-only">用户名:</label>
    <input type="text" class="form-control" name="name" placeholder="输入用户名"/>
    </div>
    <div class="form-group">
    <label>密码:</label>
    <input type="password" class="form-control" name="pwd"/>
    </div>
    <div class="form-group">
    <label><input type="checkbox"/>记住密码</label>
    </div>

    <div >
    <button type="submit" class="btn btn-default" >登陆</button>
    </div>
    <button type="submit"class="btn btn-default"></button>
    </fieldset>
    </div>
    <hr />

    <div class="container has-success">

    <form action="" method="post" class="form-horizontal" role="from">
    <div class="from-group">
    <label class="col-xs-2 control-label">用户名:</label>
    <input class="col-xs-2" type="text" />
    </div>
    <div class="from-group">
    <label class="col-xs-2 control-label">密 码:</label>
    <input class="col-xs-2"word" />
    </div><hr />
    <label>爱好:</label>
    <select name="ss" class="form-control" >
    <option value="1">羽毛球</option>
    <option value="1">篮球</option>
    <option value="1">乒乓球</option>
    <option value="1">足球</option>
    <option value="1">网球</option>
    </select>
    <hr />
    <br />
    <div class="form-group has-feedback">
    <label>用户名:</label>
    <input type="tel" autofocus disabled placeholder="输入姓名" class="form-control" name="name"/>
    <span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true"></span> //引入组件
    </div>
    </form>


    </div>
    </body>

  • 相关阅读:
    PHP抓取网络数据的6种常见方法
    Linux scp 使用详解
    php.ini的配置
    VS2013中,将Qt的GUI程序改为控制台程序
    Matlab 摄像机标定+畸变校正
    Camera 3D概念
    旋转矩阵
    #pragma pack()用法详解
    【Boost】boost库获取格式化时间
    C/C++读写csv文件
  • 原文地址:https://www.cnblogs.com/jinhong/p/6119683.html
Copyright © 2011-2022 走看看