Question

有没有办法使用BMVC（a.k.a. TwitterBootstrapMVC5）来做到这一点？

下面的Razor示例页面：

@{
    var alt = "microsoft homepage";    
    var url = "http://www.microsoft.com/";
    var logo = "~/Content/Images/microsoft_logo.png";
}

<!-- The old school way works just fine; also not using any variables -->
<a href="http://www.microsoft.com/">
    <img alt="microsoft homepage" src="~/Content/Images/microsoft_logo.png" />
</a>

<!-- This does not work using BMVC (the link works but fails at rendering the logo and has no alternate text) -->
@Html.Bootstrap().Link(@logo, @url)

换句话说，是否有使用BMVC创建链接（带图像）的“简短而又甜蜜”的方法？

Answer 1

https://www.twitterbootstrapmvc.com/Documentation#buttons-link ENH？

我意识到这只是一个链接，但文档应该足够了

基本用法

@Html.Bootstrap().Link("awesome website", "http://www.website.net")

Html输出

<a href="http://www.website.net">awesome website</a>

我想我错过了什么。你想要那里，不是吗？

也许

@Html.Bootstrap().Link("<img src=\"@logo\"/>", "http://www.website.net")

Answer 2

Gee wiz，这是一个非常简单的解决方案，一旦我再看一眼。

@{
    // Note, the necessary absence of the "~" tilde in the src attribute below.
    var img = "<img alt='microsoft homepage' src='/Content/Images/microsoft_logo.png'/>";
    var url = "http://www.microsoft.com/";
}

<!-- The simple solution! -->    
@Html.Bootstrap().Link(@img, @url)

另外，如果BMCV有内置的ImageLink和ImageActionLink，那会不会很好？

Answer 3

如果您使用的是FontAwesome或其他图标库，那么您可以执行以下操作：

@Html.Bootstrap().Link("<span class='icon fa fa-globe'></span> Globe", url)

如何使用图像创建BMVC（TwitterBootstrapMVC）链接？

3 个答案: