如何在我的 ASP.NET 菜单中使用 BreadCrumb 的 Bootstrap 样式？

Posted 2023-03-06

【中文标题】如何在我的 ASP.NET 菜单中使用 BreadCrumb 的 Bootstrap 样式？

【英文标题】：How to use Bootstrap style of BreadCrumb with my ASP.NET menu?

【发布时间】：2013-12-11 17:25:00

【问题描述】：

我是一名新的 ASP.NET 开发人员和 Twitter Bootstrap 的新用户。我试图在我的 ASP.NET 应用程序中有一个面包屑。我已经开发了它，但我正在尝试在其上应用 Twitter Breadcrumb 的样式。将特定的 CSS 样式应用于 ASP.NET Web 窗体控件确实太难了。

那该怎么做呢？

我的 ASP.NET 代码：

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"></asp:Menu>
        <asp:SiteMapPath ID="SiteMap1" runat="server" PathSeparator=" > " ParentLevelsDisplayed="1" 
            PathDirection="RootToCurrent" RenderCurrentNodeAsLink="false" ShowToolTips="true"></asp:SiteMapPath>

Breadcrumb 的 Twitter Bootstrap 样式：

<style>
        .breadcrumb
        
            padding: 8px 15px;
            margin-bottom: 20px;
            list-style: none;
            background-color: #f5f5f5;
            border-radius: 4px;
        

            .breadcrumb > li
            
                display: inline-block;
            

                .breadcrumb > li + li:before
                
                    padding: 0 5px;
                    color: #cccccc;
                    content: "/\00a0";
                

            .breadcrumb > .active
            
                color: #999999;
            
    </style>

仅供参考，在 html 中，面包屑将按以下方式开发：

    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
    </ol>

【问题讨论】：

一个好问题（不仅适用于初学者）。我今天还在想这个。

要摆脱跨度，请查看我对类似问题的回答：***.com/a/36761532/79485

【参考方案1】：

向服务器控件添加类的最简单方法是添加 CssClass="" 参数并指定要添加的类，如下所示：

    <asp:SiteMapPath 
        ID="SiteMap1"
        runat="server"
        PathSeparator=" > " 
        ParentLevelsDisplayed="1" 
        PathDirection="RootToCurrent" 
        RenderCurrentNodeAsLink="false" 
        ShowToolTips="true"
        CssClass="breadcrumb">
    </asp:SiteMapPath>

但是，由于 SiteMapPath 服务器控件生成标记的方式，您需要对控件以及 Bootstrap 的面包屑类进行一些额外的修改。

首先，SiteMapPath 服务器控件有一个名为 PathSeparator 的属性，它允许您指定用于分隔链接的字符。如果未指定，则默认使用和尖括号。 Bootstrap 的面包屑类使用正斜杠来分隔链接，因此您需要将 PathSeparator 属性从 PathSeparator=" > " 更改为 PathSeparator=" / "。

接下来，您必须为 SiteMapPath 服务器控件创建一个节点模板。这将告诉 SiteMapPath 控制每个节点应该遵循什么模板，并允许我们告诉它制作 li 而不是 s：

    <asp:SiteMapPath 
        ID="SiteMap1"
        runat="server"
        PathSeparator=" / " 
        ParentLevelsDisplayed="1" 
        PathDirection="RootToCurrent" 
        RenderCurrentNodeAsLink="false" 
        ShowToolTips="true"
        CssClass="breadcrumb">
        <NodeTemplate>
            <li>
                <asp:HyperLink
                    id="lnkPage"
                    Text='<%# Eval("Title") %>'
                    NavigateUrl='<%# Eval("Url") %>'
                    ToolTip='<%# Eval("Description") %>'
                    Runat="server"
                 />
            </li>
        </NodeTemplate>
    </asp:SiteMapPath>

最后，您需要修改面包屑类以在其嵌套中包含 SiteMapPath 控件的 span：

            .breadcrumb > span > li
            
                display: inline-block;
            

            .breadcrumb > span > li > a:active
            
                color: #999999;
            

【讨论】：

感谢您的帮助。但是，我已经尝试了您的答案，但没有给我正确的结果。请您检查一下吗？

啊，我明白了。 SiteMapPath 服务器控件生成的标记与 Bootstrap 的面包屑类的 CSS 嵌套不匹配。您将不得不重写嵌套。我将更新我的答案以使用我给出的标记。

感谢您的帮助。我真的很感激。是的，我成功了。

嘿，你帮了我很多，但是，现在面包屑的上下没有空间。原始标记有空格。我在网上搜索，但找不到任何帮助。另外，我在这里发现有人问同样的事情。你能看看他的担忧，因为我也有同样的担忧吗？ Here's the link

我怎样才能用这个来回答我的问题：***.com/questions/26892575/…

【参考方案2】：

如果您不想使用 javascript 从当前节点中删除超链接，这就是我所做的：

<ol class="breadcrumb">
  <asp:SiteMapPath runat="server" 
      PathSeparator=" / "
      PathDirection="RootToCurrent"
      RenderCurrentNodeAsLink="false">

      <CurrentNodeStyle CssClass="active"></CurrentNodeStyle>
      <PathSeparatorStyle CssClass="path" />
  </asp:SiteMapPath>   
</ol>  

然后我必须为跨度添加 css 以使其看起来像 Bootstrap 的面包屑。这些只是我使用的颜色，我用一些填充设置了路径分隔符的样式，以匹配 Bootstrap 的做法。

.breadcrumb > span > span a  text-decoration: none; color: #00a9c6;
.breadcrumb > span > span a:hover  text-decoration: underline;

.breadcrumb > span > span.active  color: #777; 

.breadcrumb > span > span.path  color: #d1d1d1; padding: 0 5px;

【讨论】：

在另一个类似的问题上，我提出了一个解决方案来消除多余的跨度。看看***.com/a/36761532/79485

【参考方案3】：

这是一个对我有用的替代方法。

<div class="breadcrumb">
    <asp:SiteMapPath ID="SiteMap1" 
        runat="server"
        PathSeparator=" / " 
        ParentLevelsDisplayed="1" 
        PathDirection="RootToCurrent"
        ShowToolTips="true">
        <CurrentNodeStyle CssClass="current-node"></CurrentNodeStyle>
        <NodeTemplate>
            <li>
                <asp:HyperLink
                    id="lnkPage"
                    Text='<%# Eval("Title") %>'
                    NavigateUrl='<%# Eval("Url") %>'
                    ToolTip='<%# Eval("Description") %>'
                    Runat="server"
                 />
            </li>
        </NodeTemplate>
    </asp:SiteMapPath>
</div>

和css：

.breadcrumb > span > span > li
        
            display: inline-block;
        

此方法允许引导浮动元素在“面包屑”块内呈现。

注意：由于 Hyperlink 元素，NodeTemplate 块会覆盖 RenderCurrentNodeAsLink="false" 参数。为了克服这个问题，我使用 javascript 通过类选择器从 CurrentNode 元素中删除超链接（注意 CurrentNodeStyle 元素）。

希望这会有所帮助。

【讨论】：

我怎样才能用这个来回答我的问题：***.com/questions/26892575/…

【参考方案4】：

更简单：

<div class="panel panel-default"> <div class="panel-heading"> <asp:SiteMapPath ID="SiteMapPath4" runat="server" SiteMapProvider="WebSiteMap" ParentLevelsDisplayed="3" PathSeparator=" / "> </asp:SiteMapPath> </div> </div>

asp.nettwitter-bootstrap