twitter-bootstrap Bootstrap：在标题（导航栏）中实现类似 facebook 的通知作为子菜单，而不仅仅是一个计数器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19770532/
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: Implement facebook-like notifications in header (navbar) as submenu, not just a counter
提问by ChrisH
Chances are I'm just retarded and I'm getting an answer within a few minutes, but I just can't seem to find what I'm looking for.
很有可能我只是智障，我会在几分钟内得到答案，但我似乎无法找到我要找的东西。
I need to implement "facebook-like" notifications in my navbar. It's no problem for me to implement the counter next to an icon, linking it to a dropdown. It's also no problem to dynamically load new entries in that submenu as notifications. But what I can't seem to find, is the actualsubmenu.
我需要在我的导航栏中实现“类似 facebook”的通知。在图标旁边实现计数器，将其链接到下拉菜单对我来说没有问题。在该子菜单中动态加载新条目作为通知也没有问题。但我似乎无法找到的是实际的子菜单。
I know it's a custom CSS to display the submenu with a fixed max-height and an overflow so you can scroll into it, but can't find any tutorials/default examples showing how the CSS is done. It's implemented in numerous admin skins, but when I search for notifications, Google isn't showing what I mean: it shows the "other" notfifications (in facebook: left bottom pling) but not the navbar notifications.
我知道这是一个自定义 CSS，用于显示具有固定最大高度和溢出的子菜单，以便您可以滚动到它，但找不到任何教程/默认示例显示 CSS 是如何完成的。它在众多的管理实现的外观，但是当我搜索的通知，谷歌没有显示我的意思：它显示了“其他” notfifications（Facebook中：左下pling），但不能导航栏通知。
What are those "navbar notifications" called? Does anyone have a tutorial, simple CSS or anything at all? I've been searching for a couple of days now and this is my last resort (allthough I shouldn't have been so stubborn and asked it straight away: I wanted to do my homework/effort). I'm absolutely stuck..
那些“导航栏通知”叫什么？有没有人有教程、简单的 CSS 或任何东西？我已经找了几天了，这是我最后的手段（尽管我不应该这么固执地直接问：我想做功课/努力）。我完全被困住了..
Summation:
总结：
I do not look for these:
我不寻找这些：
- http://sciactive.github.io/pnotify/
- Show notification counter with bootstrap
- Make a Notification counter with twitter bootstrap
I'm looking for this:
我在找这个：
- http://demo.themepixels.com/webpage/starlight/dashboard.html(top right "5", click -> THAT menu!)
- http://www.keenthemes.com/preview/index.php?theme=metronic_admin&page=index.html(the three buttons on top right, without those absurdly annoying boxes lol)
- http://suggeelson.com/themes/supr/dashboard.html?username=Administrator&password=somepass(but that one doesn't seem to support twenty-something notifications)
- http://demo.themepixels.com/webpage/starlight/dashboard.html（右上角“5”，点击->那个菜单！）
- http://www.keenthemes.com/preview/index.php?theme=metronic_admin&page=index.html（右上角的三个按钮，没有那些非常烦人的框，哈哈）
- http://suggeelson.com/themes/supr/dashboard.html?username=Administrator&password=somepass（但那个似乎不支持二十多岁的通知）
(To those who want to answer by simply saying "hey, you could rip that CSS" or "why don't you buy that theme?" the answers are simple: I don't rip, and I'm not paying for a full theme when I need oneelement.. I'm simply looking for either a tutorial on how to get that CSS setup, or some plugin that I can implement)
（对于那些想通过简单地说“嘿，你可以撕掉那个 CSS”或“你为什么不买那个主题？”来回答的人，答案很简单：我不撕，而且我不会为当我需要一个元素时的完整主题..我只是在寻找关于如何获得 CSS 设置的教程，或者一些我可以实现的插件）
As said, the backend/jquery "push" aren't the issues. Just the name of that thing and how I can style the thing.
如前所述，后端/jquery“推送”不是问题。只是那个东西的名字以及我如何设计这个东西。
-- edit--
- 编辑 -
tooltip/popover are somewhat doing what I want, but still not exactly what i'm doing (as soon as you're hovering on the tooltip/popover, they disappear so that would work hacky-sacky...) customised a dropdown, all there's left is some extra css to make things work. too bad there isn't a normal/complete tutorial. anyway, thanks for those 20 who viewed :)
工具提示/弹出框有点做我想要的，但仍然不是我正在做的（只要你悬停在工具提示/弹出框上，它们就会消失，这样就可以工作了......）自定义了一个下拉菜单，剩下的就是一些额外的css来使事情工作。太糟糕了，没有正常/完整的教程。无论如何，感谢那些观看的 20 :)
回答by John Q
Just came across your post while searching for similar. It's been 7 months, so I'm sure you've already found a solution but for others that end up here:
刚刚在搜索类似内容时偶然发现了您的帖子。已经 7 个月了，所以我相信你已经找到了一个解决方案，但对于其他人来说：
https://github.com/beeman/cakephp-bootstrap-notifications
https://github.com/beeman/cakephp-bootstrap-notifications
If you ignore the PHP, this appears to be most of what the original poster was looking for (I'm going to give it a try myself shortly).
如果您忽略 PHP，这似乎是原始海报所寻找的大部分内容（我将很快亲自尝试一下）。
回答by sirdank
I'm using bootstrap 3.3.7 and ASP.NET Core MVC with a ViewComponent that looks basically like this:
我正在使用 Bootstrap 3.3.7 和 ASP.NET Core MVC 以及一个基本如下所示的 ViewComponent：
<a href="#" data-toggle="dropdown" role="button">Notifications</a>
<ul class="dropdown-menu dropdown-menu-right notify-drop">
<div>
<div>@Title</div>
</div>
<div>
<li>@Content</li>
</div>
<div>
<a>Mark All Read</a>
</div>
</ul>
