Bootstrap 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 视口 -->
    <title>bootstrap表单</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style>
        .glyphicon-search{
            font-size: 13px;
            color: gold;
            /*在修改glyphicons的时候,
            类名可以省却 glyphicons, 直接填入需要更改式样的图片名称.(glyphicon-search)
            */
        }
        #username022{
            color: violet;
        }
        .glyphicon-home{
            color:coral;
        }
    </style>
</head>
<body>
    <h2>表单</h2>
    <div class="container">
        <div class="row">
            <form action="">
                <div class="form-group">
                    <!-- 
                        form-control 能够使输入框占据父集100%,类似于, button-block
                     -->
                    <label for="username"><span class="glyphicon glyphicon-user"></span>用户名:form-control</label>
                    <input type="text" name="" id="username" class="form-control">
                    <!-- 此处可以不用group包裹可达到同样效果, input分别使用group包裹更稳定. -->
                    <!-- <label for="password">密码:form-control</label>
                    <input type="text" name="" id="password" class="form-control"> -->
                </div>
                <div class="form-group">
                    <label for="password"><span class="glyphicon glyphicon-asterisk"></span>密码:form-control</label>
                    <input type="password" name="" id="password" class="form-control">
                </div>
            </form>
            <br>
            <br>

            <form action="" class="form-inline">
                <!-- form-inline   增加表单格式到form标签. -->
                <div class="form-group">
                    <label for="username02"><span id="username022" class="glyphicon glyphicon-asterisk"></span>用户名:form-inline</label>
                    <input type="text" name="" id="username02" class="form-control">
                </div>
                <div class="form-group">
                    <label for="password02">密码:form-inline</label>
                    <input type="password" name="" id="password02" class="form-control">
                </div>
            </form>
            <br>
            <br>

            <form action="" class="form-horizontal">
                <!-- form-horizontal . 水平排列表格, 使表单元素可分row大小 -->
                <div class="form-group">
                    <label for="username02" class="col-md-2">用户名:form-inline</label>
                    <div class="col-md-4">
                        <!-- 在表单中, 所有的input输入框,都需要再加一层包裹 不然大小分配对齐无用 -->
                        <input type="text" name="" id="username02" class="form-control col-md-4">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password02" class=" col-md-2">密码:form-inline</label>
                    <div class="col-md-4">
                        <input type="password" name="" id="password02" class="form-control">
                    </div>
                </div>
            </form>
            <br>

            <form action="" class="form-horizontal">
                <div class="form-group form-group-lg">
                    <label for="username02" class="col-md-2"><span class="glyphicon glyphicon-home"></span>地址:form-group-lg</label>
                    <div class="col-md-4">
                        <input type="text" name="" id="username02" class="form-control col-md-4">
                    </div>
                </div>
                <div class="form-group form-group-md">
                    <label for="password02" class=" col-md-2">邮编:form-group-md</label>
                    <div class="col-md-4">
                        <input type="password" name="" id="password02" class="form-control">
                    </div>
                </div>
                <div class="form-group form-group-xs">
                    <label for="password02" class=" col-md-2"><span class="glyphicon glyphicon-phone"></span>手机号:form-group-xs</label>
                    <div class="col-md-4">
                        <input type="password" name="" id="password02" class="form-control">
                    </div>
                </div>
            </form>

            <form>
                <div class="input-group">
                    <!-- 
                    input-group 组件, 能够使两个不同因素叠加在一起
                    
                     -->

                    <input type="text" id="email" class="form-control col-md-3">
                    <span for="email" class="input-group-addon">@</span>
                    <input type="text" id="email" class="form-control">
                </div>

            <br>
            </form>
            <form action="">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="btn btn-default input-group-addon">搜索</span>
                    <span class="btn btn-default input-group-addon">搜索</span>
                </div>
            </form>
            <br>
            <form action="">
                <div class="input-group">
                    <input type="text" class="form-control">

                    <span class="input-grop-btn">
                        <!-- 在使用按钮配合input框时候, 可以使用inputgroup-addon,也可以通过创建input-group-btn组,在中间增添按钮 -->
                        <button class="btn btn-info">搜索</button>
                        <!-- 通常做按钮使用三种标签:
                            input , a , button 
                         -->
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-search"></span>
                            <!-- glyphicon 字形图标 可以直接通过style进行修改式样. -->
                        </button>
                    </span>
                </div>

            </form>
                
            <br>

        </div>
    </div>
</body>
</html>

 

posted @ 2019-08-13 21:18  Jrri  阅读(139)  评论(0编辑  收藏  举报