twitter-bootstrap ASP.NET MVC 5 和 Bootstrap 3

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18811574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:23:50  来源:igfitidea点击:

ASP.NET MVC 5 and Bootstrap 3

asp.netasp.net-mvctwitter-bootstraptwitter-bootstrap-3asp.net-mvc-5

提问by teh0wner

Been looking around the nets for a bit more information but couldn't find much.

一直在网上寻找更多信息,但找不到太多信息。

So I have created a new MVC 5 Project in VS 2013 RCwhich comes pre-installed with bootstrap 2.3.1

所以我创建了一个新的 MVC 5 项目,VS 2013 RC其中预装了bootstrap 2.3.1

Everything works like a charm, but since Bootstrap 3is out (and me wanting to use the LESSversion and not pre-compiled CSS) I removed bootstrap 2.3.1from NuGetand installed Bootstrap LESS.

一切就像一个魅力,但因为Bootstrap 3是(而且我想要使用的LESS版本,而不是pre-compiled CSS)我删除bootstrap 2.3.1NuGet和安装Bootstrap LESS

I know the folder structure is slightly different, but I have edited my BundleConfigto accommodate for that. Everything seems to compile fine, all the JS are there, but when trying to view the web page it looks messed up.

我知道文件夹结构略有不同,但我已经编辑了我的BundleConfig以适应这一点。一切似乎都编译得很好,所有的 JS 都在那里,但是当试图查看网页时,它看起来很混乱。

Does Bootstrap 3have completely different HTMLtemplate (i.e. do I need to change _Layout?) or should the _Layoutthat came with 2.3.1work with v3as well?

确实Bootstrap 3有完全不同的HTML模板(即我需要改变_Layout?),还是应该的_Layout是带着2.3.1工作用v3呢?

I hope my question is clear.

我希望我的问题很清楚。

采纳答案by Olav Nyb?

There are some differences between Bootstrap 3and Bootstrap 2.3.1.

Bootstrap 3和之间存在一些差异Bootstrap 2.3.1

I have made some changes to my _Layoutto make it more Bootstrap 3friendly.

我对我的进行了一些更改以_Layout使其更Bootstrap 3友好。

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
    </div>

    <div class="collapse navbar-collapse navbar-ex5-collapse">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
        @Html.Partial("_LoginPartial")
    </div>
</nav>

回答by Dmitry Efimenko

Bootstrap 3 changed things around and now requires different html here and there. You can easily confirm that by looking at their documentation pages.

Bootstrap 3 改变了一切,现在需要不同的 html 在这里和那里。您可以通过查看他们的文档页面轻松确认这一点。

回答by user1575089

One other thing to keep in mind; if you are using unobtrusive validation, you will need to update the package to get client side validation working.

Update-Package Microsoft.Jquery.Unobtrusive.Validation

Otherwise, your page will post to validate.

要记住的另一件事;如果您使用的是非侵入式验证,则需要更新包以使客户端验证正常工作。

更新包 Microsoft.Jquery.Unobtrusive.Validation

否则,您的页面将发布以进行验证。