Як використовувати Bootstrap в кутовому проекті?

Я запускаю свою першу програму 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 {
}

Все, що вам потрібно зробити, це включити css boostrap у файл 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 Library Uot 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);

Ми повинні імпортувати bootstrap .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 з / каталогу додатків

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

}

Тоді ми маємо встановити нашу залежність завантаження та ng2-bootstrap, перш ніж запустити наш додаток. Ми повинні зайти в наш каталог проектів і ввести

npm install

Нарешті ми можемо запустити наш додаток

npm start

У github проекту ng2-bootstrap проекту існує безліч зразків коду, що показують, як імпортувати ng2-bootstrap в різні збірки проекту Angular 2. Є навіть зразок plnkr. Також на веб-сайті Valor-програмного забезпечення (авторів бібліотеки) є документація API.

В умовах кутового кліма найпростіший спосіб, який я знайшов, це наступний:

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: ~Символ є посиланням на папку nodes_modules .
Примітка2: Оскільки ми використовуємо scss, ми можемо налаштувати всі змінні завантажувача, які ми хочемо.

2. Рішення в середовищі з c withs̲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"
   ],

Процедура з кутовим 6+ та завантажувальним пристроєм 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 для завантаження у свій проект 2. Це мені допомогло.

Ось посилання: http://codingthesmartway.com/using-bootstrap-with-angular/

Моя рекомендація була б замість того, щоб оголосити її в стилі json, щоб помістити її в scss, щоб все було складено і в одному місці.

1) встановити завантажувальний механізм з npm

 npm install bootstrap

2) Оголосити bossstrap 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 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">

Якщо ви використовуєте кутовий кліп, після додавання завантажувального пакета в package.json та встановлення пакета, все, що вам потрібно, це додати boostrap.min.css у розділ "стилі" .angular-cli.json.

Одне важливе - це "Коли ви вносите зміни до .angular-cli.json, вам потрібно буде перезапустити службу, щоб отримати зміни в конфігурації."

Довідка:

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

Ще одна дуже хороша альтернатива - використання скелета Angular 2/4 + Bootstrap 4

1) Завантажте ZIP і витягніть папку ZIP

2) служити