模态弹出框--结构分析

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

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

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

  margin-left: 5px;

}

.modal-footer .btn-group .btn + .btn {

  margin-left: -1px;

}

.modal-footer .btn-block + .btn-block {

  margin-left:;

}




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






												


											
玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-4 模态弹出框--结构分析的更多相关文章
	

    
						
  1. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-2 动画过渡
		
    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...
    
		
    2. 
						
  2. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件
		
    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
    
		
    3. 
								
  3. bootstrap   js插件
		
    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
    
		
    4. 
						
  4. 《玩转Bootstrap（JS插件篇）》笔记
		
    导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...
    
		
    5. 
						
  5. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-3 模态弹出框
		
    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
    
		
    6. 
						
  6. Bootstrap学习js插件篇之标签页
		
    简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...
    
		
    7. 
						
  7. Bootstrap学习js插件篇之滚动监听
		
    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
    
		
    8. 
						
  8. Bootstrap学习js插件篇之提示框
		
    案例 受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬 ...
    
		
    9. 
						
  9. Bootstrap学习js插件篇之下拉菜单
		
    案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 如何开发一个基于 Docker 的 Python 应用
			
    前言 Python 家族成员繁多,解决五花八门的业务需求.这里将通过 Python 明星项目 IPython Notebook,使其容器化,让大家掌握基础的 Docker 使用方法. IPython  ...
    
			
    2. 
						
  2. java struts2入门学习---中文验证、对错误消息的分离、结果(result)类型细节配置
			
    一.需求 利用struts2实现中文验证并对错误消息的抽离. 详细需求:用户登录-->不填写用户名-->页面跳转到用户登录页面,提示用户名必填(以英文和中文两种方式提示)-->填写英 ...
    
			
    3. 
						
  3. javascript with关键字简单用法
			
    1.简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2.语法格式 with(object  ...
    
			
    4. 
						
  4. 不常用但很有用的git show 和 git blame
			
    团队使用git 合作时,可能遇见想要查看一段比较难以阅读代码, 此时可能需要联系最新的修改者是哪位,这时候最有用的最快捷的方法就是git blame 啦, 这个指令的output是一个文件的各个区域段 ...
    
			
    5. 
						
  5. SQL 给字符串补0
			
    第一种方法: right('00000'+cast(@count as varchar),5) 其中'00000'的个数为right函数的最后参数,例如这里是5,所以有5个0 @count就是被格式化 ...
    
			
    6. 
						
  6. [转]postgre 系统表对象说明
			
    一.pg_class: 该系统表记录了数据表.索引(仍然需要参阅pg_index).序列.视图.复合类型和一些特殊关系类型的元数据.注意:不是所有字段对所有对象类型都有意义. 名字 类型 引用 描述  ...
    
			
    7. 
						
  7. [转]session和cookie的区别和联系，session的生命周期，多个服务部署时session管理
			
    Session和Cookie的区别 对象 信息量大小 保存时间 应用范围 保存位置 Session 小量,简单的数据 用户活动时间+一段延迟时间(一般为20分钟) 单个用户 服务器端 Cookie 小 ...
    
			
    8. 
						
  8. 温故而知新 phpstudy 设置 nginx 代理
			
    nginx.conif 找到 server 关键字配置 server { listen ; server_name localhost; #charset koi8-r; #access_log lo ...
    
			
    9. 
						
  9. 如何将 .net2.0注册到IIS ，重新注册IIS
			
    打开程序-运行-cmd:输入一下命令重新注册IIS C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis.exe -i 一.运行C:\ ...
    
			
    10. 
						
  10. Java代码通过API操作HBase的最佳实践
			
    HBase提供了丰富的API.这使得用Java连接HBase非常方便. 有时候大家会使用HTable table=new HTable(config,tablename);的方式来实例化一个HTabl ...
    
			
    11.