01.02.2024 в 15:56
Иван Белов
Добавьте CSS Framework в Angular
![](/static/storage/266925989797994641277498448311424484687.png)
Привет! Сегодня я собираюсь показать вам, как мы можем добавить CSS-фреймворк в Angular, и для этого поста я использую Bootstrap.
- Посетите официальный сайт Bootstrap.
![](/static/storage/195176392243335374762760285792037557098.avif)
- Вы увидите команду
npm
для установки пакета.
npm i bootstrap@5.3.2
- После установки этого пакета зайдите в файл
angular.json
и добавьте эти строки в этот объект.
![](/static/storage/298049465693216388990639041968236039656.avif)
"styles": [
"src/styles.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
- 3апустите свое приложение, используя
ng serve
- Откройте файл
app.comComponent.html
, удалите весь HTML-код по умолчанию и измените HTML следующим образом:
<div class="container m-5 d-flex gap-2">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</div>
- Теперь проверьте свой браузер
![](/static/storage/107165532774787537845073346062630553318.avif)
Таким образом, мы интегрировали Bootstrap в ваш проект Angular, он будет работать для любой версии Angular, и если у вас есть какие-либо вопросы или сомнения, не стесняйтесь обращаться ко мне!