个人中心
gpt4 book ai didi

c# - Bootstrap 图片库 + ASP.net C# MVC

转载 作者：太空宇宙 更新时间：2023-11-03 10:47:53 27 4
gpt4 key购买 nike

问题是关于 Bootstrap Image Gallery

blueimp.github.io/Gallery随着延伸Bootstrap-图片库

现在回答问题:为什么我的代码不显示图片库，而是将其显示为图库

守则图库 View 

   @{
        ViewBag.Title = "Gallery";
    }
    <h2>@ViewBag.Title.</h2>

    <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <!-- The container for the modal slides -->
        <div class="slides"></div>
        <!-- Controls for the borderless lightbox -->
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
        <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body next"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left prev">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                            Previous
                        </button>
                        <button type="button" class="btn btn-primary next">
                            Next
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="links">
        <a href="~/Pictures/12.jpg" title="CityPicture" data-gallery>
            <img src="~/Pictures/12.jpg" width="100"/> 
        </a>
        <a href="~/Pictures/694x297_uluru_australia.jpg" title="CityStreet" data-gallery>
            <img src="~/Pictures/694x297_uluru_australia.jpg" width="100" />
        </a>
        <a href="~/Pictures/ausmap.jpg" title="WaterSpring" data-gallery>
            <img src="~/Pictures/ausmap.jpg" width="100" />
        </a>    
    </div>

代码_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Australia</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")



</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Australia", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Gallery", "Gallery", "Home")</li>
                    <li>@Html.ActionLink("MapLocation", "MapLocation", "Home")</li>
                </ul>
                @*@Html.Partial("_LoginPartial")*@
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()

        @RenderSection("Scripts", required: false)
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Jesper Kiel Jensen</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @*@Scripts.Render("~/bundles/bootstrap")*@
    @Scripts.Render("~/bundles/googlemaps")
    @Scripts.Render("~/bundles/bootstrap")
    @*@Scripts.Render("~bundles/boostrapGallery")*@
    @RenderSection("scripts", required: false)
</body>
</html>

代码 bundle 

 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
         "~/Scripts/bootstrap.js",
         /blueimp-gallery.min.js",
         /bootstrap-image-gallery.js",
         /respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(I was unsure of how much code, I was to ctrl+v , so here is all of it.

这就是我得到的http://imgur.com/jBHHgKc这就是我想要的http://blueimp.github.io/Bootstrap-Image-Gallery/

希望你理解我的问题:) /bootstrap.css", /网站.css", /blueimp-gallery.min.css", /bootstrap-image-gallery.css"));

最佳答案

我知道现在回答为时已晚，您遗漏了一些 CSS 文件，有关 css 文件和 JavaScript 文件的完整列表，请参阅我的文章

Image gallery in asp.net mvc with multiple file and size 

// CSS files
<link rel="stylesheet" 
    href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" 
    href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="~/Content/bootstrap-image-gallery.min.css">

// JavaScript files
@Scripts.Render("~/bundles/jquery")
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="~/Scripts/bootstrap-image-gallery.min.js"></script>

关于c# - Bootstrap 图片库 + ASP.net C# MVC，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22748390/

27 4 0
文章推荐： c# - RSACryptoServiceProvider.VerifyData(stream) 验证大文件 : overcoming assymentric class design
文章推荐： php - 如何使用 PHP 循环 MySQL 数据
文章推荐： python - 如果 db 文件不存在，如何使 sqlite3.connect() 失败？
文章推荐： php - MYSQL 对大表的低效计数
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com