twitter-bootstrap 如何在引导程序中使用 asp.net web.sitemap 和菜单控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18724937/
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
how to use asp.net web.sitemap and menu control with bootstrap
提问by Jonnymaboy
i am trying to use a sitemap and asp.net menu control and skin it with bootstrap.
我正在尝试使用站点地图和 asp.net 菜单控件并使用引导程序对其进行皮肤处理。
I have done it using ul and li etc which looks great. But this doesnt add the flexibility of breadcrumbs, roles etc so i would like to use the sitemap and menu control. Anyone got any help. I cant get the toggle drop down etc to work. I have tried accesssing the item in the code behind to add css and toggle etc but it wont work.
我已经使用 ul 和 li 等完成了它，看起来很棒。但这并没有增加面包屑、角色等的灵活性，所以我想使用站点地图和菜单控件。任何人都得到任何帮助。我无法让切换下拉菜单等工作。我曾尝试访问后面代码中的项目以添加 css 和切换等，但它不起作用。
<asp:SiteMapDataSource ID="MenuSitemap" SiteMapProvider="MenuSitemap" runat="server"
ShowStartingNode="false"></asp:SiteMapDataSource>
<asp:Menu ID="menFrontEnd" runat="server" Orientation="Horizontal" DataSourceID="MenuSitemap"></asp:Menu>
site map file
站点地图文件
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="/" title="Home" description="Home">
<siteMapNode url="/Default" title="Home" description="Home" />
<siteMapNode url="#1" title="Shop" description="Shop">
<siteMapNode url="/Secure/page1" title="page1" description="page1" />
<siteMapNode url="/Secure/page2" title="page2" description="page2" />
</siteMapNode>
<siteMapNode url="#2" title="Maintenance" description="Maintenance" >
<siteMapNode url="/Secure/Maintenance/page1" title="page1" description="Channels" />
<siteMapNode url="/Secure/Maintenance/page2" title="page2" description="page2" />
</siteMapNode>
</siteMapNode>
</siteMap>
Thanks all
谢谢大家
采纳答案by Jonnymaboy
I implemented my own control bases on this code and control here:
我在此代码的基础上实现了自己的控制并在此处进行控制：
回答by Dhaust
Have a look at Responsive ASP.NET Menu Control With Twitter Bootstrap
看看使用 Twitter Bootstrap 的响应式 ASP.NET 菜单控件
In this tutorial, We will implement collapsing responsive navigation bar using ASP.NET menu control and Twitter Bootstrap.
在本教程中，我们将使用 ASP.NET 菜单控件和 Twitter Bootstrap 实现折叠响应式导航栏。
Here is the relevant section of jQuery that is used to get the menu dropdowns to display properly.
这是用于使菜单下拉菜单正确显示的 jQuery 的相关部分。
<script type="text/javascript">
$(function () {
//to fix collapse mode width issue
$(".nav li,.nav li a,.nav li ul").removeAttr('style');
//for dropdown menu
$(".dropdown-menu").parent().removeClass().addClass('dropdown');
$(".dropdown>a").removeClass().addClass('dropdown-toggle').append('<b class="caret"></b>').attr('data-toggle', 'dropdown');
//remove default click redirect effect
$('.dropdown-toggle').attr('onclick', '').off('click');
});
</script>
Note that the .removeAttr('style')that is used to help with collapsed mode will blow out the Orientation="Horizontal"property on your menu. I'm sure there is a way around this but I just haven't figured it out yet.
请注意，.removeAttr('style')用于帮助折叠模式的 将炸毁Orientation="Horizontal"菜单上的属性。我确定有办法解决这个问题，但我还没有想出来。
