Geek Answers Handbook

How to use Bootstrap style in BreadCrumb with my ASP.NET menu?

I am a new ASP.NET developer and a new Twitter Bootstrap user. I am trying to get a package in my ASP.NET application. I already developed it, but I'm trying to apply Twitter Breadcrumb style on it. It's too difficult to apply a specific CSS style to control ASP.NET web forms.

So how to do this?

My ASP.NET Code:

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

 <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, in HTML Breadcrumb will evolve as follows:

  <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol>
+4
source share
4 answers

The easiest way to add a class to the server element is to add the Cssclass = "" parameter and specify which classes you want to add, for example:

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

However, due to how the SiteMapPath server control generates markup, you will need to make some additional changes to your control, as well as to the Bootstrap breadcrumb class.

First, the SiteMapPath server control has a PathSeparator property that lets you specify which character separates links. If none is specified, it will use the default angle bracket. The bootstrap breadcrumb class uses a slash to separate links, so you need to change the PathSeparator property from PathSeparator = ">" to PathSeparator = "/".

Next, you will need to create a Node template for the SiteMapPath server element. This will say that SiteMapPath controls which template each Node should run, and allows us to tell it to do this instead of li:

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

Finally, you will need to modify the breadcrumb class to include SiteMapPath controls in your attachment:

  .breadcrumb > span > li { display: inline-block; } .breadcrumb > span > li > a:active { color: #999999; }
+6
source

If you don't want to use javascript to remove the hyperlink from the current node, this is what I did:

 <ol class="breadcrumb"> <asp:SiteMapPath runat="server" PathSeparator=" / " PathDirection="RootToCurrent" RenderCurrentNodeAsLink="false"> <CurrentNodeStyle CssClass="active"></CurrentNodeStyle> <PathSeparatorStyle CssClass="path" /> </asp:SiteMapPath> </ol>

Then I had to add css to scroll to make it look like Bootstrap breadcrumbs. These are just the colors I used, and I designed a path separator with some additions to match how Bootstrap did it.

 .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;}
+3
source

Here is an alternative that worked for me.

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

and css:

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

This method allows loading floating bootstrap elements inside the breadcrumb block.

Note. The NodeTemplate block overrides the RenderCurrentNodeAsLink = "false" parameter due to the Hyperlink element. To overcome this, I used javascript to remove the hyperlink from the CurrentNode element using the class selector (note the CurrentNodeStyle element).

Hope this helps.

+1
source

The easiest way:

<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

0
source

More articles:


All Articles