码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap页面布局21 - BS对话框设计

时间:2014-08-03 22:52:56      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   strong   for   2014   

设计弹出层对话框:

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

<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>

如图:

bubuko.com,布布扣

Bootstrap页面布局21 - BS对话框设计,布布扣,bubuko.com

Bootstrap页面布局21 - BS对话框设计

标签:style   blog   http   color   os   strong   for   2014   

原文地址:http://www.cnblogs.com/Zell-Dinch/p/3888796.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!