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>

  • 相关阅读:
    演示-JQuery属性选择器
    演示--Jquery核心选择器
    JQuery选择器
    SoapUI 接口测试之post提交本地数据文件
    Python使用MySQLConnector/Python操作MySQL、MariaDB数据库
    测试思想-测试设计 测试用例设计需要注意的几个点
    Jenkins 为Jenkins添加Windows Slave远程执行python项目脚本
    测试思想-测试设计&#160;接口测试用例设计实践总结
    测试思想-测试设计 测试用例设计最新实践总结-来自不断的追求
    Python 基于Python实现邮件发送
  • 原文地址:https://www.cnblogs.com/jinhong/p/6119683.html
Copyright © 2011-2022 走看看