Bootstrap3学习（三）

系统登录界面的实现

用简单代码实现系统的登录界面，如图是运行效果图：

下面附上部分代码：

 <form  id="from">
    <div class="test">
        <div class="design">
            <div class="col-md-12 text-center text-info">
                <h1>
                    XX学院实验室预约系统</h1>
            </div>

            <label for="user" class="col-md-2 control-label">用户名:</label>
            <div class="col-md-10">
                <input type="text" class="form-control " name="uesername" placeholder="请输入用户名">

            </div>
            <div class="col-md-10">
            </div>
            <label for="password" class="col-md-2 control-label">密码:</label>
            <div class="col-md-10">
                <input type="password" class="form-control" name="password" placeholder="请输入密码">
            </div>
            <div class="col-md-10">
            </div>
            <div class="col-md-10">
                <button type="button" id="btn" class="btn btn-success col-md-10">
                    登录</button>
            </div>
            <div class="col-md-10">
            </div>
            <div class="col-md-10 mycheckbox checkbox">
                <input type="checkbox" class="col-md-1">记住密码
            </div>
<div class="col-md-10">
            </div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 用户
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">管理员
    </label>
</div>
        </div>
    </div>
    </form>

参考链接：https://www.runoob.com/bootstrap/bootstrap-forms.html