twitter-bootstrap Bootstrap 通知面板，如 Facebook 消息下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24508067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap notification panel like facebook messages dropdown
提问by user3547774
I want to show a message dropdown using bootstrap. This is very similar to the messages dropdown that comes in facebook (not the full page view, but just the dropdown only). Can someone please share the sample markup to get this done.
我想使用引导程序显示消息下拉列表。这与 facebook 中的消息下拉列表非常相似（不是整页视图，而只是下拉列表）。有人可以分享示例标记以完成此操作。
回答by Ignacio Correia
If you are using bootstrap 3 you can see and working example here: http://infinite-woodland-5276.herokuapp.com/index.html
如果您使用的是引导程序 3，您可以在此处查看和工作示例：http: //infinite-woodland-5276.herokuapp.com/index.html
Working example: http://codepen.io/igcorreia/pen/htdxl
工作示例：http: //codepen.io/igcorreia/pen/htdxl
HTML
HTML
<div class="container">
<div class="row">
<p class="lead">Roll over the button on the left to see a dropdown</p>
Rollover dropdown:
<!-- Our Special dropdown has class show-on-hover -->
<div class="btn-group show-on-hover">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Regular dropdown:
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
CSS
CSS
body{
padding:10px;
}
.show-on-hover:hover > ul.dropdown-menu {
display: block;
}
