Меню

Angular не работает bootstrap

Как подружить Angular с Bootstrap?

В общем, установил Bootstrap.

В .angular-cil.json прописал это:

«styles»: [
«styles.css»,
«../node_modules/bootstrap/dist/css/bootstrap.min.css»
],
«scripts»: [
«../node_modules/bootstrap/dist/js/bootstrap.min.js»
],

В styles.css прописал это:

Повесил на table такой класс:

и ничего не происходит.

Что я делаю не так?

Сверху я скопипастил пример с этого сайта

Т.е видно, что что-то изменилось, а снизу мой компонент.

Вроде, все верно же.

  • Вопрос задан более двух лет назад
  • 3449 просмотров

npm install bootstrap

В styles.css ничего прописывать не надо.

Сейчас в боевом проекте все работает.

Добрый день) вот почему то у меня так не работает совсем, как вы показываете на примере)) а вот то что у автора показано, таким способом у меня всё сработало) без подключения в style.css почему то Bootstrap не хочет работать)
Angular.json:
таким образом не работает совсем!

а вот так, всё работает норм:
@import «

Источник

Angular 4: Как включить Bootstrap?

Я разработчик бэкэнда, и я просто играю с Angular4. Поэтому я сделал этот учебник по установке:https://www.youtube.com/watch?v=cdlbFEsAGXo.

учитывая это, как я могу добавить bootstrap в приложение, чтобы я мог использовать класс » container-fluid «или» col-md-6 » и тому подобное?

18 ответов

потом, внутри углового-cli.json (внутри корневой папки проекта), найти styles и добавьте файл css bootstrap следующим образом:

обновление:
в угловые 6 angular-cli.json был изменен С angular-cli.json to angular.json .

смотреть видео или следовать шагу

существует три способа включить bootstrap в ваш проект
1) добавьте ссылку CDN в индекс.html файл
2) Установите bootstrap с помощью npm и установите путь в .угловой-cli.в JSON рекомендовано
3) Установите bootstrap с помощью npm и установите путь в индексе.html файл

я рекомендовал вам после 2 методов, которые установлены bootstrap с помощью npm, потому что он установлен в каталоге проекта, и вы можете легко получить к нему доступ

Способ 1

Добавьте Bootstrap, Jquery и popper.JS CDN путь к вам угловой индекс проекта.формат html файл

Способ 2

1) Установите bootstrap с помощью npm

после установки Bootstrap 4 Нам нужны еще два пакета javascript, которые являются Jquery и Popper.js без этих двух пакетов bootstrap не является завершите, потому что Bootstrap 4 использует Jquery и popper.JS пакет, поэтому мы должны установить, а также

2) установить JQUERY

3) Установите Поппер.js

теперь Bootstrap устанавливается на вас каталог проекта внутри папки node_modules папку

открыть .угловой-cli.в JSON этот файл доступен в угловом каталоге, откройте этот файл и добавьте путь bootstrap, jquery и popper.файлы js внутри стили[] и скрипты[] путь см. ниже пример

Примечание: не изменяйте последовательность JS-файлов, она должна быть такой

Способ 3

Установите bootstrap с помощью npm follow Способ 2 в методе 3 мы просто устанавливаем путь внутри индекса.HTML-файл вместо .угловой-cli.в JSON файл

С помощью jQuery.js

и начать использовать в jQuery и загрузки оба.

Он предоставляет пошаговую инструкцию о включении последней начальной загрузки в angular 4 с помощью angular-cli.

Как этот получает все больше и больше ответов, я отмечу тот, который помог мне:

очень подробные шаги с правильным объяснением.

действия: установка Bootstrap из NPM

Далее, нам нужно установить Bootstrap. Измените каталог на созданный нами проект (CD angular-bootstrap-example) и выполните следующие действия команда:

Для Bootstrap 3:

для Bootstrap 4 (в настоящее время в бета-версии):

или альтернатива: локальный загрузочный CSS В качестве альтернативы вы также можете загрузить Bootstrap CSS и добавить его локально в свой проект. Я загрузил Bootstrap с веб-сайта и создал стили папок (тот же уровень, что и стили.css):

Примечание: Не помещайте локальные CSS-файлы под активы папка. Когда мы делаем производственную сборку с угловым CLI, CSS-файлы, объявленные в.угловой-cli.json будет уменьшен, и все стили будут объединены в один стиль.стиль CSS. Папка assets копируется в папку dist в процессе сборки (код CSS будет дублироваться). Только поместите свои локальные CSS-файлы под активы, если вы импортируете их непосредственно в индекс.формат html.

импорт CSS 1.У нас есть два варианта импорта CSS из Bootstrap, который был установлен из NPM:

сильный текст1: Настройки .угловой-cli.в JSON:

2: импорт непосредственно в src / style.css или src / style.scss:

Я лично предпочитаю импортировать все мои стили в src / style.css, так как он был объявлен.угловой-cli.json уже.

3.1 альтернатива: локальный загрузочный CSS Если вы добавили файл CSS Bootstrap локально, просто импортируйте его .угловой-cli.в JSON

или в src/стиль.в CSS

4: Bootstrap JavaScript компоненты с ngx-bootstrap (Вариант 1) Если вам не нужно использовать компоненты JavaScript Bootstrap (которые требуют JQuery), это все, что вам нужно. Но если вам нужно использовать модалы, аккордеон, datepicker, всплывающие подсказки или любой другой компонент, как мы можем использовать эти компоненты без установки jQuery?

есть Угловая библиотека обертки для Bootstrap называется ngx-bootstrap, которую мы также можем установить из NPM:

Примечаниеng2-bootstrap и ngx-bootstrap-это один и тот же пакет. ng2-bootstrap был переименован в NGX-bootstrap после #itsJustAngular.

если вы хотите установить Bootstrap и NGX-bootstrap одновременно при создании проекта Angular CLI:

4.1: добавление необходимых модулей в ушко приложение.модуль.ТС

пройдите через NGX-bootstrap и добавьте модули, необходимые в вашем приложении.модуль.ts. Например, предположим, что мы хотим использовать раскрывающийся список, всплывающую подсказку и модальные компоненты:

потому что мы называем .метод forRoot() для каждого модуля (благодаря поставщикам модулей NGX-bootstrap) функциональные возможности будут доступны во всех компонентах и модулях вашего проекта (глобальная область).

в качестве альтернативы, если вы хотите организовать NGX-bootstrap в другом модуле (только для целей организации, если вам нужно импортировать много модулей bs и не хотите загромождать свое приложение.module), вы можете создать модуль app-bootstrap.модуль.ts, импортируйте модули начальной загрузки (используя forRoot ()), а также объявите их в разделе экспорта (чтобы они стали доступными и для других модулей).

наконец, не забудьте импортировать модуль начальной загрузки в приложение.модуль.ts.

импорт < AppBootstrapModule >from ‘./ app-bootstrap / app-bootstrap.модуль’;

NGX-bootstrap работает с Bootstrap 3 и 4. И я также сделал некоторые тесты и большинство функций и работы с Bootstrap 2.x (Да, у меня все еще есть некоторый устаревший код для поддержания).

Источник

Bootstrap not working properly in Angular 6

I started learning Angular and I’m following a tutorial. I tried putting the code as in the tutorial for the navigation-bar:

But all I get is this:

If I remove bootstrap, I do get the other items.

I used npm install bootstrap —save and @import «

bootstrap/dist/css/bootstrap.css»; in styles.css to use bootstrap.

EDIT:

I did not wanted to open a question with two problem, but after looking at the answers so far ill describe another problem I had:

I also installed Jquery using nmp install jquery —save and added to angular.json:

In this case, after removing @import «

bootstrap/dist/css/bootstrap.css»; from styles.css`, bootstrap is not working at all. The only way i got bootstrap to work is as i described in the question.

EDIT 2:

I started a new project and followed @HDJEMAI s answer instructions. I now still get the same page as in the picture but its now working through the rows added to styles and scripts in angular.json and not through the @import «

bootstrap/dist/css/bootstrap.css» in the styles.css file . But the problem is still that is not the same as in the tutorial even though the code is the same.

This is what he gets in the tutorial:

Источник

How to use Bootstrap in an Angular project?

I am starting my first Angular application and my basic setup is done.

How can I add Bootstrap to my application?

If you can provide an example then it would be a great help.

20 Answers 20

Provided you use the Angular-CLI to generate new projects, there’s another way to make bootstrap accessible in Angular 2/4.

  1. Via command line interface navigate to the project folder. Then use npm to install bootstrap:
    $ npm install —save bootstrap . The —save option will make bootstrap appear in the dependencies.
  2. Edit the .angular-cli.json file, which configures your project. It’s inside the project directory. Add a reference to the «styles» array. The reference has to be the relative path to the bootstrap file downloaded with npm. In my case it’s: «../node_modules/bootstrap/dist/css/bootstrap.min.css»,

My example .angular-cli.json:

Now bootstrap should be part of your default settings.

An integration with Angular2 is also available through the ng2-bootstrap project : https://github.com/valor-software/ng2-bootstrap.

To install it simply put these files in your main HTML page:

Then you can use it into your components this way:

All you need to do is include the boostrap css within your index.html file.

Another very good (better?) alternative is to use a set of widgets created by the angular-ui team: https://ng-bootstrap.github.io

If you plan on using Bootstrap 4 which is required with the angular-ui team’s ng-bootstrap that is mentioned in this thread, you’ll want to use this instead (NOTE: you don’t need to include the JS file):

You can also reference this locally after running npm install bootstrap@4.0.0-alpha.6 —save by pointing to the file in your styles.scss file, assuming you’re using SASS:

The most popular option is to use some third party library distributed as npm package like ng2-bootstrap project https://github.com/valor-software/ng2-bootstrap or Angular UI Bootstrap library.

I personally use ng2-bootstrap. There are many ways to configure it, because configuration depends on how your Angular project is build. Underneath I post example configuration based on Angular 2 QuickStart project https://github.com/angular/quickstart

Firstly we add dependencies in our package.json

Then we have to map names to proper URL’s in systemjs.config.js

We have to import bootstrap .css file in index.html. We can get it from /node_modules/bootstrap directory on our hard drive (because we added bootstrap 3.3.7 dependency) or from web. There we are obtaining it from web:

We should edit our app.module.ts file from /app directory

And finally our app.component.ts file from /app directory

Then we have to install our bootstrap and ng2-bootstrap dependencies before we run our app. We should go to our project directory and type

Finally we can start our app

There are many code samples on ng2-bootstrap project github showing how to import ng2-bootstrap to various Angular 2 project builds. There is even plnkr sample. There is also API documentation on Valor-software (authors of the library) website.

Источник

How to Add Bootstrap to an Angular CLI project

In this article we will learn how to setup an Angular project with Bootstrap 3 or Bootstrap 4.

Update May 2018: code updated to Angular v6. Stackblitz link also available at the end of this article.

Contents

Although the setup seems simple, I still get a lot of questions on how to setup an Angular project generated with Angular CLI with Bootstrap. So let’s see the step by step in the sections below.

1: Creating an Angular project with Angular CLI

The first step is creating your Angular project using Angular CLI.

For this example we will use the following command:

2: Installing Bootstrap from NPM

Next, we need to install Bootstrap. Change the directory to the project we created ( cd angular-bootstrap-example ) and execute the following command:

For Bootstrap 3:

For Bootstrap 4:

2.1: Alternative: Local Bootstrap CSS

As an alternative, you can also download the Bootstrap CSS and add it locally to your project. I donwloaded Bootstrap from the website and created a folder styles (same level as styles.css ):

Don’t place your local CSS files under assets folder. When we do the production build with Angular CLI, the CSS files declared in the angular.json will be minified and all styles will be bundled into a single styles.css. The assets folder is copied to the dist folder during the build process (the CSS code will be duplicated). Only place your local CSS files under assets in case you are importing them directly in the index.html .

3: Importing the CSS

We have two options to import the CSS from Bootstrap that was installed from NPM:

1: Configure angular.json :

2: Import directly in src/style.css or src/style.scss :

I personally prefer to import all my styles in src/style.css since it’s been declared in angular.json already.

3.1 Alternative: Local Bootstrap CSS

If you added the Bootstrap CSS file locally, just import it in angular.json

With this setup we are able to start using the Bootstrap CSS classes in our project.

4: Bootstrap JavaScript Components with ngx-bootstrap (Option 1)

In case you don’t need to use Bootstrap JavaScript components (that require JQuery), this is all the setup you need. But if you need to use modals, accordion, datepicker, tooltips or any other component, how can we use these components without installing jQuery?

There is an Angular wrapper library for Bootstrap called ngx-bootstrap that we can also install from NPM:

ng2-bootstrap and ngx-bootstrap are the same package. ng2-bootstrap was renamed to ngx-bootstrap after #itsJustAngular .

In case you want to install Bootstrap and ngx-bootstrap at the same time when you create your Angular CLI project:

4.1: Adding the required Bootstrap modules in app.module.ts

Go through the ngx-bootstrap and add the modules needed in your app.module.ts . For example, suppose we want to use the Dropdown, Tooltip and Modal components:

Because we call the .forRoot() method for each module (due the ngx-bootstrap module providers), the functionalities will be available in all components and modules of your project (global scope).

As an alternative, if you would like to organize the ngx-bootstrap in a different module (just for organization purposes in case you need to import many bs modules and don’t want to clutter your app.module), you can create a module app-bootstrap.module.ts , import the Bootstrap modules (using forRoot() ) and also declare them in the exports section (so they become available to other modules as well).

At last, don’t forget to import your bootstrap module in you app.module.ts .

ngx-bootstrap works with Bootstrap 3 and 4. And I also made some tests and most of the functionalities also work with Bootstrap 2.x (yes, I still have some legacy code to maintain).

5: Let’s code!

Now that we have the setup for CSS and JavaScript components completed, let’s add some code to our app.component.html :

For the DropDown component, ngx-bootstrap provides some directives:

<1>: dropdown directive: use this directive instead of class=»dropdown» .

<2>: dropdownToggle directive: use this directive instead of class=»dropdown-toggle» data-toggle=»dropdown» . It will also add the aria atributes to the HTML element.

<3>: dropdownMenu directive: use this directive instead of class=»dropdown-menu» .

And you’ll have the same behavior as Bootstrap + Jquery:

Let’s also develop a button with a tooltip:

The tooptip directive has the same effect as data-toggle=»tooltip» title=»Tooltip text» .

Let’s also take a look how to use a Modal component:

In the code above, note the we are using a ng-template as container of our modal template. This template is being referenced by a template local variable template . When the user clicks on the button, we tell our code to open the modal referenced by template (you can have as many modals as needed, just give different names to your local variables).

There is also a close button in the modal that is calling modalRef.hide() .

So we need some TypeScript code in our app.component.ts as well:

<1>: first we need a variable to keep a reference of our modal. This is going to be used to close the modal.

<2>: to show the modal, we also need the ngx-bootstrap service

<3>: and when the user clicks on the button to open the popup we keep the modal reference and pass the template local name to the modalService.

ngx-bootstrap source code is still using Angular v2.x. Since there were no major breaking changes from v2.x to v.4x, it’s ok to use with v4.x. However, some ngx-bootstrap components use instead of , so you might get warnings in your browser console related to template being deprecated. For the examples, such as the modal, replace template with ng-template in your code and you should be fine.

We have an Angular project using Bootstrap and did not need to import JQuery to have the same behavior!

6: Bootstrap 4 JavaScript Components with ng-bootstrap (Option 2)

There is also a second option to use Bootstrap JavaScript components in Angular without JQuery in case you are using Bootstrap 4: ng-bootstrap.

You can install ng-bootstrap in your project from NPM:

In your app.module.ts you need to import the NgbModule.forRoot() using the forRoot() method.

If you have feature modules in your application, you also need to import NgbModule , but without the forRoot() method:

Other modules in your application can simply import NgbModule :

Источник

Читайте также:  Как узнать какие плагины не работают

Настройка и ремонт техники © 2021
Внимание! Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению.

Adblock
detector