這篇文章主要為大家展示了Bootstrap模態(tài)框怎么用，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“Bootstrap模態(tài)框怎么用”這篇文章吧。

我們注重客戶提出的每個要求，我們充分考慮每一個細(xì)節(jié)，我們積極的做好成都網(wǎng)站設(shè)計、做網(wǎng)站服務(wù)，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)公司贏得了業(yè)內(nèi)的良好聲譽，這一切，也不斷的激勵著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,微信小程序定制開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷，它還有一個響應(yīng)好的Grid系統(tǒng)，并且能夠在手機端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實現(xiàn)需要的幾乎任何類型的網(wǎng)站的功能，此外，所有這些組件都是響應(yīng)式的。

一個最簡單的模態(tài)框由頭部、body和放在底部的按鈕，靜態(tài)模態(tài)框如下：

  
    
      
        
×
        
模態(tài)框頭部      
             
 
模態(tài)框主體部分
      
 
      
         
 關(guān)閉        
 保存      
 
    
 
  
 

如果不想要動畫效果（在這里是淡入淡出的效果），可以把class的fade去掉即可。

modal-header類的p是頭部，我們可以在這里加上合適的頭部，也就是標(biāo)題；modal-body類的p是主體內(nèi)容，按需加入適當(dāng)內(nèi)容；modal-footer類的p是底部，一般是加上'關(guān)閉窗口'、'保存'或類似的內(nèi)容。

demo中的'博主myvin的其他信息'彈出的模態(tài)框是這樣的：

要實現(xiàn)的模態(tài)框和上面的靜態(tài)模態(tài)框很相似，只是title、body和下面的一個button，因為是一個關(guān)閉的button，所以保留一個dismiss的data，即data-dismiss="modal"，表示這是一個具有關(guān)閉的button。直接貼出code：

 
        
          
            
×
            
博主myvin的其他信息          
          
            
當(dāng)愛情來得過于洶涌，我們該如何抉擇？
當(dāng)情感在時間的浪潮里激情得澎湃，我們又該何去何從？
“不死鳥，不死鳥。”有太多的東西徘徊在我們的周身，或激情或蕭條，我們又該怎么權(quán)衡？
《不死鳥》，也許這里有你曾經(jīng)經(jīng)歷過的點點滴滴，也許有你即將經(jīng)歷的枝枝葉葉。
然而在某些東西面前，愛情又是那么的脆弱......
攤開《不死鳥》，就是攤開你的一生......

點擊查看博主myvin的遺作(博主又名：曉馬哥vin)

http://www.rongshuxia.com/book/5509439<;/a>
          
          
           
 關(guān)閉         
  
        
  
      
  
    
  

正如我們最開始說的，這是一個靜態(tài)模態(tài)框，所以并沒有實現(xiàn)點擊彈出模態(tài)框的效果，所以我們接下來要做的就是添加一個點擊'博主myvin的其他信息'就會彈出我們上面寫出的模態(tài)框的效果。當(dāng)然要實現(xiàn)也很簡單。我們先看看我們很早之前寫的導(dǎo)航欄的一段代碼：

博主myvin的其他信息

我們寫了一個有a的li，我們現(xiàn)在要做的就是點擊這個li就能跳轉(zhuǎn)到那個信息modal。因為我們寫的那個modal設(shè)置了一個id=about，所以我們只要使li的target是這個modal就ok了，這里我們用data：

data-target="#about"

現(xiàn)在點擊這個li就能正常淡入淡出的彈出一個modal了。

注冊和登陸按鈕

注冊和登陸按鈕其實也分別是一個modal，要實現(xiàn)的效果如下

點擊登陸或注冊按鈕，彈出modal，在modal頂部其實兩個tab，分別點擊注冊或登陸按鈕會分別切換到相應(yīng)的tab，所以是一個tab和modal的組合。之前我們聊過tab，再結(jié)合上面說的modal，這個效果并不難做。

在這里我們省去了modal-header，只在modal-body中加入了兩個tab，而tab是一個ul和一個tab-content組成，

所以code如下：

      
        
          
            
x            
              
登陸              
注冊            
            
              
                
                  
                    

                  
                    
                  
                  
                    
   
                  
                    
                  
                  
                    
                  
                  
                    
注冊                  
                
              
              
                
                  <
p class="form-group">                    
                  
                  
                    
                  
                  
                   
 立刻登錄                    
 忘記密碼                  
 
                
               
 
            
 
          
 
          
           
 
        
 
      
 
    
 

同樣我們需要在導(dǎo)航欄中的登陸/注冊按鈕處添加target：

 登陸   
 注冊

但是這樣寫的話會有一個小問題：

在聊tab的時候，我們說過得給其中一個tab設(shè)置active類，因為初始化是有一個tab顯示的，那么在這個登陸/注冊modal中，如果我們給其中一個tab添加active類，比如我們給登陸的li和相應(yīng)的tab-content添加active類，那么效果自然是這樣的：

我們先點擊登陸按鈕，彈出的modal中的登陸tab顯示；如果我們先點擊注冊按鈕，那么還是登陸tab顯示??因為我們只給注冊添加了active，在tab中，有active的會首先顯示。無論我們先點擊哪個效果總是這樣的：

如果我們給注冊和登陸都添加上active類呢？效果是這樣的：

因為都添加了active，所以兩個tab都顯示打開，因為登陸p在注冊p上面，所以總是顯示登陸tab。

那如果我們兩者都不添加active呢？那么效果是這個樣子的：

顯然，以上三種情況都不符合我們的實現(xiàn)效果。

這里說一個一個直接笨拙的方法，那就是點擊哪個按鈕就將active類添加到相應(yīng)的按鈕上，同時移除另一個按鈕上的active類，js實現(xiàn)如下：

      $('#signin-button').click(function(){       
      $('#signup-li').removeClass('active');        
      $('#signup-tab').removeClass('active');        
      $('#signin-li').addClass('active');        
      $('#signin-tab').addClass('active');      
      });      
      $('#signup-button').click(function(){        
      $('#signin-li').removeClass('active');        
      $('#signin-tab').removeClass('active');        
      $('#signup-li').addClass('active');        
      $('#signup-tab').addClass('active');      
      });

這樣一個基本的網(wǎng)頁就算完成了。

以上就是關(guān)于“Bootstrap模態(tài)框怎么用”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：Bootstrap模態(tài)框怎么用-創(chuàng)新互聯(lián)
本文路徑：http://weahome.cn/article/dpsdeh.html