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>
  • 相关阅读:
    REBOOT Reload 可安装在优盘的 Windows 和 DOS 启动盘
    给博客添加框架固定式背景音乐
    假期太长,很无聊
    CISCO NAT 配置
    网络地址转换全面通
    [转]drupal用程序创建node的方法
    drupal文件上传表单的例子
    drupal6重建menu遇到的问题
    运行效率与开发效率的随想
    joomla jSeblod的研究
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6885369.html
Copyright © 2011-2022 走看看