ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Boostrap插件美化

2019-11-18 22:01:51  阅读:267  来源: 互联网

标签:插件 myModal Boostrap bottom 50% radius modal border 美化


1.Boostrap模态框美化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
        <style>
            #myModal{
                left: 55%;
                top: 50%;
                transform: translate(-50%,-50%);
                overflow: visible;
                bottom: inherit;
                right: inherit;
            }
            #modal-title{
                margin-bottom: 0px;
                background:#DCDCDC;
                border-radius:0;
                height:35px;
            }
            #modal-foot{
                margin-bottom: 10px;
                border-radius:0;
                text-align: center;
            }
        </style>
        <script>
            $(function(){
                $("button").click(function(){
                    $("#myModal").modal('show');
                })
            })
        </script>
    </head>
    <body>
        <button>打开</button>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 400px;">
                    <div class="panel" id="modal-title">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 style="margin-top: 5px;">编辑</h4>
                    </div>
                    <div class="modal-body" style="width: 400px;">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">用户名</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">密码</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">密码</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="panel" id="modal-foot">
                        <button class="btn btn-info" style="margin-right: 20px;">保存</button>
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>

                </div>
            </div>
        </div>
    </body>
</html>

这个固定了宽度,位置大概是居中的,可以直接使用。若要改变大小,请自行调整(可以修改上面红色加粗的地方)。

标签:插件,myModal,Boostrap,bottom,50%,radius,modal,border,美化
来源: https://www.cnblogs.com/zys2019/p/11885751.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有