Question

我是一名新的ASP.NET开发人员和Twitter Bootstrap的新用户。我试图在我的ASP.NET应用程序中有一个breadcrumb。我已经开发了它，但我正在尝试应用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>

Twitter Bootstrap样式的Breadcrumb：

<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>

Fyi，在HTML中，Breadcrumb的开发方式如下：

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

Answer 1

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

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

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

首先，SiteMapPath服务器控件有一个名为PathSeparator的属性，允许您指定分隔链接的字符。如果未指定，则默认使用和角括号。 Bootstrap的breadcrumb类使用正斜杠来分隔链接，因此您需要将PathSeparator属性从PathSeparator =“＆gt;”更改为PathSeparator =“/”。

接下来，您必须为SiteMapPath服务器控件创建一个Node模板。这将告诉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>

最后，您需要修改breadcrumb类以在其嵌套中包含SiteMapPath控件的跨度：

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

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

Answer 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;}

Answer 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;
        }

此方法允许引导浮动元素在＆＃34; breadcrumb＆＃34;内部进行渲染。块。

注意：NodeTemplate块会覆盖RenderCurrentNodeAsLink =＆＃34; false＆＃34;参数因为超链接元素。为了解决这个问题，我使用javascript通过类选择器从CurrentNode元素中删除超链接（注意CurrentNodeStyle元素）。

希望这有帮助。

Answer 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.net twitter-bootstrap

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

4 个答案: