Я сторонний разработчик, и я просто играю с Angular4. Поэтому я сделал этот учебник по установке: https://www.youtube.com/watch?v=cdlbFEsAGXo.
Учитывая это, как я могу добавить бутстрап в приложение, чтобы использовать класс "контейнер-жидкость" или "col-md-6" и тому подобное?
Поскольку у этого появляется все больше ответов, я отмечу тот, который помог мне:
npm install --save bootstrap
затем внутри angular-cli.json (внутри корневой папки проекта) найдите styles и добавьте файл начальной загрузки css следующим образом:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
ОБНОВИТЬ:
в angular 6+ angular-cli.json был изменен на angular.json.
Смотрите видео или следуйте инструкциям
Установите загрузчик 4 в angular 2/angular 4/angular 5/angular 6
Есть три способа включить загрузчик в ваш проект
1) Добавить ссылку CDN в файл index.html
2) Установите загрузчик с помощью npm и укажите путь в angular.json Рекомендуется
3) Установите загрузчик с помощью npm и укажите путь в файле index.html
Я рекомендовал вам следующие 2 метода, которые устанавливаются с помощью npm, так как он установлен в каталоге вашего проекта, и вы можете легко получить к нему доступ
Метод 1
Добавьте путь CDN Bootstrap, Jquery и popper.js к вашему угловому файлу index.html проекта
Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
Метод 2
1) Установите загрузчик с помощью npm
npm install bootstrap --save
после установки Bootstrap 4 нам нужны еще два пакета javascript, а именно Jquery и Popper.js, без этих двух пакетов начальная загрузка не завершена, поскольку Bootstrap 4 использует пакет Jquery и popper.js, поэтому мы должны установить также
2) Установите JQUERY
npm install jquery --save
3) Установите Popper.js
npm install popper.js --save
Теперь Bootstrap устанавливается на вашу директорию проекта внутри node_modules Папка
откройте angular.json этот файл доступен в вашем угловом каталоге откройте этот файл и добавьте путь к файлам начальной загрузки, jquery и popper.js в сценарии styles [] и [] путь см. в приведенном ниже примере
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Примечание: Не изменяйте последовательность файла js, это должно быть так
Метод 3
Установите загрузчик, используя npm, следуйте методу 2 в методе 3, мы просто устанавливаем путь в файле index.html вместо angular.json файла
bootstrap.css
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css">
jquery.js
<script src="node_modules/jquery/dist/jquery.min.js"><br>
Bootstrap.js
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>
Popper.js
<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>
Теперь Bootstrap работает нормально
Для того, чтобы настроить/интегрировать/использовать Bootstrap под углом, сначала нам нужно установить Загрузочный пакет с использованием npm.
$ npm install [email protected] --save // for specific version
or
$ npm install bootstrap --save // for latest version
Примечание. Команда --save сохранит зависимость в нашем угловом приложении в файле package.json.
Теперь, когда у нас установлен пакет с указанным выше шагом, теперь мы можем сказать Angular CLI что необходимо загрузить эти стили, используя любой из следующих параметров или оба:
мы можем добавить зависимости, как показано ниже:
@import "~bootstrap/dist/css/bootstrap.min.css";
Мы можем добавить CSS файлы стиля в файл angular-cli.json или angular.json, который находится по адресу корневая папка нашего angular приложения, как показано ниже:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
Сначала установите bootstrap в свой проект, используя следующую команду:
npm install --save bootstrap
Затем добавьте эту строку "../node_modules/bootstrap/dist/css/bootstrap.min.css"
в angular -cli.json файл (корневая папка) в стилях
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
После установки вышеуказанных зависимостей установите ng-bootstrap с помощью:
npm install --save @ng-bootstrap/ng-bootstrap
После установки вам необходимо импортировать основной модуль.
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
После этого вы можете использовать все виджеты Bootstrap (например, карусель, модальные, popovers, подсказки, вкладки и т.д.) и несколько дополнительных лакомств (datepicker, rating, timepicker, typeahead).
В Angular4, поскольку вы имеете дело с системой @types, вам следует выполнить следующие действия:
Do
1) npm install --save @types/jquery
2) npm install --save @types/bootstrap
tsconfig.json
найдите массив типов и добавьте записи jquery и bootstrap,
"types": [
"jquery",
"bootstrap",
"node"
]
Index.html
в разделе head добавьте следующие записи,
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js "></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>
И начните использовать jquery и bootstrap.
обратитесь к этой ссылке https://github.com/angular/angular-cli/wiki/stories-include-bootstrap.
он предоставляет пошаговую инструкцию о включении последней бутстрапа в ваш угловой 4 с использованием углового кли.
Если вы используете Sass/Scss, выполните следующие действия:
Установить npm install
npm install bootstrap --save
и добавьте оператор import в ваш sass/scss файл,
@import '~bootstrap/dist/css/bootstrap.css'
Для более подробных шагов и рабочего примера вы можете посетить https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Очень подробные шаги с правильным объяснением.
Шаги: установка Bootstrap из NPM
Затем нам нужно установить Bootstrap. Измените каталог на проект, который мы создали (cd angular-bootstrap-example), и выполните следующую команду:
Для Bootstrap 3:
npm install bootstrap --save
Для Bootstrap 4 (в настоящее время в бета-версии):
npm install [email protected] --save
ИЛИ Альтернатива: Local Bootstrap CSS. В качестве альтернативы вы также можете загрузить Bootstrap CSS и добавить его локально в свой проект. Я загрузил Bootstrap с веб-сайта и создал стили папок (тот же уровень, что и styles.css):
Примечание. Не помещайте файлы локальных CSS в папку с ресурсами. Когда мы создадим сборку с помощью Angular CLI, файлы CSS, объявленные в.angular-cli.json, будут уменьшены, и все стили будут объединены в один файл styles.css. Папка активов копируется в папку dist во время процесса сборки (код CSS будет дублироваться). Создавайте локальные файлы CSS только в том случае, если вы импортируете их непосредственно в index.html.
Импорт CSS 1. У нас есть два варианта импорта CSS из Bootstrap, который был установлен из NPM:
сильный текст 1: Настроить.angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Импорт непосредственно в src/style.css или src/style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
Я лично предпочитаю импортировать все мои стили в src/style.css, так как он уже был объявлен в.angular-cli.json.
3.1 Альтернатива: Локальный Bootstrap CSS Если вы добавили файл Bootstrap CSS локально, просто импортируйте его в.angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
или src/style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: Компоненты JavaScript Bootstrap с ngx-bootstrap (вариант 1). Если вам не нужны компоненты JavaScript Bootstrap (которые требуют JQuery), это все, что вам нужно. Но если вам нужно использовать модалы, аккордеон, датпикер, всплывающие подсказки или любой другой компонент, как мы можем использовать эти компоненты без установки jQuery?
Существует библиотека Angular wrapper для Bootstrap, называемая ngx-bootstrap, которую мы также можем установить из NPM:
npm install ngx-bootstrap --save
Примечание. Ng2-bootstrap и ngx-bootstrap - это один и тот же пакет. ng2-bootstrap был переименован в ngx-bootstrap после #itsJustAngular.
Если вы хотите установить Bootstrap и ngx-bootstrap одновременно, когда вы создаете проект Angular CLI:
npm install bootstrap ngx-bootstrap --save
4.1: Добавление необходимых модулей Bootstrap в app.module.ts
Пройдите через ngx-bootstrap и добавьте модули, необходимые в ваш app.module.ts. Например, предположим, что мы хотим использовать компоненты Dropdown, Tooltip и Modal:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}
Поскольку мы вызываем метод.forRoot() для каждого модуля (из-за поставщиков модуля ngx-bootstrap), функциональность будет доступна во всех компонентах и модулях вашего проекта (глобальная область).
В качестве альтернативы, если вы хотите организовать ngx-bootstrap в другом модуле (только для организационных целей, если вам нужно импортировать многие модули bs и не захотеть загромождать ваш app.module), вы можете создать модуль app- bootstrap.module.ts, импортировать модули Bootstrap (используя forRoot()), а также объявить их в разделе экспорта (чтобы они стали доступны и для других модулей).
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}
Наконец, не забудьте импортировать свой загрузочный модуль в app.module.ts.
импортировать {AppBootstrapModule} из './app-bootstrap/app-bootstrap.module';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap работает с Bootstrap 3 и 4. И я также провел несколько тестов, и большинство функций также работают с Bootstrap 2.x (да, у меня все еще есть некоторый код устаревания для поддержки).
Надеюсь, это поможет кому-то!
Протестировано в Angular 7.0.0
Шаг 1 - Установите необходимые зависимости
npm install bootstrap (если вы хотите конкретную версию, укажите номер версии)
npm install popper.js (если вы хотите конкретную версию, укажите номер версии)
NPM установить JQuery
Версии, которые я пробовал:
"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",
Шаг 2: Укажите библиотеки в порядке ниже angin.json. В последнем angular имя файла конфигурации - angular.json, а не angular-cli.json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
Для бутстрапа 4.0.0-alph.6
npm install [email protected] jquery tether --save
Затем после этого выполните run:
npm install
Сейчас. Откройте файл.angular-cli.json и импортируйте bootstrap, jquery и tether:
"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"
]
И сейчас. Вы готовы идти.
Выполните следующую команду в своем проекте i.e npm install [email protected] --save
После установки вышеуказанной зависимости выполните следующую команду npm, которая установит модуль начальной загрузки npm install --save @ng-bootstrap/ng-bootstrap
Проверьте это для справки - https://github.com/ng-bootstrap/ng-bootstrap
Добавьте следующий импорт в импорт app.module {NgbModule} из '@ng-bootstrap/ng-bootstrap'; и добавьте NgbModule к импорту
В вашем stye.css @import "../ node_modules/bootstrap/dist/css/bootstrap.min.css";
Как я вижу, у вас уже есть много ответов, но вы можете попробовать этот метод.
Лучше всего не использовать jquery в angular. Я предпочитаю метод https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md для установки начальной загрузки без использования начальной загрузки Компонент JS, который зависит от JQuery.
npm install ngx-bootstrap bootstrap --save
or
ng add ngx-bootstrap (Preferred)
Держите ваш код бесплатно в угловых
Шаг 1: установка начальной загрузки npm --save
Шаг 2: Вставьте код ниже в angular.json node_modules/bootstrap/dist/css/bootstrap.min.css
Шаг 3: нг подача
добавить в angular -cli.json
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Это будет работа, я проверил ее.
Если вы хотите использовать загрузку онлайн, и ваше приложение имеет доступ к Интернету, вы можете добавить
@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');
В ваш основной файл style.css. и его простейший путь.
Ссылка: angular.io
Заметка. Это решение загружает загрузочный сайт с сайта unpkg, и ему необходимо иметь доступ в Интернет.
Угловой 6 CLI, просто выполните:
ng add @ng-bootstrap/schematics
Чтобы установить последнее использование $ npm я --save bootstrap @next
сначала установите bootstrap в свой проект, используя npm npm я bootstrap после этого откройте файл ur style.css в своем проекте и добавьте эту строку
@import "~bootstrap/dist/css/bootstrap.css";
и что он загрузился в ваш проект
| * | Установка Bootstrap 4 для Angular 2, 4, 5, 6 +:
+ + Установить Bootstrap с помощью npm
npm install bootstrap --save
npm install popper.js --save
| +> Добавить стили и скрипты в angular.json
"architect": [{
...
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
}]
вы работаете с cdn для bootstrap и jquery или устанавливаете bootstarp непосредственно в приложении с:
npm install ngx-bootstrap --save
также используйте https://ng-bootstrap.github.io/#/home, но это не соответствует
https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a