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

170

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

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

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

angular  twitter-bootstrap  typescript  twitter-bootstrap-3 
— user3739018
источник

Ответы:

119

При условии, что вы используете 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": {}
  }
}

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

— LaPriWa
источник
1
Я думаю, что bootstrap.min.js должен быть добавлен к «сценариям» в этом решении. Вы согласны?
— Гамалаев
1
@hamalaiv Это по крайней мере не обязательно.
— LaPriWa
3
Я установил загрузчик с помощью шага 1, а затем вставил @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; в моем файле src / styles.css, как описано в следующем сообщении stackoverflow.com/a/40054193/3777549 . Шаг 2 в этом посте не был необходим мне, я использую @ angular / cli: 1.3.1
— user3777549
77

Интеграция с 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 {
}
— Тьерри Темплиер
источник
1
Если вы используете версию ng2-bootstrap, разве вы не должны использовать css? Я не уверен, почему вы используете CDN CSS или это так, как это должно быть сделано? Я новичок в этом тоже.
— Стивен Йорк
6
Новый angular2 не имеет директивы внутри @component
— Мастер Йода
38

Все, что вам нужно сделать, это включить 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">
— user2263572
источник
1
Есть ли способ включить его из локального ресурса вместо CDN?
— Спарк
1
Да, href нужно просто указать путь к вашему локальному файлу. Если у вас возникли проблемы, я бы порекомендовал поискать «обслуживающий статический файл» с любого используемого вами веб-сервера.
— user2263572 19.09.16
Он не работает на angular 6+ для файлов, отличных от index.html. например. app.component.html, Расскажите пожалуйста.
— Ганешдешмух
16

Если вы планируете использовать 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';
— occasl
источник
1
Не могли бы вы объяснить, почему вам не нужно включать файл JS. Это потому, что NPM устанавливает его? Кроме того, в примере с Тьерри Темплиером он импортирует ng2-bootstrap / ng2-bootstrap для использования оповещения. То же самое там и для начальной загрузки 4?
— BBaysinger
Спасибо. Я попробовал твой второй пример. Я получил ошибку, что ресурс не удалось загрузить из node_modules.
— BBaysinger
1
Смотрите обновленный ответ. Если вы используете SASS, вы можете просто сделать то, что я сделал, и сделать @importэто в своем файле SASS. Если нет, вы можете попробовать добавить его в свой vendor.tsфайл, но я не использую это в своем коде.
— Occasl
10

Самый популярный вариант - использовать стороннюю библиотеку, распространяемую в виде пакета 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.

— Люк
источник
9

В среде 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';
— Майкл П. Базос
источник
6

Существует несколько способов настройки 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.

— UHDante
источник
3

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

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';
— jared_flack
источник
3

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

"dependencies": {

   "bootstrap": "^3.3.7",
}

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

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

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

$ npm update
— Танджиб Асан
источник
2
  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"
],
— 31113
источник
2

Процедура с 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">

— veben
источник
1

Я бы рекомендовал вместо того, чтобы объявлять его в стилусе 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";

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

— JMF
источник
0

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

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

— Langaner
источник
0

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

Если вы используете 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

— ninetiger
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.