Угловой 4: Как включить Bootstrap?

npm install --save bootstrap

после этого, внутри угловой-cli.json (внутри корневой папки проекта), найти styles и добавьте файл css bootstrap следующим образом:

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

обновление:
в угловые 6 angular-cli.jsonбыл изменен С angular-cli.json до angular.json.

смотреть видео или следовать шагу

установите bootstrap 4 в угловой 2 / угловой 4 / угловой 5 / угловой 6

есть три способа включить bootstrap в ваш проект
1) добавьте ссылку CDN в индекс.html файл
2) Установите bootstrap с помощью npm и установите путь в .угловой-кли.jsonрекомендовано
3) Установите bootstrap с помощью npm и установите путь в индексе.html файл

я рекомендовал вам следующие 2 метода, которые установлены bootstrap с помощью npm, потому что он установлен в вашем каталоге проекта, и вы можете легко получить к нему доступ

Способ 1

Добавьте Bootstrap, Jquery и popper.JS CDN путь к вам угловой индекс проекта.формат 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) Установите bootstrap с помощью npm

npm install bootstrap --save

после установки Bootstrap 4 Нам нужны еще два пакета javascript, которые являются Jquery и Popper.js без этих двух пакетов bootstrap не является завершите, потому что Bootstrap 4 использует Jquery и popper.JS пакет, так что мы должны установить, а также

2) Установите JQUERY

npm install jquery --save

3) Установите Поппер.js

npm install popper.js --save

теперь Bootstrap устанавливается на ваш каталог проекта внутри папки node_modules папку

открыть .угловой-кли.json этот файл доступен на вас угловой каталог откройте этот файл и добавьте путь 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 follow Способ 2 в методе 3 мы просто устанавливаем путь внутри индекса.HTML-файл вместо .угловой-кли.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>

Поппер.js

<script src="../node_modules/popper.js/dist/umd/popper.min.js"><br>

теперь Bootstrap работает нормально сейчас

добавление и настройка Bootstrap и FontAwesome зависимостей, когда у нас есть наше приложение создано мы запускаем следующую команду для установки нашего зависимостей с помощью npm.

$ npm install --save [email protected] font-awesome

Теперь, когда у нас есть зависимости на месте, мы можем сказать угловой CLI что он должен загрузить эти стили, открыв файл
src / styles.css
и добавив следующие два утверждения.

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

для более подробной информации посещать https://medium.com/@beeman/tutorial-add-bootstrap-to-angular-cli-apps-b0a652f2eb2

Angular 4-Bootstrap / @ng-bootstrap setup

установить bootstrap в ваш проект с помощью команды ниже:

npm install --save bootstrap

затем добавьте эту строку "../node_modules/bootstrap/dist/css/bootstrap.min.css" к угловому-кли.файл json (корневая папка) в styles

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

после установки вышеуказанных зависимостей установите ng-bootstrap via:

npm install --save @ng-bootstrap/ng-bootstrap

после установки вам нужно импортировать основной модуль.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

после этого вы можете использовать все виджеты Bootstrap (ex. карусели, модальные, вспомогательные экраны, подсказки, вкладки и т. д.) и несколько дополнительных вкусностей ( элемент управления datepicker, рейтинг, элемента управления datepicker, машинописный).

на Angular4 С @types система, вы должны сделать следующие вещи,

а,

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

tsconfig.json

искать типы массив и добавить jquery и bootstrap записи

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

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

Он предоставляет пошаговую инструкцию о включении последней загрузки в ваш angular 4 с помощью angular-cli.

для приведенных ниже подробных шагов и рабочего примера вы можете посетить 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

или альтернатива: локальный Bootstrap CSS В качестве альтернативы вы также можете загрузить Bootstrap CSS и добавить его локально в свой проект. Я не загрузил Bootstrap с веб-сайта и создал стили папок (тот же уровень, что и стили.css):

Примечание: Не размещайте локальные файлы CSS в разделе Активы папка. Когда мы делаем производственную сборку с угловым CLI, файлы CSS, объявленные в .угловой-кли.json будет уменьшен, и все стили будут объединены в один стиль.стиль CSS. Папка assets копируется в папку dist во время процесса сборки (код CSS будет дублироваться). Только поместите ваши локальные файлы CSS под активами в случае, если вы импортируете их непосредственно в индекс.формат html.

импорт CSS 1.У нас есть два варианта импорта CSS из Bootstrap, который был установлен из NPM:

сильный текст1: Настройки .угловой-кли.json:

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

2: импорт непосредственно в src / style.css или src / style.СКС:

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

Я лично предпочитаю импортировать все мои стили в src / style.css с тех пор, как он был объявлен .угловой-кли.уже джсон.

3.1 альтернатива: локальный Bootstrap CSS Если вы добавили файл CSS начальной загрузки локально, просто импортируйте это внутри .угловой-кли.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) Если вам не нужно использовать компоненты Bootstrap JavaScript (которые требуют JQuery), это все, что вам нужно. Но если вам нужно использовать модалы, аккордеон, datepicker, всплывающие подсказки или любой другой компонент, как мы можем использовать эти компоненты без установки jQuery?

есть Угловая библиотека-оболочка для Bootstrap называется ngx-bootstrap, которую мы также можем установить из NPM:

npm install ngx-bootstrap --save

Примечаниенг2-Bootstrap и фабриката необходмо предусмотреть-бутстрапа тот же пакет. ng2-bootstrap был переименован в ngx-bootstrap после #itsJustAngular.

в случае, если вы хотите установить Bootstrap и ngx-bootstrap в то же время, когда вы создаете свой угловой проект CLI:

npm install bootstrap ngx-bootstrap --save

4.1: добавление необходимых модулей в ушко приложение.модуль.ТС

пройдите через NGX-bootstrap и добавьте модули, необходимые в вашем приложении.модуль.ТС. Например, предположим, что мы хотим использовать выпадающий список, подсказку и модальные компоненты:

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-bootstrap.модуль.ts, импортируйте модули начальной загрузки (используя forRoot ()), а также объявите их в разделе exports (чтобы они стали доступны и для других модулей).

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 {}

наконец, не забудьте импортировать свой загрузочный модуль в ваше приложение.модуль.ТС.

импорт { AppBootstrapModule } from './приложение-загрузчик/приложение-загрузчик.модуль';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap работает с Bootstrap 3 и 4. И я также сделал некоторые тесты и большинство функций и работы с Bootstrap 2.x (Да, у меня все еще есть некоторый устаревший код для поддержания).

надеюсь, что это поможет кому-то!

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

Do npm install

npm install bootstrap --save

и добавить import заявление в ваш файл sass / scss,

@import '~bootstrap/dist/css/bootstrap.css'

на bootstrap 4.0.0-alph.6

npm install [email protected] jquery tether --save

затем после этого выполните:

npm install

сейчас. Открой .угловой-кли.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"
  ]

и сейчас. Ты готов идти.

выполните следующую команду в вашем проекте, т. е. установка НПМ [email protected] -- save

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

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

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

в вашем стиле.стиль CSS @импорт." ./папки node_modules/загрузки/дист/УСБ/бутстрапа.минута.css";

добавить в угловой-cli.json

   "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [ 
         "../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

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

Если вы хотите использовать bootstrap online и ваше приложение имеет доступ к интернету, вы можете добавить

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

в ваш основной стиль.файл CSS. и это самый простой способ.

Ссылка : angular.io

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

угловой 6 CLI, просто сделайте:

ng add @ng-bootstrap / schematics

для установки последней версии используйте $ npm i --save bootstrap@next

сначала установите bootstrap в свой проект с помощью npm npm i bootstrap после этого откройте стиль УР.css файл в вашем проекте и добавьте эту строку

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

и вот именно bootstrap добавлен в ваш проект

вы работаете с 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