问题描述
我是一个新的ASP.NET开发人员和Twitter的引导的新用户。我想在我的ASP.NET应用程序导航。我已经开发了，但我想申请Twitter的面包屑的风格就可以了。这实在是太困难了应用特定的CSS样式ASP.NET Web的控制形式。
那么怎么办呢？
的我的ASP.NET code：的
＆LT; ASP：的SiteMapDataSource ID =SiteMapDataSource1=服务器/＆GT;
＆LT; ASP：菜单ID =菜单1=服务器的DataSourceID =SiteMapDataSource1＆GT;＆LT; / ASP：菜单＆gt;
＆LT; ASP：的SiteMapPath ID =SiteMap1=服务器PathSeparator =＆gt;中ParentLevelsDisplayed =1
PathDirection =RootToCurrentRenderCurrentNodeAsLink =假ShowToolTips =真＆GT;＆LT; / ASP：＆的SiteMapPath GT;
的 Twitter的引导面包屑的风格：的
＆LT;风格＆GT;
.breadcrumb
{
填充：8像素均为15px;
保证金底：20像素;
列表样式：无;
背景颜色：＃f5f5f5;
边界半径：4PX;
} .breadcrumb＆GT;里
{
显示：inline-block的;
} .breadcrumb＆GT;李李+：前
{
填充：0为5px;
颜色：#CCCCCC;
内容：/ \\ 00A0;
} .breadcrumb＆GT; 。活性
{
颜色：＃999999;
}
＆LT; /风格＆GT;
据透露，在HTML路径将被开发为以下几点：
＆LT; OL类=面包屑＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;家庭和LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT;图书馆与LT; / A＆GT;＆LT; /李＆GT;
＆LT;李班=主动＆GT;数据＆LT; /李＆GT;
＆LT; / OL＆GT;
一类添加到服务器控件的最简单的方法是添加的CssClass =参数，并指定要添加，这样一下班：
＆LT; ASP：的SiteMapPath
ID =SiteMap1
=服务器
PathSeparator =＆gt;中
ParentLevelsDisplayed =1
PathDirection =RootToCurrent
RenderCurrentNodeAsLink =假
ShowToolTips =真
的CssClass =面包屑＆GT;
＆LT; / ASP：＆的SiteMapPath GT;
不过，由于方式的SiteMapPath服务器控件生成的标记，你需要做一些额外的修改，你的控制，以及为引导的面包屑类。
首先，服务器的SiteMapPath控件有一个名为PathSeparator属性，您可以指定哪些字符分隔开的链接。如果没有指定，它会默认使用和角度支架。引导的面包屑类使用正斜杠分隔的联系，所以你需要你的PathSeparator财产PathSeparator =更改>，以PathSeparator =/。
接下来，你将不得不以创建的SiteMapPath服务器控件的节点模板。这会告诉每个节点应遵循什么模板SiteMapPath控件，并且将使我们能够告诉它，使李的，而不是仅仅Š：
＆LT; ASP：的SiteMapPath
ID =SiteMap1
=服务器
PathSeparator =/
ParentLevelsDisplayed =1
PathDirection =RootToCurrent
RenderCurrentNodeAsLink =假
ShowToolTips =真
的CssClass =面包屑＆GT;
＆LT; NodeTemplate＆GT;
＆LT;立GT;
＆LT; ASP：超链接
ID =lnkPage
文字='＆LT;％＃的eval（标题）％GT;'
NavigateUrl ='＆LT;％＃的eval（URL）％＆GT;'
工具提示='＆LT;％＃的eval（说明）％GT;'
=服务器
/＆GT;
＆LT; /李＆GT;
＆LT; / NodeTemplate＆GT;
＆LT; / ASP：＆的SiteMapPath GT;
最后，你将需要修改的面包屑类，包括在其嵌套SiteMapPath控件的跨度：
.breadcrumb＆GT;跨度＆GT;里
{
显示：inline-block的;
} .breadcrumb＆GT;跨度＆GT;李＆GT;答：活跃
{
颜色：＃999999;
}
I am a new ASP.NET developer and a new user of Twitter Bootstrap. I am trying to have a breadcrumb in my ASP.NET application. I already developed it but I am trying to apply the style of Twitter Breadcrumb on it. It is really too difficult to apply specific CSS style to ASP.NET web-forms control.
So how to do that?
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 style of 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, in HTML the Breadcrumb will be developed as following:
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
The easiest way to add a class to a server control is to add the CssClass="" parameter and specify what classes you want to add, like this:
<asp:SiteMapPath
ID="SiteMap1"
runat="server"
PathSeparator=" > "
ParentLevelsDisplayed="1"
PathDirection="RootToCurrent"
RenderCurrentNodeAsLink="false"
ShowToolTips="true"
CssClass="breadcrumb">
</asp:SiteMapPath>
However, due to the way the SiteMapPath server control generates markup, you will need to do some additional modifications to your control, as well as to Bootstrap's breadcrumb class.
First, the SiteMapPath server control has a property called PathSeparator that allows you to specify what character separates links. If none is specified, it will use and angle bracket by default. Bootstrap's breadcrumb class uses a forward slash to separate links, so you need to change your PathSeparator property from PathSeparator=" > " to PathSeparator=" / ".
Next, you will have to create a Node template for the SiteMapPath server control. This will tell the SiteMapPath control what template each node should follow, and will allow us to tell it to make li's instead of just 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>
Finally, you will need to modify the breadcrumb class to include the SiteMapPath control's spans in its nesting:
.breadcrumb > span > li
{
display: inline-block;
}
.breadcrumb > span > li > a:active
{
color: #999999;
}
这篇关于如何使用面包屑的引导风格与我的ASP.NET菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！