【问题标题】:setup bootstrap template in mvc c#在 mvc c# 中设置引导模板
【发布时间】:2015-08-13 02:17:30
【问题描述】:

我创建了一个 mvc c# 项目并想使用引导程序作为模板。这里的问题是我的一些 .js (javascript)、字体和 css 在我发布项目时不起作用(来自 boostrap 模板)。下面是我的文件夹结构以及 assets 文件夹中的所有 javascript 和 css

这是我的 App_Start (BundleConfig.cs)

public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{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 http://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",
                    "~/Scripts/respond.js",
                    "~/Scripts/SoftwareWizards.js",
                    "~/assets/global/plugins/jquery-migrate-1.2.1.min.js",
                    "~/assets/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js",
                    "~/assets/global/plugins/bootstrap/js/bootstrap.min.js",
                    "~/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js",
                    "~/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
                    "~/assets/global/plugins/jquery.blockui.min.js",
                    "~/assets/global/plugins/jquery.cokie.min.js",
                    "~/assets/global/plugins/uniform/jquery.uniform.min.js",
                    "~/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js",
                    "~/assets/global/plugins/flot/jquery.flot.min.js",
                    "~/assets/global/plugins/flot/jquery.flot.resize.min.js",
                    "~/assets/global/plugins/flot/jquery.flot.categories.min.js",
                    "~/assets/global/plugins/jquery.pulsate.min.js",
                    "~/assets/global/plugins/bootstrap-daterangepicker/moment.min.js",
                    "~/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js",
                    "~/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js",
                    "~/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
                    "~/assets/global/plugins/fullcalendar/fullcalendar/fullcalendar.min.js",
                    "~/assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js",
                    "~/assets/global/plugins/jquery.sparkline.min.js",
                    "~/assets/global/plugins/gritter/js/jquery.gritter.js",
                    "~/assets/global/scripts/metronic.js",
                    "~/assets/admin/layout/scripts/layout.js",
                    "~/assets/admin/layout/scripts/quick-sidebar.js",
                    "~/assets/admin/pages/scripts/index.js",
                    "~/assets/admin/pages/scripts/tasks.js",
                     "~/assets/admin/pages/scripts/jquery.pulsate.min.js.js",
                     "~/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js",
                     "~/assets/admin/pages/scripts/components-pickers.js",
                     "~/assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js",
                    "~/assets/global/plugins/select2/select2.min.js",
                    "~/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js",
                    "~/assets/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js",
                    "~/assets/global/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js",
                    "~/assets/global/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js",
                    "~/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/assets/global/plugins/font-awesome/css/font-awesome.min.css",
                    "~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",
                    "~/assets/global/plugins/bootstrap/css/bootstrap.min.css",
                    "~/assets/global/plugins/uniform/css/uniform.default.css",
                    "~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
                    "~/assets/global/plugins/gritter/css/jquery.gritter.css",
                    "~/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css",
                    "~/assets/global/plugins/fullcalendar/fullcalendar/fullcalendar.css",
                    "~/assets/global/plugins/jqvmap/jqvmap/jqvmap.css",
                    "~/assets/admin/pages/css/tasks.css",
                    "~/assets/global/css/components.css",
                    "~/assets/global/css/plugins.css",
                    "~/assets/admin/layout/css/layout.css",
                    "~/assets/admin/layout/css/themes/default.css",
                    "~/assets/global/plugins/bootstrap-datepicker/css/datepicker.css",
                    "~/assets/admin/layout/css/custom.css",
                    "~/assets/global/plugins/select2/select2.css",
                    "~/assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css",
                    "~/assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css",
                    "~/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"));


        bundles.Add(new StyleBundle("~/Content/font-awesome-bundle").Include(
                    "~/Content/font-awesome/css/font-awesome.min.css",
                    "~/assets/global/plugins/select2/select2.css",
                    "~/assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css",
                    "~/assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css",
                    "~/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"));
    }

谁能告诉我问题出在哪里以及如何正确设置 ScriptBundle 和 StyleBundle..

【问题讨论】:

    标签: c# twitter-bootstrap templates model-view-controller


    【解决方案1】:

    所以,我在发布项目时遇到了类似的问题。您应该遵循的经验法则之一是,您捆绑的资源应该根据您拥有的文件夹进行分组。

    例如我有一个 common.css,它指的是 /Styles/Common/Images Folder 中的一个徽标 我把它捆绑在一起/Styles/

    它无法引用图像并且我的发布副本失败。

    而不是像您拥有的那样拥有大型捆绑包。

    我会在操作上将它们分开并制作更小的捆绑包。

    来自/assets/global/plugins 的所有 JS 项目在一个捆绑包中。 来自/assets/global/plugins 的所有 CSS 项目在一个捆绑包中。 等等..

    别忘了在 _layout.cshtml 中以正确的顺序调用它们!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-09-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-06-07
      • 2013-11-25
      • 1970-01-01
      • 2020-11-30
      相关资源
      最近更新 更多