Question

我使用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>

Answer 1

您可以通过激活bootstrap popover的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，并将其插入到弹出框中，如下所示：

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

我只是稍微更改了您没有正确关闭button标记的html标记。查看CODEPEN

中的工作示例

包括Bootstrap popover中页脚的预定义按钮

1 个答案: