включая предопределенные кнопки из нижнего колонтитула в Bootstrap popover

Я использовал бутстрап, чтобы сделать заголовок и нижний колонтитул, чтобы он был отзывчивым. Когда я изменил размер, кнопки приложения будут иметь эффект коллапса. Но для кнопок нижнего колонтитула я хочу что-то другое. Я хочу, чтобы они вышли в popover-эффект. Как и те, что в твиттере. Но я не знаю, как включать уже созданные кнопки из нижнего колонтитула в popover. Надеюсь, что вы, ребята понимают, что-то из моих бедных объяснений :)включая предопределенные кнопки из нижнего колонтитула в Bootstrap popover

$(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-разметки и вставить его в р 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 popover

ответ

Смежные вопросы