站長資訊網
        最全最豐富的資訊網站

        bootstrap的模態框在哪是什么

        bootstrap的模態框是覆蓋在父窗體上的,是一個子窗體;模態框的目的是顯示來自一個單獨的源內容,可以在不離開父窗體的情況下有一些互動,子窗體可以提供信息交互等等,可以通過添加“.modal-sm”類來創建一個小模態框,添加“.modal-lg”類創建一個大模態框。

        bootstrap的模態框在哪是什么

        本教程操作環境:Windows10系統、bootstrap5版、DELL G3電腦

        bootstrap的模態框在哪是什么

        模態框(Modal)是覆蓋在父窗體上的子窗體。通常,目的是顯示來自一個單獨的源的內容,可以在不離開父窗體的情況下有一些互動。子窗體可提供信息交互等。

        如何創建模態框

        以下實例創建了一個簡單的模態框效果 :

        <!DOCTYPE html> <html> <head>   <title>Bootstrap 實例</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">   <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>   <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>   <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h2>模態框實例</h2>   <!-- 按鈕:用于打開模態框 -->   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">     打開模態框   </button>       <!-- 模態框 -->   <div class="modal fade" id="myModal">     <div class="modal-dialog">       <div class="modal-content">             <!-- 模態框頭部 -->         <div class="modal-header">           <h4 class="modal-title">模態框頭部</h4>           <button type="button" class="close" data-dismiss="modal">&times;</button>         </div>             <!-- 模態框主體 -->         <div class="modal-body">           模態框內容..         </div>             <!-- 模態框底部 -->         <div class="modal-footer">           <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>         </div>           </div>     </div>   </div>    </div> </body> </html>

        輸出結果:

        bootstrap的模態框在哪是什么

        模態框尺寸

        我們可以通過添加 .modal-sm 類來創建一個小模態框,.modal-lg 類可以創建一個大模態框。

        尺寸類放在 <div>元素的 .modal-dialog 類后 :

        <!DOCTYPE html> <html> <head>   <title>Bootstrap 實例</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">   <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>   <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>   <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h2>模態框實例</h2>   <!-- 按鈕:用于打開模態框 -->   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">     打開模態框   </button>       <!-- 模態框 -->   <div class="modal fade" id="myModal">     <div class="modal-dialog modal-sm">       <div class="modal-content">             <!-- 模態框頭部 -->         <div class="modal-header">           <h4 class="modal-title">模態框頭部</h4>           <button type="button" class="close" data-dismiss="modal">&times;</button>         </div>             <!-- 模態框主體 -->         <div class="modal-body">           模態框內容..         </div>             <!-- 模態框底部 -->         <div class="modal-footer">           <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>         </div>           </div>     </div>   </div>    </div> </body> </html>

        輸出結果:

        bootstrap的模態框在哪是什么

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 久久综合精品国产二区无码| 国内精品免费视频精选在线观看| 蜜国产精品jk白丝AV网站 | 国产精品 日韩欧美| 久久er99热精品一区二区| 青春草无码精品视频在线观| 亚洲精品高清国产一久久| 69SEX久久精品国产麻豆| 亚洲精品tv久久久久久久久| 黑巨人与欧美精品一区| 久久九九青青国产精品| 精品人妻中文字幕有码在线| 一本一本久久aa综合精品| 久久精品18| 国产精品午夜久久| 99免费精品国产| 99久久国产主播综合精品 | 国产欧美在线观看精品一区二区| 1000部精品久久久久久久久| 无码国产乱人伦偷精品视频| 老子影院午夜精品无码| 久久精品国产欧美日韩| 精品亚洲欧美中文字幕在线看| 国产午夜福利精品久久| 国产啪亚洲国产精品无码| 精品国产午夜福利在线观看| 国产亚洲精品看片在线观看 | 久久精品天天中文字幕人妻| 亚洲精品V欧洲精品V日韩精品| 一本大道无码日韩精品影视| 亚洲欧美日韩国产精品一区二区| 亚洲国产精品碰碰| 香蕉依依精品视频在线播放 | 久久精品无码一区二区三区日韩| 国产精品视频不卡| 精品97国产免费人成视频| 精品久久久久久国产免费了| 久久久精品日本一区二区三区| 久久精品国产欧美日韩| 日韩精品一区二区三区影院| 亚洲精品国产综合久久一线|