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>

  • 相关阅读:
    【HDOJ4812】D Tree(点分治)
    【POJ1741】Tree(点分治)
    点分治模板
    【ZJOI2017 Round1练习】D4T2 trie(贪心,状压DP)
    【ZJOI2017 Round1练习&BZOJ4774】D3T2 road(斯坦纳树,状压DP)
    【ZJOI2017 Round1练习&BZOJ4773】D3T1 cycle(最小负环,倍增)
    【ZJOI2017 Round1练习&BZOJ5350】D5T1 masodik(DP,斜率优化)
    【SGU194&ZOJ2314】Reactor Cooling(有上下界的网络流)
    【HDOJ4322】Candy(费用流)
    jstl_fn方法库
  • 原文地址:https://www.cnblogs.com/jinhong/p/6119683.html
Copyright © 2011-2022 走看看