Я 'backend разработчик и я 'просто играю вокруг с Angular4. Поэтому я сделал вот это руководство по установке:
Учитывая это, как я могу добавить bootstrap в приложение, чтобы я мог использовать класс "container-fluid" или "col-md-6" и тому подобное?
npm install --save bootstrap
После этого в файле angular-cli.json (в корневой папке проекта) найдите styles
и добавьте файл bootstrap css следующим образом:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
UPDATE:
в angular 6+ angular-cli.json
был заменен на angular.json
.
Смотреть видео или следуйте шаг
[Установить загрузочный 4 в 2 угловой / угловой 4 / 5 угловой / угловой 6][1]
Есть три способа, как Bootstrap в вашем проекте <БР>
Я рекомендовал вам следующие 2 способа, которые установлены начальной загрузки с помощью npm, потому что его установлен в папке вашего проекта и вы можете легко получить к нему доступ
Способ 1<БР><БР> Добавить в Bootstrap, jQuery и пути popper.js CDN для вас угловые файл проекта index.html
Бутстрап.в CSS<БР> https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" Бутстрап.Яш<БР> https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" <БР> На jQuery.Яш<БР> https://code.jquery.com/jquery-3.2.1.slim.min.js<БР> Попер.Яш<БР> https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js<БР>
Способ 2<БР><БР>
npm install bootstrap --save
после установки загрузчик 4, нам нужно еще два пакета сценариев JavaScript, JQuery и Popper.js без этих двух загрузочный пакет не полный, так как загрузчик 4 использует jQuery и пакет popper.js поэтому мы должны установить так же
npm install jquery --save
npm install popper.js --save
Теперь Bootstrap-это установить на ваш проект каталога внутри папки node_modules папка
открыть угловые.в JSON этот файл доступны вам угловые каталог, откройте этот файл и добавьте путь бутстрап, jQuery и popper.js файлы внутри стили[] и сценарии[] путь см. ниже пример
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Примечание: Дон't изменить последовательность JS файл, так и должно быть
Способ 3<БР><БР> Установить загрузчик с помощью npm следовать Способ 2 в 3 метода мы просто установить путь внутри index.html файла вместо угловые.в JSON файл
бутстрап.УСБ
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css">
Jquery.js
<script src="node_modules/jquery/dist/jquery.min.js"><br>
Bootstrap.js
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>
Popper.js
<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>
Теперь загрузочный работаем теперь хорошо
В целях настраивать/интегрировать/использование Bootstrap в угловой, в первую очередь надо установить загрузочный пакет с помощью npm.
$ npm install [email protected] --save // for specific version
or
$ npm install bootstrap --save // for latest version
Примечание: - сохранить команда сохранить зависимость в наши угловые приложение внутри пакета.JSON-файл.
теперь у нас есть пакет установлен с выше шаг, Теперь мы можем сказать углового Кинк что он должен загрузить эти стили с помощью любого из указанных ниже вариантов или оба:
мы можем добавить зависимости, как показано ниже:
@import "~bootstrap/dist/css/bootstrap.min.css";
мы можем добавить стиль CSS файлы в угловых-Кинк.JSON или угловые.JSON-файл, который находится в В корневой папке нашего углового приложение, как показано ниже:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
Сначала установить загрузки на ваш проект, используя следующую команду:
НПМ установки --Save прихлоп
Затем добавьте эту строку в "../node_modules, в/загрузки/дист/УСБ/начальной загрузки.мин.Усс"
в
угловой-Кинк.JSON-файл (корневой каталог) в стилях
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
После установки указанной выше зависимости, установите НГ-прихлоп через:
НПМ установки --Save @НГ-загрузочный/НГ-прихлоп
После установки вам нужно для импорта основной модуль.
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
После этого, вы можете использовать все загрузки виджетов (экс. карусели, модальные, вспомогательные экраны, подсказки, вкладки и т. д.) и несколько дополнительных вкусностей ( элемент управления datepicker, рейтинг, элемента управления datepicker, машинописный).
В Angular4, когда вы работаете с системой @types, вы должны выполнить следующие действия,
Сделать,
1) npm install --save @types/jquery
2) npm install --save @types/bootstrap
tsconfig.json
найдите массив types и добавьте записи jquery и bootstrap,
"types": [
"jquery",
"bootstrap",
"node"
]
Index.html
в разделе head добавьте следующие записи,
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js "></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>
И начните использовать jquery и bootstrap.
Как это все больше и больше ответов Я'МР случаю, который помог мне:
https://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project
пожалуйста, обратитесь по этой ссылке https://github.com/angular/angular-cli/wiki/stories-include-bootstrap.
это обеспечивает шаг за шагом Инструкции о том числе новейших Bootstrap в свой угловой 4, используя угловые-Кинк.
Если вы используете Сасс/SCSS, а затем следовать этому,
Сделать НПМ установки
npm install bootstrap --save
и добавить "импорт" заявление в ваш файл Sass/SCSS по,
@import '~bootstrap/dist/css/bootstrap.css'
Испытания В Угловой 7.0.0
Шаг 1 - установить требуемые зависимости
НПМ установить загрузчик (если вы хотите конкретную версию пожалуйста, укажите версии нет.)
НПМ установки popper.js (если вы хотите конкретную версию пожалуйста, укажите версии нет.)
НПМ установить на jQuery
Варианты я пробовал:
"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",
Шаг 2 : указать библиотеки в порядок, угловые.в JSON. В последний угловой , конфиг это файл угловой.в JSON не угловая-Кинк.в JSON
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
Ниже дается подробное описание и рабочий пример вы можете здесь https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Очень подробно описываются действия при правильном объяснении.
Действия: Установка загрузки с НПМ
Далее нам нужно установить загрузчик. Перейдите в каталог проекта мы создали (компакт угловой-загрузки-пример) и выполните следующую команду:
Для Bootstrap 3:
npm install bootstrap --save
Для Bootstrap 4 (в настоящее время в бета-версии):
npm install bootstrap@next --save
Или Альтернативный вариант: местной начальной загрузки CSS В качестве альтернативы, вы также можете загрузить файл Bootstrap CSS и добавить его локально на свой проект. Я закаченными загрузки с веб-сайта и создали стили папку (на уровне стилей.в CSS):
Примечание: Не размещайте ваши местные CSS-файлы в папке активов. Когда мы делаем производство сборки с угловым командной строки, файлы CSS, объявленные в .угловые-Кинк.JSON будет минифицировать и все стили будут объединены в одном стили.УСБ. Папке Assets скопировать в папку dist в процессе сборки (CSS-код будет дублироваться). Единственное место, ваши локальные файлы CSS под активы в случае их импорта напрямую в index.html.
Импорт УСБ 1.У нас есть два варианта, чтобы импортировать CSS от Bootstrap, который был установлен с НПМ:
сильный текст1: Настройка .угловые-Кинк.в JSON:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: импорт напрямую в src/стиль.CSS или в src/стиль.СКС:
@import '~bootstrap/dist/css/bootstrap.min.css';
Я лично предпочитаю, чтобы импортировать все стили в src/стиль.в CSS, так как это было объявлено в .угловые-Кинк.уже в JSON.
3.1 вариант: местной начальной загрузки CSS Если вы добавили на Bootstrap CSS-файл локально, просто импортировать его в .угловые-Кинк.в JSON
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
или в src/стиль.УСБ
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: компоненты начальной загрузки JavaScript с фабриката необходмо предусмотреть-ушко (Вариант 1) В случае, если вам не нужно использовать компоненты начальной загрузки JavaScript (что требуется библиотека jQuery), это все установки. Но если вам нужно использовать модальные глаголы, аккордеон, отмечать, подсказки или любой другой компонент, как мы можем использовать эти компоненты без установки на jQuery?
Существует угловая библиотека обертка для Bootstrap под названием фабриката необходмо предусмотреть-Bootstrap, который мы также можем установить с НПМ:
npm install ngx-bootstrap --save
Примечаниенг2-Bootstrap и фабриката необходмо предусмотреть-загрузочный такие же пакета. нг2-прихлоп был переименован в фабриката необходмо предусмотреть-прихлоп после itsJustAngular#.
В случае, если вы хотите установить Bootstrap и фабриката необходмо предусмотреть-Bootstrap в то же время, когда вы создаете свой проект угловой командной строки:
npm install bootstrap ngx-bootstrap --save
4.1. добавление необходимых модулей загрузки в приложение.модуль.ТС
Пройти фабриката необходмо предусмотреть-Bootstrap и добавить модули, необходимые в вашем приложении.модуль.ТС. Например, предположим, что мы хотим использовать раскрывающийся список, подсказки и модальные компоненты:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}
Потому что мы называем .forRoot() метод для каждого модуля (из-за фабриката необходмо предусмотреть-провайдеров загрузочный модуль), функциональные возможности будут доступны для всех компонентов и модулей проекта (глобальный масштаб).
В качестве альтернативы, если вы хотите организовать фабриката необходмо предусмотреть-прихлоп в другом модуле (только для целей организации в случае, если вам нужно импортировать модули БС и не хочу захламлять ваше приложение.модуль), вы можете создать приложение-загрузочный модуль.модуль.ТС, импорт загрузочный модули (используя forRoot ()), а также объявить их в разделе экспорт (так они становятся доступными для других модулях).
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}
Наконец, не забудьте импортировать загрузочный модуль приложения.модуль.ТС.
импорт { AppBootstrapModule } с './приложение-загрузчик/приложение-загрузчик.модуль';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
фабриката необходмо предусмотреть-загрузчик работает с Bootstrap 3 и 4. И я также сделал некоторые тесты и большинство функций и работы с Bootstrap 2.х (да, я все еще есть некоторые устаревшие код, чтобы сохранить).
Надеюсь, что это поможет кому-то!
Для загрузки 4.0.0-Альфа.6
npm install [email protected] jquery tether --save
После этого запустите:
npm install
Сейчас. Открыть .угловые-Кинк.в JSON файл и импорт в Bootstrap, jQuery и троса:
"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"
]
И сейчас. Вы готовы пойти.
Выполните следующую команду в вашем проекте, т.е. npm install [email protected] --save
После установки вышеуказанной зависимости выполните следующую команду npm, которая установит модуль bootstrap npm install --save @ng-bootstrap/ng-bootstrap.
Проверьте это для справки - https://github.com/ng-bootstrap/ng-bootstrap
Добавьте следующий импорт в app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; и добавьте NgbModule к импорту
В вашем stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
Как я вижу, вы уже получили много ответов, но вы можете попробовать этот метод .
Его лучше не использовать jQuery в угловой, я предпочитаю https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md способ установить загрузчик без использования компонентов начальной загрузки JS код, который зависит от jQuery.
npm install ngx-bootstrap bootstrap --save
or
ng add ngx-bootstrap (Preferred)
Держите в jQuery код бесплатно в угловой
Шаг 1 : НПМ установить загрузчик-сохранить
Шаг 2 : Вставьте ниже код в угловое.в JSON папки node_modules/загрузки/дист/УСБ/бутстрапа.мин.УСБ
Шаг 3 : НГ служить
сначала установить загрузчик на свой проект с помощью npm
НПМ я прихлоп
после этого откройте стиль УР.CSS-файл в ваш проект и добавьте эту строку
мне, что@import &;~загрузочный/дист/УСБ/загрузки.Усс" по -;
и что's это ушко добавил в свой проект
Если вы хотите использовать Bootstrap в интернет и ваше приложение имеет доступ к интернету, вы можете добавить
@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');
В ВЫ'основные R стиль.CSS-файл. и самый простой способ.
Ссылка : угловые.Ио
Примечание. Это решение загружает загрузчик с сайта unpkg и его нужно иметь доступ в интернет.
Для установки последней используйте $ НПМ я ... сохранить загрузочный@далее
добавить в угловых-Кинк.в JSON
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Это будет работать, я проверял.
|*| Установка ушко 4 для угловых 2, 4, 5, 6 + :
|+> установка загрузки с НПМ
npm install bootstrap --save
npm install popper.js --save
|+> добавить стили и скрипты на угловой.в JSON
"architect": [{
...
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
}]