web-dev-qa-db-fra.com

Barre de navigation latérale verticale - Angular 4 et Bootstrap 3

J'ai installé bootstrap 3 dans mon projet angular 4 en utilisant l'installateur npm. J'ai un site de base fait et j'essaye d'obtenir une barre sideNav dynamique qui basculera vers l'intérieur et vers l'extérieur.

J'ai vu quelques exemples en ligne mais ils ne semblent pas fonctionner que ce soit une version plus récente de bootstrap ou des problèmes de compatibilité avec angular.

Quelqu'un a-t-il des recommandations pour une barre de navigation que je pourrais utiliser dans ce cas?

Le HTML dans mon app.component.html:

<!-- Sidebar -->
<script src="src/Javascript/sidebar.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-left" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
        <li class="sidebar-brand">
            <a href="#">
                Brand
            </a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Events</a>
        </li>
        <li>
            <a href="#">Team</a>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Works <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Services</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>
htmlcssangulartwitter-bootstrap-3
8
VicentVega

Vous devez d'abord importer bootstrap 3 ou utiliser Bootstrap 3 CDN

Ensuite, au lieu d'utiliser la directive d'utilisation JQuery pour manipuler la classe et le style de la barre latérale

J'ai créé un blitz de pile pour la même barre latérale sans utiliser JQuery Vérifiez ceci: https://stackblitz.com/edit/angular-z6hrob

8
Chellappan