bootstrap制作百度登陆页面

276 阅读1分钟

备注:需要插入bootstrap插件 css如下:

 body {
            padding: 30px;
        }

        .myInput {
            margin: 20px;
        }

        .mybtn {
            margin-left: 80%;
        }
        .input-group{
            margin: 10px;
        }
        #ntmAS{
            margin: 10px;
        }

html如下:

<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <a href="#modal" class="btn btn-primary navbar-right" data-toggle="modal" style="margin-left: 10%;" id="ntmAS">登录</a>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="请输入内容">
                <span class="btn input-group-addon">百度一下</span>
            </div>
        </div>
    </nav>

    <div id="modal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <span>百度登陆账号</span>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="myInput">
                            <input type="text" class="form-control" placeholder="手机号/邮箱/用户名">
                        </div>
                        <div class="myInput">
                            <input type="password" class="form-control " placeholder="密码">
                        </div>
                        <div class="myInput">
                            <input type="checkbox"> 下次自动登录
                        </div>
                        <div class="myInput">
                            <button class="btn btn-primary form-control">登录</button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">

                </div>
            </div>
        </div>
    </div>