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

Я запускаю свое первое приложение Angular, и моя базовая настройка завершена.

Как я могу добавить Bootstrap в свое приложение?

Если вы можете привести пример, это было бы очень полезно.

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

1. Через интерфейс командной строки перейдите в папку проекта. Затем с помощью NPM для установки начальной загрузки:
   $ npm install --save bootstrap. --saveОпция сделает самозагрузку появляется в зависимости.
2. Отредактируйте файл .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": {}
  }
}

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

Интеграция с 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 {
}

Все, что вам нужно сделать, это включить boostrap 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, который требуется с ng-bootstrap команды angular-ui , упомянутой в этом потоке, вы захотите использовать это вместо этого (ПРИМЕЧАНИЕ: вам не нужно включать файл 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 bootstrap@4.0.0-alpha.6 --save, указав на файл в вашем styles.scssфайле, предполагая, что вы используете SASS:

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

Самый популярный вариант - использовать стороннюю библиотеку, распространяемую в виде пакета npm, например, проект ng2-bootstrap https://github.com/valor-software/ng2-bootstrap или библиотеки Angular UI 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 на нашем жестком диске (потому что мы добавили загрузочную зависимость 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

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

В среде angular-cli самый простой способ, который я нашел, заключается в следующем:

1. Решение в среде с таблицами стилей s̲c̲s̲s̲

npm install bootstrap-sass —save

В style.scss:

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

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

2. Решение в среде с таблицами стилей c̲s̲s̲

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 bootstrap@4.0.0-beta.2 --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.

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

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

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

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

npm install --save bootstrap@4.0.0-alpha.6

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

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

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

@import '~bootstrap/scss/bootstrap';

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

"dependencies": {

   "bootstrap": "^3.3.7",
}

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

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

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

$ npm update

1. npm install - сохранить начальную загрузку

2. перейдите в файл -> angular-cli.json , найдите свойства стилей и просто добавьте следующее строчку: "../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 bootstrap@4.1.3
3. Bootstrap нужен 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";

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

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

Эта библиотека использует стили начальной загрузки 4 и не нуждается в jquery.

добавьте следующие строки в вашу 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">

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

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

Ref:

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

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

1) Скачать ZIP и распаковать zip папку

2) нг служить