我已经根据ng-bootstrap.github使用以下命令在Angular中设置了Bootstrap。io文档:
ng new my-ng-bootstrap-app # Create angular app. Choose routing and SCSS options
ng add @ng-bootstrap/ng-bootstrap # add bootstrap (see notes at bottom of this answer for how bootstrap is added to app)
ng generate component my-flex # Create a new component to test bootstrap's flex styles
ng serve # Run the Angular server
(我在这里详细介绍了完整的设置方法https://stackoverflow.com/a/75039099/11664580)
这允许我使用bootstrap小部件，但是当我尝试常规地使用bootstrap时，什么也没有发生-例如:
<button type="button" class="btn btn-primary">
My Button
</button>
上面没有应用任何样式，即使我已经按照ng-bootstrap的说明进行了设置。
在我的Angular应用中应用bootstrap样式的最好方法是什么?我通过简单地将link元素与href添加到我的app.component.html来使其工作:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
或者我应该遵循其他指导并使用npm install bootstrap安装吗?
如果你选择npm install bootstrap
然后在angular.json文件安装后搜索
样式和添加路径像…
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
您可以从node_module > bootstrap > dist > css > bootstrap.min.css复制相关路径，或者您可以复制node_module > bootstrap > dist > css > bootstrap.css
在angular.json中有2个样式，在两个样式中都给出了路径。
那么我猜它应该工作得很好。