zoukankan      html  css  js  c++  java
  • Bootstrap基础3(表单)

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>表单</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.2.1.js"> </script>
    <script src="js/bootstrap.js"></script>
    </head>
    <body>
    <form action="#">
    <div class="form-group">
    <label for="email">Email address</label><!--当点击email字体时,焦点自动跳到email的输入框中-->
    <input type="email" class="form-control" id="email"placeholder="email">
    </div> <!--form-control 用来控制输入框,随页面大小的缩放,而缩放-->
    <div class="form-group">
    <label for="password">PassWord</label>
    <input type="password" class="form-control" id="password"placeholder="password">
    </div>

    <div class="form-group">
    <label for="file">PassWord</label>
    <input type="file" class="form-control" id="file">
    <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
    <label>
    <input type="checkbox">Check me Out
    </label>
    </div>

    <button type="submit"class="btn btn-default">submit</button>

    </form>

    <!--内联表单-->
    <h2>内联表单</h2>
    <form action="#"class="form-inline">

    <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <div class="input-group"><!--input-group 输入框组-->
    <div class="input-group-addon">$</div> <!--在input-group-addon 的 <span> 中放置额外的内容(可以是字符,也可以是按钮)-->
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    <div class="input-group-addon">.00</div>
    </div>
    </div>
    <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn btn-default">提交</button>
    <div class="checkbox">
    <label>
    <input type="checkbox"> Remember me
    </label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
    </form>

    <!--下拉列表(select)-->
    <select name="下拉列表" id="" class="form-control">
    <option value="">守望先锋</option>
    <option value="">英雄联盟</option>
    <option value="">暴风英雄</option>
    <option value="">虚幻争霸</option>
    </select>
    <hr/>
    <select name="下拉列表" id="" multiple class="form-control"> <!--multiple class 默认显示多选项-->
    <option value="">守望先锋</option>
    <option value="">英雄联盟</option>
    <option value="">暴风英雄</option>
    <option value="">虚幻争霸</option>
    </select>


    <div class="form-group has-success">
    <label class="text-success"> 用户名</label>
    <input type="text" class="form-control" />
    </div>
    <div class="form-group has-error">
    <label> 密码</label>
    <input type="text" class="form-control" disabled/><!-- disabled 禁止输入-->
    </div>

    </body>
    </html>
  • 相关阅读:
    [十七]SpringBoot 之 使用自定义的properties
    【转】手摸手,带你用vue撸后台 系列三(实战篇)
    【转】手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
    【转】手摸手,带你用vue撸后台 系列二(登录权限篇)
    【转】手摸手,带你用vue撸后台 系列一
    【16】vuex2.0 之 getter
    【15】vuex2.0 之 modules
    【14】vuex2.0 之 mutation 和 action
    【13】vuex2.0 之 state
    【12】vue-router 之路由重定向
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6885369.html
Copyright © 2011-2022 走看看