Как добавить bootstrap в проект angular-cli


234

Мы хотим использовать загрузчик 4 (4.0.0-alpha.2) в нашем приложении, созданном с помощью angular-cli 1.0.0-beta.5 (с узлом v6.1.0).

После получения начальной загрузки и ее зависимостей с помощью npm наш первый подход заключался в добавлении их в angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

и импортировать их в нашем index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Это работало нормально, ng serveно как только мы произвели сборку с -prodфлагом, все эти зависимости исчезли dist/vendor(сюрприз!).

Как мы собираемся обработать такой сценарий (т.е. загрузку сценариев начальной загрузки) в проекте, созданном с помощью angular-cli?

У нас были следующие мысли, но мы не знаем, куда идти ...

  • использовать CDN? но мы бы предпочли предоставить эти файлы, чтобы гарантировать, что они будут доступны

  • копировать зависимости в dist/vendorпосле нашего ng build -prod? Но это похоже на то, что angular-cli должен обеспечить, поскольку он «заботится» о сборочной части?

  • добавить jquery, bootstrap и tether src/system-config.tsи каким-то образом вытянуть их в наш пакет main.ts? Но это казалось неправильным, учитывая, что мы не собираемся явно использовать их в коде нашего приложения (в отличие от moment.js или чего-то вроде lodash, например).


У вас есть они в вашем файле system-config.ts? Вы должны сопоставить их.
Mjwrazor

1
Многие ответы ниже рекомендуют использовать ngx-bootstrap. Я обнаружил, что это не полная замена для jquery-плагинов Bootstrap, и иногда вам все еще нужно использовать эти «родные» jquery-плагины, такие как функциональность свертывания в таблицах. В этом случае ищите один из ответов ниже, которые объясняют, как явно импортировать скрипт jquery из файла .angular-cli.json.
Кристоф


Просто используйте ng-bootstrap ng-bootstrap.github.io/#/home
Лиам

Ответы:


299

ВАЖНОЕ ОБНОВЛЕНИЕ: теперь ng2-bootstrap заменен на ngx-bootstrap

ngx-bootstrap поддерживает Angular 3 и 4.

Обновление: 1.0.0-beta.11-webpack или выше версии

Прежде всего, проверьте вашу версию angular-cli с помощью следующей команды в терминале:

ng -v

Если угловой кли версия больше , чем 1.0.0-beta.11-WebPack , то вы должны выполнить следующие шаги:

  1. Установите ngx-bootstrap и bootstrap :

    npm install ngx-bootstrap bootstrap --save

Эта строка устанавливает Bootstrap 3 в настоящее время, но может установить Bootstrap 4 в будущем. Имейте в виду, что ngx-bootstrap поддерживает обе версии.

  1. Откройте src / app / app.module.ts и добавьте:

    import { AlertModule } from 'ngx-bootstrap';
    ...
    @NgModule({
    ...
    imports: [AlertModule.forRoot(), ... ],
    ... 
    })
    
  2. Откройте angular-cli.json (для angular6 и более поздних версий имя файла изменилось на angular.json ) и вставьте новую запись в stylesмассив:

    "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    
  3. Откройте src / app / app.component.html и добавьте:

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

1.0.0-бета.10 или ниже:

И, если ваш угловой кли версия 1.0.0-beta.10 или ниже, то вы можете использовать следующие шаги.

Сначала перейдите в каталог проекта и введите:

npm install ngx-bootstrap --save

Затем откройте ваш angular-cli-build.js и добавьте эту строку:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Теперь откройте ваш src / system-config.ts и напишите:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...и:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

6
Что такое ng2-bootstrap? что означает добавление нативной начальной загрузки в angular 2? Извините, я в замешательстве и посмотрел, но все еще в замешательстве. почему я не могу предпринять те же шаги для загрузки загрузчика вместо использования стороннего ng2-bootstrap.
mjwrazor

1
@mjwrazor это потому, что начальная загрузка - это не только стили. это интерфейсная часть. чтобы быть ясным, проверьте использование компонента рейтинга с ng2-bootstrap и подумайте о кодах, которые вы напишете для его реализации.
Али Ганаватян

5
Небольшое замечание для будущих читателей: Angular CLI с бета-версии 14 переключился с SystemJS на WebPack. Этот ответ уже устарел, поскольку предоставляет решение на основе SystemJS.
JBandi

2
Спасибо за идею использования ng2-bootstrap, здесь я нашел руководство по установке angular cli на странице github. github.com/valor-software/ng2-bootstrap/blob/development/docs/… В моем случае отсутствовал вызов AlertModule.forRoot () при импорте.
bruno.bologna

1
У меня была такая же проблема с angular-cli@1.1.3& ngx-bootstrap@1.7.1. Следуя этим шагам с той разницей, что app.module.tsне с помощью ngx-bootstrap обращайтесь к ngx-bootstrap / ngx-bootstrap, а к ngx-bootstrap, как в этом примере на github, исправьте мою проблему.
Эдмонд

123

Поиск ключевого слова> Установка глобальной библиотеки на https://github.com/angular/angular-cli поможет вам найти ответ.

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

Сначала установите Bootstrap из npm:

npm install bootstrap@next

Затем добавьте необходимые файлы сценариев в apps [0] .scripts в файле angular-cli.json:

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

Наконец, добавьте Bootstrap CSS в массив apps [0] .styles:

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

Перезапустите ng serve, если вы его запускаете, и Bootstrap 4 должен работать в вашем приложении.

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


2
Как я пишу, это единственное решение, которое, похоже, использует последнюю версию angular-cli.
freethebees

1
Bootstrap.js, безусловно, не нужен! Поскольку вы не хотите использовать juqery bootstrap.js для этого, вы должны установить директивы ng2 bootstrap.
Паскаль

2
Если вы хотите использовать загрузочный javascript, а не только файл .css, вам также необходимо включить его зависимости в массив скриптов: "../node_modules/jquery/dist/jquery.slim.js", "../ node_modules / tether / dist / js / tether.js "," ../node/modules/bootstrap/dist/js/bootstrap.js "
Говард Своп,

2
Вам лучше использовать bootstrap.bundle.js в объявлении скриптов, в котором также есть popper.js.
Dejazmach

1
Чтобы сделать работу, не пропустите последний пункт, выполните ng serveснова. Кроме того, почему Angular CLI не может добавить это автоматически? Было бы хорошо, если бы у нас был выбор для этого.
Shaijut

58

Сделайте следующее:

npm i bootstrap@next --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";

Для сценариев вам все равно придется добавить файл в файл angular-cli.json следующим образом ( в версии Angular 6 это редактирование необходимо выполнить в файле angular.json ) :

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

5
ИМХО это тоже отличный вариант, особенно с последними версиями angular-cli. Большим преимуществом является то, что этот метод не зависит от людей, которые обновляют библиотеку из пакета npm, упомянутого в принятом ответе; Более того, это также позволяет нам переопределять переменные начальной загрузки, используя SASS, не указывая напрямую на скомпилированные CSS-файлы.
Март

2
Да, это чище и более модульно, поэтому я предпочитаю это!
Махатманич

Этот doent работает для меня, любые предварительные условия, которым я должен следовать, я использую последнюю версию angular и bootstrap и добавил все вышеупомянутые изменения, не работал таким образом, но работал над добавлением <link rel = "stylesheet" type = "text / css" href = "vendor / bootstrap / dist / css / bootstrap.min.css"> в index.html
har_shit

Это с помощью настройки Cli!
Махатманич

7
более чистый метод будет @import '~ bootstrap / dist / css / bootstrap'; Использование знака ~ для импорта как модуля непосредственно из папки node_modules. Нашел объяснение здесь: stackoverflow.com/questions/39535760/…
AI

32

Сначала вы должны установить tether, jquery и bootstrap с помощью этих команд

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

После добавления этих строк в ваш файл angular-cli.json (angular.json начиная с версии 6)

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

2
Вы имели в виду $ projectRoot / .angular-cli.json?

21

Поскольку никто еще не ссылался на официальную историю (команды angular-cli) о том, как включить Bootstrap: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Включить Bootstrap

Bootstrap - это популярный CSS-фреймворк, который можно использовать в проекте Angular. Это руководство проведет вас через добавление начальной загрузки в ваш проект Angular CLI и настройку его для использования начальной загрузки.

Использование CSS

Начиная

Создайте новый проект и перейдите в проект

ng new my-app
cd my-app

Установка Bootstrap

После того, как новый проект создан и готов, вам нужно будет установить загрузчик в свой проект как зависимость. Используя эту --saveопцию, зависимость будет сохранена в package.json

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

Конфигурирование проекта

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

  • Откройте файл .angular-cli.jsonиз корня вашего проекта.
  • Под свойством appsпервый элемент в этом массиве является приложением по умолчанию.
  • Существует свойство, stylesпозволяющее применять внешние глобальные стили к вашему приложению.
  • Укажите путь к bootstrap.min.css

Когда вы закончите, это должно выглядеть следующим образом:

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

Примечание. При внесении изменений .angular-cli.jsonвам потребуется перезапустить, ng serveчтобы получить изменения конфигурации.

Тестовый проект

Откройте app.component.htmlи добавьте следующую разметку:

<button class="btn btn-primary">Test Button</button>

С настроенным приложением запустите его, ng serveчтобы запустить его в режиме разработки. В вашем браузере перейдите к приложению localhost:4200. Убедитесь, что появляется кнопка в стиле начальной загрузки.

Использование SASS

Начиная

Создайте новый проект и перейдите в проект

ng new my-app --style=scss
cd my-app

Установка Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Конфигурирование проекта

Создайте пустой файл _variables.scssв src/.

Если вы используете bootstrap-sass, добавьте следующее _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

В styles.scssдобавьте следующее:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Тестовый проект

Откройте app.component.htmlи добавьте следующую разметку:

<button class="btn btn-primary">Test Button</button>

С настроенным приложением запустите его, ng serveчтобы запустить его в режиме разработки. В вашем браузере перейдите к приложению localhost:4200. Убедитесь, что появляется кнопка в стиле начальной загрузки. Чтобы убедиться, что ваши переменные используются, откройте _variables.scssи добавьте следующее:

$brand-primary: red;

Вернитесь в браузер, чтобы увидеть, как изменился цвет шрифта.


4
Это решение не добавляет файлы javascript для начальной загрузки, только css
Robin van der Knaap

Смотрите эту другую историю: github.com/angular/angular-cli/wiki/stories-global-lib . Он описывает добавление файлов сценариев, взяв в качестве примера загрузчик 4.
Робин ван дер

$brand-primary: red;не работал для меня. Тем $primary: red;не менее, сделал!
Йохан Фрик

Спасибо за объяснение различий между начальной загрузкой и boostrap @ next :-)
Венкатеш Мунианди

17

Обновление v1.0.0-beta.26

Вы можете увидеть в документе новый способ импорта начальной загрузки здесь.

Если это все еще не работает, перезапустите с командой ng serve

1.0.0 или ниже версии:

В вашем файле index.html вам просто нужна ссылка для начальной загрузки css (нет необходимости в js-скриптах)

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

И

npm install ng2-bootstrap --save
npm install moment --save

После установки ng2-bootstrap в my_project / src / system-config.ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

И в my_project / angular-cli-build.js:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

Не забудьте эту команду, чтобы поместить ваш модуль в поставщика:

ng build

импортировать из другого модуля по тому же принципу.


1
Как это позволяет загрузчику использовать jquery? Я сделал это, и это не работает.
Mjwrazor

пример наконец нашел это и все заработало. Я не мог понять это какое-то время.
Mjwrazor

8

Я предполагаю, что вышеупомянутые методы изменились после выпуска, проверьте эту ссылку

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

инициировать проект

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

установить ng-bootstrap и bootstrap

npm install ng2-bootstrap bootstrap --save

откройте src / app / app.module.ts и добавьте

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

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

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

Откройте src / app / app.component.html и протестируйте все работы, добавив

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

1
Метод от Ахмеда Хамди работает, по-видимому, сейчас произошло обновление кода. Обновил свое сообщение с решением.
PeterH

1
если вы хотите использовать Bootstrap 4, вам нужно изменить "npm install ng2-bootstrap bootstrap --save" TO BE "npm install ng2-bootstrap bootstrap@4.0.0-alpha.6 --save" .... не совсем очевидно из документации (выполните поиск 'card-' в bootstrap.css, чтобы узнать, сработал ли он) ... обратите внимание, что в настоящее время это Alpha 6, это без сомнения изменится ... проверьте сайт начальной загрузки для текущей инструкции npm
72GM

8

Шаги для Bootstrap 4 в угловых 5

  1. Создать проект Angular 5

    нг новый AngularBootstrapTest

  2. Переместить в каталог проекта

    cd AngularBootstrapTest

  3. Скачать загрузчик

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

  4. Добавить Bootstrap в проект

    4.1 открыть .angular-cli.json

    4.2 найти раздел «стили» в json

    4.3 добавьте путь начальной загрузки css, как показано ниже

    ,

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

Теперь вы успешно добавили загрузчик CSS в проекте Angular 5

Тестовый бутстрап

  1. открыто src/app/app.component.html
  2. добавить компонент начальной загрузки

,

<button type="button" class="btn btn-primary">Primary</button>

Вы можете ссылаться на стили кнопок здесь ( https://getbootstrap.com/docs/4.0/components/buttons/ )

  1. сохранить файл

  2. запустить проект

    нг служить --открыто

Теперь вы увидите кнопку стиля начальной загрузки на странице

Примечание: если вы добавили путь начальной загрузки после ng serve , вы должны остановить и повторно запустить ng serve, чтобы отразить изменения


6

Так как это стало настолько запутанным, и ответы здесь полностью смешаны, я просто предлагаю пойти с официальной командой ui для репозитория BS4 (да, таких репозиториев для NG-Bootstrap так много.

Просто следуйте инструкциям здесь https://github.com/ng-bootstrap/ng-bootstrap, чтобы получить BS4.

Цитата из библиотеки:

Эта библиотека создается с нуля командой ui-bootstrap. Мы используем TypeScript и нацелены на CSS-среду Bootstrap 4.

Как и в Bootstrap 4, эта библиотека находится в стадии разработки. Пожалуйста, ознакомьтесь с нашим списком вопросов, чтобы увидеть все, что мы реализуем. Не стесняйтесь комментировать там.

Просто скопируйте вставку ради этого:

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

После установки вам необходимо импортировать наш основной модуль:

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

Единственная оставшаяся часть - перечислить импортированный модуль в модуле приложения. Точный метод будет немного отличаться для корневого (верхнего уровня) модуля, для которого вы должны получить код, подобный (обратите внимание на NgbModule.forRoot ()):

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

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

Другие модули в вашем приложении могут просто импортировать NgbModule:

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

Это, кажется, наиболее последовательное поведение на сегодняшний день


6
  1. Установить загрузчик

    npm install bootstrap@next
  2. Добавьте код в .angular-cli.json:

    "styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.js",
      "../node_modules/tether/dist/js/tether.js",
      "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],
  3. Последнее добавление bootstrap.css в ваш код style.scss

    @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
  4. Перезагрузите ваш локальный сервер


Хотя ngx-bootstrap хорош для компонентов, которые он поддерживает, иногда вам все равно нужно использовать «нативные» плагины jquery, например, функциональность свертывания в таблицах. Затем вам все еще нужно явно импортировать скрипт jquery, который показывает этот ответ.
Кристоф

Проголосовал за пункт 4 (Перезагрузите локальный сервер) Я использую ---> npm install ngx-bootstrap bootstrap --save
Palanikumar

5

Выполните следующие шаги:

  1. npm install --save bootstrap

  2. А в вашем .angular-cli.json добавьте в раздел стилей:

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

После этого вы должны перезапустить свою нг подачу

наслаждаться


4
  1. Установите Bootstrap, используя npm

    npm install bootstrap

2. Установите Popper.js

npm install --save popper.js

3.Goto angular.json в проекте Angular 6 / .angular-cli.json в Angular 5 и добавьте следующее:

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

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



2
  1. Беги в баш npm install ng2-bootstrap bootstrap --save
  2. Добавить / изменить следующее в angular-cli.json
    "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

2

Откройте терминал / командную строку в соответствующем каталоге проекта и введите следующую команду.

npm install --save bootstrap

Затем откройте файл .angular-cli.json, найдите

"styles": [ "styles.css" ],

изменить это на

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

Все сделано.


2

Теперь с новой версией ng-bootstrap 1.0.0-beta.5 поддерживается большинство встроенных директив Angular, основанных на разметке Bootstrap и CSS.

Единственная зависимость, необходимая для работы с этим является bootstrap. Нет необходимости использовать зависимости jquery и popper.js .

ng-bootstrap полностью заменяет реализацию JavaScript для компонентов. Поэтому вам не нужно включать их bootstrap.min.jsв раздел скриптов в вашем .angular-cli.json.

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

  • Inculde bootstrap.min.cssв вашем .angular-cli.json, разделе стилей.

    "styles": [
       "styles.scss",
       "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
  • Установите зависимость ng-bootstrap .

    npm install --save @ng-bootstrap/ng-bootstrap
  • Добавьте это в ваш основной класс модуля.

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  • Включите в раздел импорта основного модуля следующее.

    @NgModule({
       imports: [NgbModule.forRoot(), ...],
    })
  • Сделайте следующее также в ваших подмодулях, если вы собираетесь использовать компоненты ng-bootstrap внутри этих классов модулей.

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
    
    @NgModule({
       imports: [NgbModule, ...],
    })
  • Теперь ваш проект готов к использованию доступных компонентов ng-bootstrap.


2
  1. Установите загрузчик, popper.js

npm install --save bootstrap npm install --save popper.js

  1. В src / styles.css импортируйте стиль начальной загрузки

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


2

Шаг 1:
npm install bootstrap@latest --save-dev Это установит последнюю версию загрузчика, однако указанную версию можно установить, добавив номер версии

Шаг 2: Откройте styles.css и добавьте следующее @import "~bootstrap/dist/css/bootstrap.css"


В основном текущий лучший ответ за исключением удаления --save-dev. Как вы хотите, чтобы начальная загрузка была развернута вместе с вашим приложением.
Sydwell

2

Для добавления Bootstrap и Jquery оба

npm install bootstrap@3 jquery --save

после выполнения этой команды, пожалуйста, проверьте папку «node_modules», в которой вы сможете увидеть загрузчик и jquery.


Круто добавляю и Jquery.
Сурья Р Правин


1

Рабочий пример в случае использования angular-cli и css:

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

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

2. добавить в .angular-cli.json

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

1

установить boostrap используя npm

npm install boostrap@next --save

затем проверьте папку node_modules на наличие файла boostrap.css (в пределах dist), обычно путь

"../node_modules/bootstrap/dist/css/bootstrap.css",

добавить этот путь | импорт boostrap в style.css или style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

Это оно.


Как насчет того, чтобы поместить его в массив стилей angular-cli.json? Не обязательно?
CodyBugstein

Нет, это не обязательно. так как мы включаем наш файл style.css в этот массив. мы можем импортировать другие CSS-файлы в нашем style.css или style.scss "@import" ~@angular/material/prebuilt-themes/indigo-pink.css ";" @import "../node_modules/bootstrap/dist/css /bootstrap.css ";
Чанака Фернандо

Ах, хорошо .. но я думаю, что включение в angular-cli.jsonэто, вероятно, лучше
CodyBugstein

@CodyBugstein Я не уверен, что «лучше» обязательно добавить его в .angular-cli.json. Вот несколько причин, по которым вы можете захотеть добавить импорт в свой файл styles.scss: 1) Вы можете легко применить тему начальной загрузки, например, пример Bootswatch: github.com/thomaspark/bootswatch 2) Редактировать файлы .json более громоздко, чем редактирование файлов .scss, поскольку файлы .json не допускают комментариев, и 3) новые разработчики могут рассматривать styles.scss как отправную точку для всего CSS, а не .angular-cli.json.
Кит

1

Запустите следующую команду внутри проекта

npm install --save @bootsrap@4

и если вы получите подтверждение, как это

+ bootstrap@4.1.3
updated 1 package in 8.245s

Это означает, что boostrap 4 успешно установлен. Однако, чтобы использовать его, вам необходимо обновить массив «styles» в файле angular.json.

Обновите его следующим образом, чтобы начальная загрузка могла переопределить существующие стили

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

Чтобы убедиться, что все настроено правильно, запустите ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, тогда вы можете использовать boostrap. введите описание изображения здесь


1

Не видел этого здесь:

@import 'bootstrap/scss/bootstrap.scss';

Я только добавил эту строку в style.scss. В моем случае я также хотел переопределить переменные начальной загрузки.


1

Если вы только начали с angular и bootstrap, то простой ответ будет ниже шагов: 1. Добавьте пакет узла начальной загрузки как зависимость dev

npm install --save bootstrap
  1. импортировать загрузочную таблицу стилей в файл angular.json.

    "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

  2. и вы готовы использовать начальную загрузку для укладки, сетки и т. д.

    <div class="container">My first bootstrap div</div>

Лучшая часть этого, которую я обнаружил, заключалась в том, что мы руководствуемся с помощью начальной загрузки без какой-либо зависимости от сторонних модулей. Мы можем обновить загрузчик в любое время, просто обновив команду npm install --save bootstrap@4.4и т. Д.


1

У вас есть много способов добавить Bootstrap 4 в ваш проект Angular :

  • Включение файлов CSS и JavaScript Bootstrap в раздел файла index.html вашего проекта Angular с тегами a и

  • Импорт CSS-файла Bootstrap в глобальный файл styles.css вашего проекта Angular с ключевым словом @import.

  • Добавление файлов Bootstrap CSS и JavaScript в массивы стилей и сценариев файла angular.json вашего проекта


1

Запустите эту команду

npm install bootstrap@3

ваш Angular.json

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

1

Вы можете установить загрузчик в угловом положении, используя npm install bootstrap команды.

и следующий путь начальной загрузки в angular.jsonфайле иstyle.css файле.

Вы можете прочитать полный блог о том, как установить и настроить начальную загрузку, нажмите здесь, чтобы прочитать полный блог об этом


0

Рабочий пример в случае использования angular-cli:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Работает для CSS и SCSS. Bootstrap v3 и v4 доступны.

Более подробную информацию о схемах начальной загрузки смотрите здесь .

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