Как использовать bootstrap 4 в angular 2?

Я строю угловое приложение, написанное на машинописи. Это будет использовать каркас начальной загрузки 4 в сочетании с некоторыми пользовательскими темами, это возможно?

Пакет npm "ng2-bootstrap" не работает, поскольку он не позволяет мне использовать классы начальной загрузки css, вместо этого он предоставляет пользовательские компоненты. (http://github.com/valor-software/ng2-bootstrap)

В моем проекте angular 2 я использую sass, возможно ли будет собрать bootstrap 4 из исходного кода, так как он также использует sass для стилизации?

 micronyks22 июл. 2016 г., 22:04
Вы можете использовать это обычным способом. Я не уверен насчет твоего нахальства.ng2-bootstrap только предоставляет вам компоненты.

Ответы на вопрос(11)

Перейдите к:Bootstrap 4 и получить команду npm

Запустите команду NPM, полученную на шаге 1, в своем проекте, т.е.

npm install [email protected] --save

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

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

Ваш модуль приложения будет выглядеть так:

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

@NgModule({
   declarations: [
   AppComponent,
   WeatherComponent
],
  imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  NgbModule.forRoot(), // Add Bootstrap module here.
],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Откройте angular-cli.json и вставьте новую запись в массив стилей:

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

Откройте src / app / app.component.html и добавьте

<alert type="success">hello</alert>

или, если вы хотите использовать ng alert, поместите следующее наapp.component.html page

<ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>

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

ПРИМЕЧАНИЕ: вы можете прочитать больше онг Компоненты здесь

 Code Ratchet30 янв. 2017 г., 01:43
 Code Ratchet23 янв. 2017 г., 06:52
Попробуйте это: <ngb-alert [disptable] = "true"> <strong> Внимание! </ Strong> Лучше проверьте себя, вы не очень хорошо выглядите. </ NGB-оповещения>
 Code Ratchet23 янв. 2017 г., 06:50
@AlanHay ты смотрел наng-bootstrap.github.io/#/components/alert   - Закрываемое оповещение?
 Devner28 янв. 2017 г., 19:13
Подтверждаю что даже добавляя[dismissible]="true" не помогает отклонить предупреждение. Независимо от того, сколько раз щелкнул значок X, предупреждение не отклоняется. В консоли также нет ошибок.
 Albert-Jan Verhees04 апр. 2018 г., 07:45
Вам нужно реализовать событие (close), чтобы отключить предупреждение, как описано в примерах:<ngb-alert *ngIf="successMessage" type="success" (close)="successMessage = null">{{ successMessage }}</ngb-alert>
 Jimmy Kane10 июн. 2017 г., 14:44
Нет, увольнение не работает. Проверьте также их plunkr.
 Code Ratchet29 янв. 2017 г., 23:30
Интересно, вам нужно использоватьtypescript код компонента, который используется в примере.
 Alan Hay22 янв. 2017 г., 16:19
Я мог только заставить это работать, добавив импортNgbModule.forRoot() (в соответствии с руководством по началу работы) и с использованием тега <ngb-alert type = "success"> hello </ ngb-alert>. Это отображает предупреждение (хотя я не могу закрыть его).

step 1. npm i [email protected] --save 
step 2. open angular.json and then add bootstrap:
 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
    ]
step 3. restart the server to see the changes
        ng serve 

ng add был введен с Angular 6. Для установкиBootstrap 4 (нг-бутстрап 2.0.0)

Не забудьте перезапустить ваше приложение сng serve.

Это отлично работает с угловым 7 Scss включенным проектом

Выполните следующие команды для установки bootstrap, jQuery и popper.js

npm install --save bootstrap jquery popper.js

jQuery и popper.js являются необходимыми условиями для запуска bootstrap4 (см.https://getbootstrap.com для дополнительной информации.)

Перейдите к файлу angular.json внутри корневой папки. редактировать

архитектор -> сборка -> опции -> скрипты

узел следующим образом

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

Это включит функции JavaScript начальной загрузки вашего проекта.

Чем идти кsrc->styles.scss файл и добавьте следующую строку

@import '~bootstrap/scss/bootstrap';

возможно, это будет работать, но иногда было бы не лучше добавить их:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
 nikhil sugandh05 окт. 2018 г., 15:40
@ChrisEenberg теперь воздай голос
 ChrisEenberg05 окт. 2018 г., 13:35
Вы связали CDN для начальной загрузки v3 ...
 ChrisEenberg05 окт. 2018 г., 14:59
Да, идеально :)
 nikhil sugandh05 окт. 2018 г., 13:56
@ ChrisEenberg теперь все в порядке ??

инструкциям.

1)npm install --save @ng-bootstrap/ng-bootstrap (запустите эту команду в командной строке узла js)

2)npm install [email protected] (следующий прогон это)

3)import {NgbModule} from '@ng-bootstrap/ng-bootstrap'(напишите это в app module.ts)

4) Если модуль является вашим корневым модулем, включите этот

`@NgModule({
 declarations: [AppComponent, ...],
 imports: [NgbModule.forRoot(), ...],
 bootstrap: [AppComponent]
})`

    (or)

Если не корневой модуль

`@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbModule, ...]
})`

5) Запишите это в system.config.js

`map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-
bootstrap/bundles/ng-bootstrap.js',
}`

6) Добавить в Index.html

`<script src="../node_modules/jquery/dist/jquery.min.js"></script>
 <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <link rel="stylesheet" type="text/css" 
 href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />`
 Randy29 июн. 2017 г., 15:16
Не должен ли сам бутстрап 4 содержать--save?

Bootstrap4 alpha для Angular2 CLI (также работает для Angular4 CLI)

Если вы используетеangular2 cli / угловой 4 cli сделать следующее:

npm i [email protected] --save

Это добавит загрузчик 4 в ваш проект.

Далее перейдите к вашемуsrc/style.scss или жеsrc/style.css загрузите файл и загрузите туда:

Для style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Для style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Если вы используете scss, убедитесь, что вы изменили стиль по умолчанию на scss в.angular-cli.json:

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Bootstrap JS Компоненты

Для работы компонентов Bootstrap JS вам все равно придется импортироватьbootstrap.js в.angular-cli.json подscripts (это должно произойти автоматически):

...     
"scripts": ["../node_modules/jquery/dist/jquery.js",
                  "../node_modules/tether/dist/js/tether.js",
                  "../node_modules/bootstrap/dist/js/bootstrap.js"],
...

Обновление 2017/09/13: Boostrap 4 Beta теперь использует popper.js вместо tether.js. Поэтому, в зависимости от того, какую версию вы используете, импортируйте в свои скрипты либо tether.js (альфа), либо popper.js (бета). Спасибо за внимание @MinorThreat

 V. Lichtenberg22 авг. 2017 г., 14:41
Связанные с CSS вещи работали как прелесть, но js-библиотеки не добавляются автоматически в массив scripts. Есть идеи, почему это может быть?
 mahatmanich13 сент. 2017 г., 10:55
@MinorThreat Bootstrap 4 все еще использует привязку в своей документацииv4-alpha.getbootstrap.com/getting-started/introduction
 mahatmanich09 мар. 2017 г., 10:51
@MattSugden Вам не нужно импортировать его во все компоненты. Вы изменили тип стиля по умолчанию на scss? Смотрите мой обновленный ответ!
 mahatmanich13 сент. 2017 г., 10:59
@MinorThreat хорошо на бета-сайте они переключили его ...getbootstrap.com/docs/4.0/getting-started/introduction
 Minor Threat30 авг. 2017 г., 03:22
Я думаю, что эта публикация должна быть обновлена. Например, я заметил, что они бросили привязь в пользу поппера.
 Matt Sugden09 мар. 2017 г., 16:25
Вы абсолютно правы, это была моя ошибка, я добавлял ее в app.component.scss, а не styles.scss. Было поздно, и я смотрел на это слишком долго!
 mahatmanich22 авг. 2017 г., 14:45
@ В. Лихтенберг не уверен. Какую версию ты используешь? Может быть, вам также нужно добавить его вручную ...
 Matt Sugden08 мар. 2017 г., 22:50
Это сработало для меня, но мне также нужно добавить оператор импорта для каждого компонента, который нуждается в нем. Например, когда я просто добавляю его в файл styles.scss, мой компонент navbar не выглядел правильно, пока я не импортировал его в файл navbar.component.scss. По мере того, как мое приложение растет, это выглядит немного накладно, приходится импортировать загрузчик в каждую таблицу стилей компонента.
 mahatmanich09 мар. 2017 г., 10:53
@MattSugden Также обратите внимание, что недавно появилось обновление начальной загрузки 4, которое значительно изменило стиль навигации. Поэтому проверьте, используете ли вы правильные HTML-элементы и классы. У меня были похожие проблемы с проектом.

npm install bootstrap, Если вы посмотрите на файл Angular.JSON, то увидите, что на styles.css уже есть ссылки, поэтому в styles.css просто добавьте@import "~bootstrap/dist/css/bootstrap.css";

грузки. Это можно сделать с помощью команды:

npm install [email protected]

И после этого вам, возможно, придется импортировать bootstrap.css в ваш основной файл css. Это будет styles.css, если вы используете angular-cli.

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

Если вы хотите узнать больше, пожалуйста, используйте ссылку:http://technobytz.com/install-bootstrap-4-using-npm.html

Просто включив ссылку наCSS-файл Bootstrap в вашемindex.html страницаС помощьюнг-самозагрузка - выделенный набор директив Angular 2 для частей, где требуется динамическое поведение. Таким образом, вам не нужно ни импортировать / настраивать jQuery, ни заботиться о JavaScript Bootstrap.
Решение Вопроса

которая нуждается в JQuery, просто сделайте следующее:

Добавьте библиотеку CSS в указатель;Добавьте файл jquery js в индекс;Добавьте библиотеку js-файлов в указатель;Установите файлы определения библиотеки (d.ts);Установите файлы определений jquery (d.ts);

Если в библиотеке нет файлов определений, вы можете:

Создайте определение самостоятельно;Создайте глобальную переменную any с тем же именем объекта библиотеки, чтобы не получать ошибок компилятора;Использовать с ошибками (это худший вариант);

Теперь вы можете использовать библиотеку внутри Typescript;

Ваш ответ на вопрос