表单

<div class="container">
    <div class="page-header">
        <h1>bootstrap表单</h1>
    </div>
    <div class="row">
        <div class="col-md-6">
            <form action="">
                <!-- 文本框 -->
                <div class="form-group">
                    <label for="">用户名：</label>
                    <input type="text" class="form-control">
                </div>
                <!-- 单选框 -->
                <div class="form-group">
                    <label for="">性别：</label>
                </div>
                <div class="radio">
                    <label for=""><input type="radio" name="sex" id="">男</label>
                </div>
                <div class="radio">
                    <label for=""><input type="radio" name="sex" id="">女</label>
                </div>
                <!-- 多选框 -->
                <div class="form-group">
                    <label for="">爱好：</label>
                </div>
                <div class="checkbox">
                    <label for=""><input type="checkbox" name="" id="">足球</label>
                    <label for=""><input type="checkbox" name="" id="">篮球</label>
                </div>
                <!-- 提交按钮 -->
                <div class="form-group">
                    <button class="btn btn-default btn-lg">注册</button>
                </div>
            </form>
        </div>
    </div>
    <div class="page-header">
        <h1>bootstrap行内内联表单</h1>
    </div>
    <div class="row">
        <div class="col-md-12">
            <form action="" class="form-inline">
                <div class="form-group">
                    <label for="">用户名：</label>
                    <input type="text" class="form-control" >
                </div>
                <div class="form-group">
                    <label for="username">密码：</label>
                    <input type="password" class="form-control" id='pwd'>
                </div>
                <div class="checkbox">
                    <label for=""><input type="checkbox" name="" id="">记住密码</label>
                </div>
                <div class="form-group">
                    <button class="btn btn-default">登录</button>
                </div>
            </form>
        </div>
    </div>
    <div class="page-header">
        <h1>bootstrap栅格表单</h1>
    </div>
    <div class="row">
        <div class="col-md-6">
            <!--form-horizontal是将栅格布局引入表单，form-group相当于row  -->
            <form action="" class="form-horizontal">
                <div class="form-group">
                    <label for="" class="col-md-2 control-label">用户名：</label>
                    <div class="col-md-10"><input type="text" class="form-control"></div>
                </div>
                <div class="form-group">
                    <label for="" class="col-md-2 control-label">密码：</label>
                    <div class="col-md-10"><input type="password" class="form-control"></div>
                </div>
                <div class="form-group">
                    <div class="col-md-10 col-md-offset-2">
                        <div class="checkbox">
                            <label for=""><input type="checkbox" name="" id="">记住密码</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10 col-md-offset-2">
                        <button class="btn btn-default btn-lg">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="page-header">
        <h1>bootstrap搜索框</h1>
    </div>
    <div class="row">
        <div class="col-md-6">
            <form action="https://www.baidu.com/s">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" name='wd'>
                        <span class="input-group-btn">
                            <button class="btn btn-default">搜索</button>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>