Как использовать Bootstrap в проекте Angular?

Если вы создаете новые проекты, Angular -CLI, есть еще один способ сделать загрузку доступной в Angular 2/4.

• Через интерфейс командной строки перейдите к папке проекта. Затем используйте npm для установки bootstrap:
  $ npm install --save bootstrap. Параметр --save сделает загрузку в зависимостях.
• Отредактируйте файл .angular-cli.json, который настраивает ваш проект. Он находится внутри каталога проекта. Добавьте ссылку на массив "styles". Ссылка должна быть относительным путем к файлу загрузочного файла, загружаемому с помощью npm. В моем случае это: "../node_modules/bootstrap/dist/css/bootstrap.min.css",

Мой пример .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bootstrap-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Теперь bootstrap должен быть частью ваших настроек по умолчанию.

Интеграция с Angular2 также доступна через проект ng2-bootstrap: https://github.com/valor-software/ng2-bootstrap.

Чтобы установить его, просто поместите эти файлы на главную страницу HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Затем вы можете использовать его в своих компонентах следующим образом:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}

Все, что вам нужно сделать, это включить boostpress css в файл index.html.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Еще одна очень хорошая (лучше?) альтернатива - использовать набор виджетов, созданных командой angular -ui: https://ng-bootstrap.github.io

Если вы планируете использовать Bootstrap 4, который требуется с командой angular -ui ng-bootstrap, которая упоминается в этом потоке, вы захотите использовать это вместо (ПРИМЕЧАНИЕ: вам не нужно включать JS файл):

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Вы также можете ссылаться на это локально после запуска npm install [email protected] --save, указав файл в вашем файле styles.scss, предполагая, что вы используете SASS:

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

Наиболее популярным вариантом является использование сторонней библиотеки, распространяемой как пакет npm, например, проект ng2-bootstrap https://github.com/valor-software/ng2-bootstrap или Angular. Библиотека Bootstrap.

Я лично использую ng2-bootstrap. Существует множество способов настроить его, поскольку конфигурация зависит от того, как создается ваш проект Angular. Ниже я размещаю пример конфигурации на основе Angular 2 проекта QuickStart https://github.com/angular/quickstart

Во-первых, мы добавляем зависимости в наш package.json

    { ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

Затем мы должны сопоставить имена с правильным URL-адресом в systemjs.config.js

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

Нам нужно импортировать загрузочный файл .css в index.html. Мы можем получить его из каталога / node_modules/bootstrap на нашем жестком диске (потому что мы добавили зависимость bootstrap 3.3.7) или из Интернета. Там мы получаем его из Интернета:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Мы должны отредактировать наш файл app.module.ts из каталога /app

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

import { AppComponent }  from './app.component';


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

И, наконец, наш файл app.component.ts из каталога /app

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

Затем мы должны установить наши зависимости bootstrap и ng2-bootstrap, прежде чем запускать наше приложение. Мы должны пойти в каталог проекта и напечатать

npm install

Наконец, мы можем запустить наше приложение

npm start

В проекте ng2-bootstrap github много примеров кода, показывающих, как импортировать ng2-bootstrap в различные сборки проекта Angular 2. Существует даже образец plnkr. Существует также документация по API на веб-сайте Valor-software (авторы библиотеки).

В среде angular -cli наиболее простым способом я нашел следующее:

1. Решение в среде со стилями scss

npm install bootstrap-sass —save

В style.scss:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Примечание1: Символ ~ является ссылкой на папку nodes_modules.
Примечание2: Поскольку мы используем scss, мы можем настроить все переменные boostrap, которые мы хотим.

2. Решение в среде с CSS-таблицами стилей

npm install bootstrap —save

В style.css:

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

Существует несколько способов настройки angular2 с помощью Bootstrap, один из наиболее полных способов получить максимальную отдачу от этого - использовать ng-bootstrap, используя эту конфигурацию, которую мы даем algular2 полный контроль над нашей DOM, избегая необходимости использовать JQuery и Boostrap..js.

1-Возьмите в качестве отправной точки новый проект, созданный с помощью Angular-CLI и использующий командную строку, установите ng-bootstrap:

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

Примечание: дополнительная информация на https://ng-bootstrap.github.io/#/getting-started

2-Затем нам нужно установить загрузчик для CSS и системы сетки.

npm install [email protected] --save

Примечание: дополнительная информация на https://getbootstrap.com/docs/4.0/getting-started/download/

Теперь у нас есть настройка среды и для этого нам нужно изменить .angular-cli.json, добавив к стилю:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Вот пример:

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

Следующим шагом является добавление модуля ng-boostrap в наш проект, для этого нам нужно добавить в app.module.ts:

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

Затем добавьте новый модуль в приложение приложения: NgbModule.forRoot()

Пример:

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

Теперь мы можем начать использовать bootstrap4 в нашем проекте angular2/5.

просто проверьте файл package.json и добавьте зависимости для начальной загрузки

"dependencies": {

   "bootstrap": "^3.3.7",
}

затем добавьте ниже код в .angular-cli.json файл

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

Наконец, вы просто обновляете свой npm локально, используя терминал

$ npm update

У меня был такой же вопрос, и я нашел эту статью с действительно чистым решением:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

Вот инструкции, но с моим упрощенным решением:

Установите Bootstrap 4 (инструкции):

npm install --save [email protected]

При необходимости переименуйте src/styles.css в styles.scss и обновите .angular-cli.json, чтобы отразить изменение

"styles": [
  "styles.scss"
],

Затем добавьте эту строку в styles.scss:

@import '~bootstrap/scss/bootstrap';

• npm install --sup bootstrap

• перейдите в → angular -cli.json файл, найдите свойства стилей и просто добавьте следующее sting: "../ node_modules/bootstrap/dist/css/bootstrap.min.css", он может выглядеть следующим образом:

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

Процедура с Angular 6+ и Bootstrap 4+:

1. Откройте оболочку в папке вашего проекта
2. Установите загрузчик с помощью команды: npm install --save [email protected]
3. Для начальной загрузки нужна зависимость jquery, поэтому, если у вас ее нет, вы можете установить ее с помощью команды: npm install --save jquery 1.9.1
4. Вам может потребоваться исправить уязвимость с помощью команды: npm audit fix
5. В свой основной файл style.scss добавьте следующую строку: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

ИЛИ ЖЕ

Добавьте эту строку в ваш основной файл index.html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Я искал тот же ответ и, наконец, нашел эту ссылку. Вы можете найти объяснение трех разных способов добавления бутстрапа css в ваш проект angular 2. Это помогло мне.

Вот ссылка: http://codingthesmartway.com/using-bootstrap-with-angular/

Я бы порекомендовал вместо того, чтобы объявлять его в стилусе json, чтобы поместить его в scss, чтобы все было скомпилировано и в одном месте.

1) установить загрузчик с npm

 npm install bootstrap

2) Объявите загрузчик npm в css с нашими стилями

Создайте _bootstrap-custom.scss:

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3) В рамках styles.scss мы вставляем

@import "bootstrap-custom";

так что у нас будет все наше ядро скомпилировано и в одном месте

Еще одна очень хорошая альтернатива - использовать скелет Angular 2/4 + Bootstrap 4

1) Загрузите ZIP и распакуйте папку zip

2) ng serve

Если вы используете angular cli, после добавления bootstrap в package.json и установки пакета, вам нужно добавить boostrap.min.css в раздел "styles".angular-cli.json.

Одна важная вещь: "Когда вы вносите изменения в .angular-cli.json, вам нужно будет перезапустить ng-сервис, чтобы получить изменения конфигурации".

Ref:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

добавьте следующие строки на странице html

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Вы можете попробовать использовать библиотеку пользовательских интерфейсов Prettyfox http://ng.prettyfox.org

В этой библиотеке используются стили bootstrap 4 и не требуется jquery.