There are some known issues in bootstrap 4 especially in navbar implemenation
Hence uou have to install bootstrap [email protected]
if you are using npm then the following libraries is best recommonded
npm install [email protected] --save
npm install [email protected] tether jquery --save
In .angular-cli.json file add the dependencies
"styles":[
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts":[
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Use the following HTML
<nav class="navbarnavbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-togglecollapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Togglenavigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Angular5Website</a>
</div>
<div id="navbar" class="collapsenavbar-collapse">
<ul class="navnavbar-nav">
<li class="active"> <a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse-->
</div>
</nav>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…