zoukankan      html  css  js  c++  java
  • bootstrap课程11 模态框如何使用

    bootstrap课程11 模态框如何使用

    一、总结

    一句话总结:多看手册咯。

    1、模态框对应的英文单词是什么?

    modal,而不是madel

    2、bootstrap中如何关闭某个效果?

    比如要关掉modal
    data-dismiss="modal"

    3、bootstrap里面的事件就是data-什么什么,如果这样操作不方便的时候,我们怎么操作?

    自己加js,手册里面会告诉你怎么用js的

    4、bootstrap里面的data-target和a标签的href的关系是怎样的?

    这两个是一样的

    二、bootstrap课程11 模态框如何使用

    1、相关知识

    .modal
    .modal-dialog
    .modal-lg
    .modal-sm
    .modal-content
    .modal-header
    .modal-body
    .modal-footer

     

    2、代码

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     6     <title>index</title>
     7     <style>
     8         *{
     9             font-family: 微软雅黑;
    10         }
    11     </style>
    12     <link rel="stylesheet" href="bs/css/bootstrap.min.css">
    13     <script src="bs/js/jquery.min.js"></script>
    14     <script src="bs/js/bootstrap.min.js"></script>
    15     <script src="bs/js/holder.min.js"></script>
    16 </head>
    17 <body>
    18     <div class="container">
    19         <h1 class='page-header'>Bootstrap框架</h1>    
    20         
    21         <a href='#mymodal' class='btn btn-primary btn-lg' data-toggle='modal'>Launch demo modal</a>
    22 
    23         <div id="mymodal" class='modal fade'>
    24             <div class="modal-dialog modal-lg">
    25                 <div class="modal-content">
    26                     <div class="modal-header">
    27                         <div class="close" data-dismiss='modal'>&times;</div>
    28                         <h3>linux技术文章</h3>        
    29                     </div>
    30                     <div class="modal-body">
    31                         <h4>linux</h4>    
    32                         <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
    33                     </div>
    34                     <div class="modal-footer">
    35                         <button class='btn btn-primary save'>save</button>
    36                         <button class='btn btn-default' data-dismiss='modal'>close</button>
    37                     </div>
    38                 </div>
    39             </div>    
    40         </div>
    41     </div>
    42 </body>
    43 <script>
    44 $('.save').click(function(){
    45     alert('登录成功!');
    46 
    47     //把modal隐藏
    48     $('#mymodal').modal('hide');
    49 });
    50 </script>
    51 </html>
     
  • 相关阅读:
    004-Shell 基本运算符、算术运算符、关系运算符、布尔运算符、辑运算符、字符串运算符、文件测试运算符
    003-shell 传递参数
    002-shell变量定义、使用、字符串替换,分隔,搜索、数组、注释
    【Java】验证码识别解决方案
    bufferedimage 转换成 inputstream并保存文件
    遍历json对象---Java
    【网络爬虫】Httpclient4.X中使用HTTPS的方法采集12306网站
    httpclient获取cookies
    驾考宝典排行榜之爬虫接口解决方案
    java去除字符串中的空格、回车、换行符、制表符
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9355475.html
Copyright © 2011-2022 走看看