包括Bootstrap彈出窗口中的頁腳的預定義按鈕

我已經使用bootstrap製作頁眉和頁腳，以便它能夠響應。當我調整應用程序按鈕時會產生崩潰效果。但對於頁腳按鈕，我希望有不同的東西。我希望他們在彈出效果中彈出。就像twitter上的那些。但是我不知道如何在popover中包含已經創建的按鈕。希望你們明白從我可憐的解釋的東西:)包括Bootstrap彈出窗口中的頁腳的預定義按鈕

$(function(){ 
 
    $("[data-toggle = 'popover']").popover(); 
 
});

body { 
 
    min-height: 2000px; 
 
} 
 

 
#navbar-main { 
 
    background: #017f55; 
 
    border:1px solid #000; 
 
    border-radius: 0; 
 
} 
 
#title { 
 
    color:#000; 
 
    font-size: 43px; 
 
    top:7px; 
 
} 
 

 
#select { 
 
    color:#000; 
 
    height:30px; 
 
} 
 
#nav-footer { 
 
    background: #017f55; 
 
    display:inline; 
 
    text-align: right; 
 
    border:1px solid #000; 
 
} 
 
.footer-buttons { 
 
    display:inline; 
 
    font-size: 20px; 
 
    padding-right: 20px; 
 
    background-color: #017f55; 
 
} 
 
.icon-bar{ 
 
    border: 1px solid #fff; 
 
} 
 
#footer-navbar { 
 
    border-color: #000; 
 
} 
 
.footer-buttons { 
 
    background-color: #017f55; 
 
} 
 
#footer-button { 
 
    border:1px solid #333 
 
} 
 
#footer-button:hover { 
 
    background-color: #333; 
 
} 
 
#footer-button:active { 
 
    background-color: #333333; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Code Test</title> 
 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
     <script src="js/script.js"></script> 
 
     <!-- Latest compiled and minified CSS --> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
     <!-- Optional theme --> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 

 
    </head> 
 
    <body> 
 
     <nav id="navbar-main" class="navbar navbar-inverse navbar-fixed-top"> 
 
      <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       <img src="images/test_logo.png"> 
 
      </div> 
 
      <div id="navbar" class="collapse navbar-collapse"> 
 
       <ul class="nav navbar-nav center"> 
 
       <li><a href="#index" id="title">Code Test</a></li> 
 
       <li><a> 
 
        <select id="select"> 
 
         <option value="English">English</option> 
 
         <option value="Devanagari">Devanagari</option> 
 
        </select> 
 
       </a></li> 
 
       </ul> 
 
      </div><!--/.nav-collapse --> 
 
      </div> 
 
     </nav> 
 

 

 
     <nav id="nav-footer" class="navbar navbar-default navbar-fixed-bottom"> 
 
      <div id="footer" class="container2"> 
 
       <div class="navbar-header"> 
 
        <button id="footer-button" type="button" class="navbar-toggle collapsed" data-toggle="popover" data-target="#footer-navbar" > 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        </button> 
 
       </div> 
 
       <div id="footer-navbar" class="navbar-inner navbar-content-center collapse navbar-collapse"> 
 
        <button class="btn footer-buttons">About</p> 
 
        <button class="btn footer-buttons">Feedback</p> 
 
       </div> 
 
      </div> 
 
     </nav> 
 

 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

來源

2016-02-05 Andrei Simedre

您可以通過激活引導酥料餅的html選項實現它，並通過設置內容動態地使用content屬性，如下所示：

$(document).ready(function() { 
    $("[data-toggle = 'popover']").popover({ 
     html: 'true', 
     content : '<button class="btn footer-buttons">About</button> &nbsp;&nbsp;&nbsp;' + 
      '<button class="btn footer-buttons">Feedback</button>' 
    }); 
});

您還可以動態地從你的HTML標記閱讀按鈕或任何其他HTML，並將其插入爲p opover如下：

$(document).ready(function() { 
    $("[data-toggle = 'popover']").popover({ 
     html: 'true', 
     content : $("#footer-navbar").html() 
    }); 
});

我只是稍微改變了你的HTML標記，你沒有正確關閉button標籤。看看CODEPEN

來源

2016-02-05 22:32:02

感謝，它工作得很好：D –

它回答你的問題嗎？如果是這樣，請接受回答 –

只是你的另一個問題:)是否有任何選項tu改變懸停的按鈕背景？ –

包括Bootstrap彈出窗口中的頁腳的預定義按鈕

回答

相關問題