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>
  • 相关阅读:
    Android 开发之旅:view的几种布局方式及实践
    递归列举从数组b()中选出某些元素(允许重复)使其和等于num的所有组合
    被感动的感觉
    Table of ASCII Characters
    Export selection of word document as an image file(2)
    ZendStudiov6.0注册机
    windows mobile中求存储空间大小
    微软宣布20号起黑屏警告XP专业版盗版用户
    百度竟价 统计与重定向
    大象Thinking in UML早知道 006 非功能性需求
  • 原文地址:https://www.cnblogs.com/stono/p/4852628.html
Copyright © 2011-2022 走看看