zoukankan      html  css  js  c++  java
  • 用bootstrap写一个登陆页

        <div class="container">
                <p class="text-center marginTop35">后台管理系统</p>
                <p class="text-center marginTop20">会议管理系统</p>
                <div class="row marginTop20">
                    <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4  border">
                        <div class="row marginTop35">
                            <div class="col padding10">
                                <p class="text-info">请输入您的登录信息</p>
                            </div>
                        </div>
                        
                        <div class="row marginTop20">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Recipient's username">
                                <span style="vertical:top;" class="input-group-addon "><i class="glyphicon glyphicon-user"></i></span>
                            </div>
                        </div>
                        <div class="row marginTop20">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="登录密码">
                                <span class="input-group-addon "><i class="glyphicon glyphicon-lock"></i></span>
                            </div>
                        </div>
                        <div class="row marginTop20">
                            <div class="col-xs-6">
                                <div class="checkbox">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" id="inlineCheckbox2" value="option2"> 管理员方式登录
                                    </label>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="checkbox  text-right text-danger">
                                    <label class="checkbox-inline">
                                        <input class="sr-only" type="checkbox" id="inlineCheckbox2" value="option2"> 忘记密码?
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row marginTop20">
                            <div class="col-xs-8 col-xs-offset-2 ">
                                <div class="btn btn-info btn-lg btn-block">
                                    <i class="glyphicon glyphicon-log-in"></i>
                                    登录
                                </div>
                            </div>
                        </div>
                        <div class="row marginTop20">
                            <div class="col-xs-6 padding10">
                                <i class="glyphicon glyphicon-arrow-left"></i>
                                团体注册
                            </div>
                            <div class="col-xs-6 text-right padding10">
                                个人注册
                                <i class="glyphicon glyphicon-arrow-right"></i>
                            </div>
                        </div>
                    </div>
    
                    
                </div>
    
            </div>    

    如图:

  • 相关阅读:
    hdu5926Mr. Frog’s Game
    hdu5926Mr. Frog’s Game
    hdu5924Mr. Frog’s Problem
    hdu5924Mr. Frog’s Problem
    hdu5922Minimum’s Revenge
    hdu5922Minimum’s Revenge
    带空格的字符串输入
    带空格的字符串输入
    382. Linked List Random Node
    319. Bulb Switcher
  • 原文地址:https://www.cnblogs.com/fqh123/p/10878838.html
Copyright © 2011-2022 走看看