0

More recently, I started using the MVC pattern 5 I like it but unfortunately I do not have a good experience with Bootstrap.

I want my application to look neat. (without super-additive, just clean and tidy). At the same time, I would like to work the same way (if possible) on all devices such as the iPhone, tablets, desktop PC and Mac, and Android.

I found the answer in your forum (here is the article), but I'm not sure if it will work properly.

Question:

Could someone tell me with which web browsers these solutions will work properly and what will not work properly, please. Simply. What is the compatibility of the solution.

Environment: MVC 5 with jQuery 2.1.1 , modernizr 2.8.3, Bootstrap 3.2.0, Razor 3.2.2

There is my _Layout page (almost default layout, I changed only sections fooder). 

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

</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("Application name", "Index", "Home", new { area = "" }, 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("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <div class="navbar navbar-default navbar-fixed-bottom">
                <div class="container" style="font-size: .8em">
                    <p class="navbar-text">
                        &copy; @DateTime.Now.Year - My ASP.NET Application
                    </p>
                </div>
            </div>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
There is my css file Site.css in Content folder. Is default as well, I changed only size padding-bootom and padding-top (according to the recommendations bootstrap Link to documentation). 

body {
    padding-bottom: 70px;
    padding-top: 70px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
Community
  • 1
  • 1
Piotr Knut
  • 350
  • 3
  • 8
  • 1
    Your question comes down to - `What's the bootstrap 3.2.0 compatibility with web browsers`, which you can find in [bootstrap's official web site](http://getbootstrap.com/getting-started/#support) – Michael Sep 27 '14 at 14:14
  • Thank you very much for the link. Your hint helped me a lot. – Piotr Knut Oct 02 '14 at 19:59

0 Answers0