zoukankan      html  css  js  c++  java
  • 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析

    Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分:

      ☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮

      ☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容

      ☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮

    模态弹出窗的结构如下:

    <div class="modal show">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">模态弹出窗标题</h4>
                </div>
                <div class="modal-body">
                    <p>模态弹出窗主体内容</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    弹出窗的主体样式实现:

    但是对于一个模态弹出窗而言,modal-content才是样式的关键。其主要设置了弹出窗的边框、边距、背景色和阴影等样式。

    /*bootstrap.css文件第5412行~第5423行*/
    .modal-content {
      position: relative;
      background-color: #fff;
      -webkit-background-clip: padding-box;
              background-clip: padding-box;
      border: 1px solid #999;
      border: 1px solid rgba(0, 0, 0, .2);
      border-radius: 6px;
      outline: 0;
      -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
              box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    }

    除此之外,modal-content中的modal-header、modal-body和modal-footer三个部分样式设置:

    /*bootstrap.css文件第5441行~第5461行*/
    .modal-header {
      min-height: 16.42857143px;
      padding: 15px;
      border-bottom: 1px solid #e5e5e5;
    }
    .modal-header .close {
      margin-top: -2px;
    }
    .modal-title {
      margin: 0;
      line-height: 1.42857143;
    }
    .modal-body {
      position: relative;
      padding: 15px;
    }
    .modal-footer {
      padding: 15px;
      text-align: right;
      border-top: 1px solid #e5e5e5;
    }

    这三个部分主要控制一些间距的样式。而modal-footer都是用来放置按钮,所以底部还对包含的按钮做了一定的样式处理。

    /*bootstrap.css文件第5462行~第5471行*/
    .modal-footer .btn + .btn {
      margin-bottom: 0;
      margin-left: 5px;
    }
    .modal-footer .btn-group .btn + .btn {
      margin-left: -1px;
    }
    .modal-footer .btn-block + .btn-block {
      margin-left: 0;
    }
    
    
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>结构分析</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    </head>
    <body>
    <div class="modal show">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">模态弹出窗标题</h4>
                </div>
                <div class="modal-body">
                    <p>模态弹出窗主体内容</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
    </html>
  • 相关阅读:
    leetcode 13. Roman to Integer
    python 判断是否为有效域名
    leetcode 169. Majority Element
    leetcode 733. Flood Fill
    最大信息系数——检测变量之间非线性相关性
    leetcode 453. Minimum Moves to Equal Array Elements
    leetcode 492. Construct the Rectangle
    leetcode 598. Range Addition II
    leetcode 349. Intersection of Two Arrays
    leetcode 171. Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/jun1019/p/7828559.html
Copyright © 2011-2022 走看看