Asp.net mvc ASP.NET MVC 5和Bootstrap 4
我想在我的页面中插入旋转木马。然而,在完成下面的步骤后,图像只是一个接一个地显示出来。然而,加载Bootstrap4的其他方面确实像卡一样工作Asp.net mvc ASP.NET MVC 5和Bootstrap 4,asp.net-mvc,bootstrap-4,carousel,Asp.net Mvc,Bootstrap 4,Carousel,我想在我的页面中插入旋转木马。然而,在完成下面的步骤后,图像只是一个接一个地显示出来。然而,加载Bootstrap4的其他方面确实像卡一样工作 使用Nuget安装Bootstrap4(下载所有相关软件包(jQuery,…) 我注册捆绑包: public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
bundles.Add(new ScriptBundle("~/bundles/charts").Include("~/Scripts/Chart.js", "~/Scripts/Chart.min.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
\u Layout.cshtml
中,我加载了包
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
.
.
.
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<div id="myCarousel" class="carousel-slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="myCarousel" data-slide-to="0" class="active"> </li>
<li data-target="myCarousel" data-slide-to="1"> </li>
<li data-target="myCarousel" data-slide-to="2"> </li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Images/rsz_1agricultural-agriculture-berries-365839.jpg" />
<div class="carousel-caption">
<h1> Get to know us</h1>
<br />
<button type="button" class="btn btn-default"> @Html.ActionLink("Start with it", "Contact", "Home")</button>
</div>
</div>
<div class="item">
<img src="~/Images/rsz_2agriculture-beautiful-blur-1023397.jpg" />
</div>
<div class="item">
<img src="~/Images/rsz_agriculture-basket-beets-533360.jpg" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
了解我们
@ActionLink(“从它开始”、“联系”、“主页”)
欢迎提供任何帮助或建议!您正在尝试将Bootstrap 3旋转木马标记用于Bootstrap 4。例如,
项现在是旋转木马项
。要获得正确的Bootstrap 4结构
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=".../800x400" alt="First slide">
</div>
...
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
...
先生,您真是个英雄!许多导游似乎在组合东西,这把一切都搞砸了!