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>

  • 相关阅读:
    T-SQL取时间的不同方法
    JavaScript获取地址栏中的参数值并存入一个对象
    jquery.ocupload上传文件到指定目录
    Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化(三)
    Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化(二)
    Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化(一)
    Python2.x和3.x主要差异总结
    python学习视频整理
    Django-Rest-Framework 教程: 快速入门
    Django RESTful API 设计指南
  • 原文地址:https://www.cnblogs.com/jinhong/p/6119683.html
Copyright © 2011-2022 走看看