zoukankan      html  css  js  c++  java
  • Bootstrap页面布局21

    设计弹出层对话框:

    设计一个点击登录按钮,再弹出一个登陆对话框的实例,且带有动画效果

    <div class='container-fluid'>
        <h2 class='page-header'>对话框插件的调用</h2>
        <a href='#login' data-toggle='modal' class='btn btn-primary'>登录</a>
        <div class='modal hide fade' id='login'>
            <div class='modal-header'>
                <a href='#' class='close' data-dismiss='modal'>x</a>
                <h4>用户登录</h4>
            </div>
            <div class='modal-body'>
            <form class='form-horizontal'>
                <fieldset>
                    <div class='control-group'>
                        <label class='control-label' for='account'>帐 号</label>
                        <div class='controls'>
                            <input id='account' name='account' type='text' value='' placeholder='请输入手机号/邮箱' />
                            <span class='help-block'>请输入您注册时的手机/邮箱</span>
                        </div>
                    </div>
                        
                    <div class='control-group'>
                        <label class='control-label' for='password'>密 码</label>
                        <div class='controls'>
                            <input id='password' name='account' type='password' value='' placeholder='请输入账号密码' />
                            <span class='help-block'>请输入帐号密码</span>
                        </div>
                    </div>
                </fieldset>
            </form>
            </div>
            <div class='modal-footer'>
                <button type='button' class='btn btn-primary'>登 录</button>
            </div>
        </div>
    </div>

    如图:

    ---- 始终相信这句:
    ----“做每天该做的事,不计结果!”
    ---- 因爲對於編程還只是新手,對很多知識掌握的不牢靠,歡迎大家批評指正~~|=-=|~~
  • 相关阅读:
    无言
    计算机网络的所有课件
    Linux 分区
    Linux 文件管理权限
    DropDownList 控件
    CssClass初步语法了解
    BulletedList用途
    BulletedList项目控件基础CSS基础
    Checkbox与foreach循环
    RadioButton控件
  • 原文地址:https://www.cnblogs.com/Zell-Dinch/p/3888796.html
Copyright © 2011-2022 走看看