Bootstrap 4 导航栏不适用于 angular 5 [英] Bootstrap 4 navbar is not working with angular 5
问题描述
我正在尝试使用 angular 项目添加引导程序,但样式未反映在浏览器中.
详情如下.版本:角 CLI:1.7.3节点:9.7.1操作系统:win32 x64角度:5.2.8
使用 angular cli 安装 bootstrap 和 jquery
"bootstrap": "^4.0.0"jquery":^3.3.1"
在 .angular-cli.json 中添加如下
"样式": ["styles.css",../node_modules/bootstrap/dist/css/bootstrap.min.css"],脚本":["../node_modules/jquery/dist/jquery.min.js",../node_modules/bootstrap/dist/js/bootstrap.min.js"],
以下是我的 html 中的代码.
<ul class="nav navbar-nav"><li class="active"><a href="#">链接<span class="sr-only">(current)</span></a></li><li><a href="#">链接</a></li><li class="dropdown" dropdown><!-- {1} --><a dropdownToggle role="button"><!-- {2} -->下拉菜单 <span class="caret"></span></a><ul *dropdownMenu class="dropdown-menu"><!-- {3} --><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li role="separator" class="divider"></li><li><a href="#">分隔链接</a></li><li role="separator" class="divider"></li><li><a href="#">一个单独的链接</a></li>
</nav>
我在浏览器中获得如下视图,并且在浏览器控制台中没有出现任何错误.浏览器输出
提前感谢您的帮助.
您已经安装了 bootstrap 4 并使用了 bootstrap 3 版本的导航栏代码.这里是 bootstrap 4 导航栏的示例代码.在最新的 bootstrap 4 版本中,某些类已更改.
有关更多信息,请参阅此链接
Hi, I am trying to add bootstrap with angular project and the styling is not reflecting in the browser.
The details are as below.
Versions:
Angular CLI: 1.7.3
Node: 9.7.1
OS: win32 x64
Angular: 5.2.8
installed bootstrap and jquery using angular cli
"bootstrap": "^4.0.0"
"jquery": "^3.3.1"
in .angular-cli.json added as below
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Below is the code in my html.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand">Angular + Bootstrap</span>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">
Link <span class="sr-only">(current)</span>
</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown" dropdown> <!-- {1} -->
<a dropdownToggle role="button"> <!-- {2} -->
Dropdown <span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu"> <!-- {3} -->
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
I am getting the view in browser as below and not getting any errors in the browser console. output in browser
Thanks for your help in advance.
you have installed bootstrap 4 and using bootstrap 3 version navbar code. here the sample code for bootstrap 4 navbar.Some classes has been changed in latest bootstrap 4 version.
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
for more info refer this link
这篇关于Bootstrap 4 导航栏不适用于 angular 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!