Bootstrap - komponent navbar

0

Robie sobie layout na bazie bootstrap, dokładnie taki:
http://getbootstrap.com/examples/starter-template/#about

Problem w tym że ikonka "navbar" po kliknięciu nie chce się rozwijać.
Oczywiście potrzebne pliki (bootstrap.css, bootstrap.js) są załączone do solucji i działają poprawnie.
Poniżej kod (prawdopodobnie błędem jest zła klasa dla "data-target"). Próbowałem tez podpiąć przez id ale również nie działa.

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li >@Html.ActionLink("Produkty", "Index", "Home")</li>
                    <li>@Html.ActionLink("Zarządzaj", "Managment", "Home")</li>
                    <li>@Html.ActionLink("Kontakt", "Contact", "Home")</li>

                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
0

dolacz jeszcze juery i paacjent bedzie zyl:P

0
szalonyfacet napisał(a):

dolacz jeszcze juery i paacjent bedzie zyl:P

Problem w tym że jQuery jest podpięte:/

1

no to tu twoj kod dziala, bez magiczncyh sztuczek => http://jsbin.com/rekesaxaci/1/

0
szalonyfacet napisał(a):

no to tu twoj kod dziala, bez magiczncyh sztuczek => http://jsbin.com/rekesaxaci/1/

Faktycznie, teraz też sprawdziłem pod Dreamweaverem i działa, tylko ja to mam w VS ASP. Chyba gdzieś źle ściezki to bibliotek podpinam. Całość poniżej:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />

     @Scripts.Render("~/bundles/modernizr/")
     @Styles.Render("~/Content/css")


    <style type="text/css">
        body {
            padding-top: 50px;
        }

        .starter-template {
            padding: 40px 15px;
            text-align: center;
        }
    </style>

     
</head>
<body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li >@Html.ActionLink("Produkty", "Index", "Home")</li>
                    <li>@Html.ActionLink("Zarządzaj", "Managment", "Home")</li>
                    <li>@Html.ActionLink("Kontakt", "Contact", "Home")</li>

                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>

    <div class="container">

        <div class="starter-template">
            <h1>Bootstrap starter template</h1>
            <p class="lead">
                Use this document as a way to quickly start any new project.<br>
                All you get is this text and a mostly barebones HTML document.
            </p>
        </div>

        @RenderSection("featured", required: false)
        @RenderBody()
    </div>


    @Scripts.Render("~/bundles/jquery")
    @Styles.Render("~/bundles/Bootstrap")
   



</body>
</html>

Poniżej screen. Ikona po kliknieciu się tylko podswietla bez rozwijania:

1

no to zajrzyj w konsole, podepnij biblioteki i css bezposrednio w dokumencie, nie przez bundle. staraj sie rozkminic gdzie to jest, wiec krok po kroczku.

0

Dzięki za pomoc:) Już działa. Dla potomnych podaje jak ma wyglądać klasa BoundleConfig:

public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        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.unobtrusive*",
                        "~/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 StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css"));
            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));



        }
    }

1 użytkowników online, w tym zalogowanych: 0, gości: 1