zoukankan      html  css  js  c++  java
  • bootstrap 基础表单 内联表单 横向表单

    bootstrap 基础表单 内联表单 横向表单

    <!DOCTYPE html>
    <html>
    
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
    </head>
    
    <body>
        <p class="btn-primary">基础表单</p>
        <form>
            <fieldset>
                <legend>User Login</legend>
                <div class="form-group">
                    <label for="">User</label>
                    <input type="email" class="form-control" placeholder="this is email input">
                </div>
                <div class="form-group">
                    <label for="">Pass</label>
                    <input type="password" class="form-control" placeholder="this is for password">
                </div>
                <div class="checkbox">
                    <label for="">
                        <input type="checkbox">ABC</input>
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Login</button>
            </fieldset>
        </form>
        <p class="btn-primary">内联表单</p>
        <form class="form-inline">
            <div class="form-group">
                <label for="">User</label>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="this is for user">
            </div>
            <div class="checkbox">
                <label for="chk2">
                    <input id="chk2" type="checkbox">Remember Pass</label>
            </div>
            <button type="submit" class="btn btn-default">Login</button>
        </form>
        <p class="btn-primary">横向表单</p>
        <form action="" class="form-horizontal" role="form">
            <div class="form-group">
                <label for="account" class="col-sm-2 control-label">UserName</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="account" placeholder="account place holder">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label for="chk">
                            <input id="chk" type="checkbox">remember me</label>
                    </div>
                </div>
            </div>
        </form>
        <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="dist/js/bootstrap.js"></script>
    </body>
    
    </html>
  • 相关阅读:
    黑客无处不在
    微博对我的影响
    WPF Chart DynamicDataDisplay的横坐标显示日期的解决方案
    java虚拟机中的字节码
    python解释器的使用
    Python学习环境设置
    变量的概念
    创建虚拟环境和常用包
    第三章笔记
    第一章笔记
  • 原文地址:https://www.cnblogs.com/stono/p/4852628.html
Copyright © 2011-2022 走看看