Bootstrap 弹出列表

Question

我正在为我的大学制作一个 bootstrap popover 的项目，我正在尝试为弹出窗口添加列表。

我不知道在哪里添加这个列表，你可以看看我的示例。

显示弹出框后点击Select category，

我需要这个列表，（看样本图片）任何人都可以帮我添加这个，

这是我的示例代码：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
  <a href="#"  data-toggle="popover" data-placement="bottom" data-content="Content"><input class="form-control input-sm" id="category" type="text" placeholder="Select category">
  </a>
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>
</div>

Answer 1

这应该可以回答您的问题。

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

.popover-title {
  text-align: center;
}

.custom-popover li {
  border: none!important;
  text-align: center;
}

.custom-popover li:nth-child(2) {
  border-top: 1px solid #ccc!important;
}

.custom-popover li:last-child {
  border-top: 1px solid #ccc!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <a href="#" data-toggle="popover" data-placement="bottom" data-toggle="popover" title="Bill Category"><input class="form-control input-sm" id="category" type="text" placeholder="Select category">
  </a>
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>

<title>Bootstrap Example</title>

<!-- loaded popover content -->
<div id="popover-content" style="display: none">
  <ul class="list-group custom-popover">
    <li class="list-group-item">Airport Pickup</li>
    <li class="list-group-item">Food and Beverage</li>
    <li class="list-group-item">Yoga Class</li>
  </ul>
</div>

根据您的喜好更改列表项。您可以在此处放置链接并根据需要设置列表样式。这应该让您对如何操作有一个基本的了解。

Bootstrap 弹出列表

Bootstrap popover list

jquery

css

twitter-bootstrap

popover