bootstrap——模态框

目录

模态框  类似js中alert();

1.模态框的主样式:modal

2.模态框的代码最好是直接作为body的子元素,而不是后代元素

3.模态框的区域:

4.与Bootstrap.js中的相关属性

5.Bootstrap.css

 模态框的实现流程

案例:订单页面


模态框  类似js中alert();

1.模态框的主样式:modal

2.模态框的代码最好是直接作为body的子元素,而不是后代元素

3.模态框的区域:

        (1)modal声明层  div.modal
        (2)modal-dialog窗口声明层  div.modal-dialog
        (3)modal-content 内容声明层  div.modal-conetnt
                        modal-header  头部
                        modal-body    身体
                        modal-foot    尾部

4.与Bootstrap.js中的相关属性

                data-backdrop = "false"  控制模态框的遮罩层点击不关闭模态框
                data-keyboard = "true" 控制模态框按键盘的esc键关闭
                data-dismiss="modal" 控制模态框手动点击关闭

5.Bootstrap.css

               fade 淡入淡出

 模态框的实现流程

                1.有按钮
                    data-toggle   识别该按钮控制模态框
                    data-target   通过锚链接的设计找到指定的模态框
                2.有模态框的布局代码

案例:订单页面



	
		
		
		
		
		
		
		
		
		
		
	
	
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		
		


		
		
书籍分类
全选 商品名称 图片 商品单价 商品数量 商品总价 操作
黄金手铐 ¥999
¥999
黄金手铐 ¥999
¥999
黄金手铐 ¥999
¥999

©所有版权信息归卓京教育所有

你可能感兴趣的:(Bootsrap,bootstrap,html,javascript)