Angular 4: как включить Bootstrap?

Я бэкэнд-разработчик и просто играю с Angular4. Итак, я сделал это руководство по установке: https://www.youtube.com/watch?v=cdlbFEsAGXo .

Учитывая это, как я могу добавить начальную загрузку в приложение, чтобы использовать класс «container-fluid» или «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 проекта angular

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, этот файл доступен в вашем каталоге angular, откройте этот файл и добавьте путь к файлам bootstrap, jquery и popper.js внутри стилей [] и скриптов [] путь см. пример ниже

"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

Установите bootstrap с помощью 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 в angular, сначала нам нужно установить пакет Bootstrap с помощью npm.

Установить пакет

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Примечание. Команда --save сохранит зависимость в нашем приложении angular внутри файла package.json.

Теперь, когда у нас есть пакет, установленный с помощью вышеуказанного шага, теперь мы можем сказать Angular CLI, что ему необходимо загрузить эти стили, используя любой из следующих вариантов или оба:

вариант 1) Добавление в файл src / styles.css

мы можем добавить зависимости, как показано ниже:

@import "~bootstrap/dist/css/bootstrap.min.css";

Вариант 2) Добавление в angular-cli.json или angular.json

Мы можем добавить файлы стиля css в файл angular-cli.json или angular.json, который находится в корневой папке нашего приложения angular, как показано ниже:

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
]

Angular 4 - настройка Bootstrap / @ ng-bootstrap

Сначала установите 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 (например, карусель, модальные окна, всплывающие окна, всплывающие подсказки, вкладки и т. Д.), А также несколько дополнительных функций (выбор даты, рейтинг, выбор времени, опережающий ввод).

В Angular4, когда вы имеете дело с системой @types , вы должны делать следующие вещи:

Делать,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

найдите массив типов и добавьте записи jquery и bootstrap ,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

в разделе заголовка добавить следующие записи,

  <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 .

Если вы используете Sass / Scss, следуйте этому,

Сделайте установку npm

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 bootstrap@next --save

ИЛИ Альтернатива: Local Bootstrap CSS В качестве альтернативы вы также можете загрузить Bootstrap CSS и добавить его локально в свой проект. Я загрузил Bootstrap с веб-сайта и создал папку styles (на том же уровне, что и 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 Альтернатива: Local 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. Компоненты Bootstrap JavaScript с ngx-bootstrap (вариант 1). Если вам не нужно использовать компоненты JavaScript для Bootstrap (для которых требуется JQuery), это все, что вам нужно. Но если вам нужно использовать модальные окна, аккордеон, средство выбора даты, всплывающие подсказки или любой другой компонент, как мы можем использовать эти компоненты без установки jQuery?

Существует библиотека-оболочка Angular для 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. Укажите библиотеки в angular.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 bootstrap@4.0.0-alpha.6 jquery tether --save

Затем после этого запустите:

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"
  ]

И сейчас. Вы готовы к работе.

Как я вижу, вы уже получили много ответов, но вы можете попробовать этот метод.

Лучшая практика - не использовать jquery в angular, я предпочитаю https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md метод для установки bootstrap без использования bootstrap js, который зависит от jquery.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Держите свой код jquery свободным в angular

Выполните следующую команду в своем проекте, например, npm install bootstrap@4.0.0-alpha.5 --save

После установки указанной выше зависимости выполните следующую команду npm, которая установит модуль начальной загрузки npm install --save @ ng-bootstrap / ng-bootstrap

Проверьте это для справки - https://github.com/ng-bootstrap/ng-bootstrap

Добавьте следующий импорт в app.module import {NgbModule} из '@ ng-bootstrap / ng-bootstrap'; и добавьте NgbModule к импорту

В вашем stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Шаг 1: npm install bootstrap --save

Шаг: 2: Вставьте код ниже в angular.json node_modules / bootstrap / dist / css / bootstrap.min.css

Шаг 3: ng serve

добавить в 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/bootstrap@3.3.7/dist/css/bootstrap.min.css');

В ваш основной файл style.css. и это самый простой способ.

Ссылка: angular.io

Заметка. Это решение загружает bootstrap с веб-сайта unpkg, и ему нужен доступ в Интернет.

Angular 6 CLI, просто сделайте:

ng добавить @ ng-bootstrap / схемы 

Чтобы установить последнюю версию, используйте $ npm i --save bootstrap @ next

сначала установите bootstrap в свой проект, используя npm, npm i 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"
    ]
    ...
}]

Если вы используете Angular 6+, добавьте в angular.json следующее :

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
          ],

Добавление bootrap текущей версии 4 в angular:

1 / Сначала вы должны установить:

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2 / Затем добавьте необходимые файлы сценария к сценариям в angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here

3 / Наконец добавьте CSS Bootstrap в массив стилей в angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],`

проверьте эту ссылку

вы работаете с cdn для начальной загрузки и jquery или устанавливаете bootstarp прямо в приложении с помощью:

npm install ngx-bootstrap --save

также используйте https://ng-bootstrap.github.io/#/home , но это не подходит

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a