其他分享
首页 > 其他分享> > Boostrap插件美化

Boostrap插件美化

作者:互联网

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