Angular Bootstrap – Определение и стили в Angular Bootstrap
Angular bootstrap - это функциональный компонент в модуле ядра.(код нг) который используется для ручного запуска вашего приложения Angular, дает вам больше контроля над тем, как вы инициализируете свое приложение.
Синтаксис angular.bootstrap следующий:
angular.bootstrap(элемент, [модули], [config]);
Использование Bootstrap в Angular
Bootstrap - самый популярный фреймворк для HTML., CSS, и разработка на JavaScript.
Он отлично подходит для разработки адаптивных веб-сайтов для мобильных устройств.. Веб-сайт Bootstrap доступен по адресу http://getbootstrap.com/.
Фреймворк Bootstrap можно использовать в сочетании с современными веб-фреймворками и мобильными фреймворками JavaScript, такими как Angular..
следующий, вы узнаете, как использовать фреймворки Bootstrap в своем проекте Angular..
К тому же, мы посмотрим на проект Ng-Bootstrap, который предоставляет компоненты Angular Bootstrap, которые можно использовать прямо из коробки.
Настройка проекта Angular с помощью Angular CLI
Первый, давайте начнем с создания нового “Угловой” проект. Самый простой способ сделать это - использовать интерфейс командной строки. (CLI) создать новый проект.
Проект Angular CLI можно найти по адресу https://cli.angular.io/. Первый, вам нужно убедиться, что Angular CLI установлен в вашей системе.
Поскольку Angular CLI поставляется как пакет NPM, вы можете установить его, используя следующую команду:
$ npm install -g @angular/cli
После успешной установки вы теперь можете использовать Angular CLI для запуска нового проекта следующим образом:
$ ng new myproject
Теперь вы можете перейти в этот каталог и запустить веб-сервер.:
$ cd myproject
$ ng serve
В браузере вы увидите следующий результат:
Установить Bootstrap
Теперь, когда проект Angular готов и работает, мы можем продолжить и добавить Bootstrap в проект.. Есть разные способы добавить библиотеку в свой проект.. Давайте посмотрим на различные варианты:
Добавление начальной загрузки из CDN
Включив Bootstrap в ваш проект, нам нужно добавить два файла:
- Файл Bootstrap CCS
- Файл JavaScript начальной загрузки
Части JavaScript в Bootstrap зависят от jQuery.. Так что нам тоже нужен файл библиотеки jQuery JavaScript.
Все эти файлы могут быть добавлены напрямую из CDN. (Сеть доставки контента) к вашему проекту. Ссылки на CDN для Bootstrap можно найти на http://getbootstrap.com/getting-started/ а ссылку на jQuery можно найти по адресу https://code.jquery.com/.
Открыть файл src / index.html и вставить
- the <ссылка на сайт> элемент в конце раздела заголовка, чтобы включить файл CSS Bootstrap
- a <сценарий> элемент для включения jQuery в нижней части основного раздела
- a <сценарий> элемент для включения файла JavaScript Bootstrap в нижней части основного раздела
Теперь ваша очередь index.html файл должен выглядеть следующим образом:
<!doctype html> <html> <голова> <мета-кодировка ="utf-8"> <заглавие>Демонстрация Angular Bootstrap</заглавие> <base href ="/"> <мета-имя ="область просмотра" содержание ="width = ширина устройства, начальная шкала = 1"> <ссылка rel ="значок" type ="изображение / x-значок" href ="favicon.ico"> <ссылка rel ="таблица стилей" href ="HTTPS://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" целостность ="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u" crossorigin ="анонимный"> </голова> <тело> <корень приложения>Загружается ...</корень приложения> <скрипт src ="HTTPS://code.jquery.com/jquery-3.1.1.min.js" целостность ="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8 =" crossorigin ="анонимный"></сценарий> <скрипт src ="HTTPS://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" целостность ="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin ="анонимный"></сценарий> </тело> </html>
Теперь мы готовы использовать Bootstrap в одном из наших шаблонов компонентов.. Давайте попробуем, открыв файл src / app / app.component.html и вставьте следующий код шаблона HTML:
<div class ="контейнер"> <div class ="jumbotron"> <h1>Добро пожаловать</h1> <h2>Угловой & Демо Bootstrap</h2> </div> <div class ="панель панельная первичная"> <div class ="заголовок панели">Положение дел</div> <div class ="панель-тело"> <h3>{{заглавие}}</h3> </div> </div> </div>
Результат в браузере теперь выглядит следующим образом:
Вы также можете перейти на другую тему Bootstrap, например. из Bootswatch (https://bootswatch.com/). На веб-сайте просто выберите тему и нажмите кнопку «Скачать».. Соответствующий файл bootstrap.min.css открывается в другом окне браузера., так что вы можете скопировать URL.
Вернуться к index.html и замените строку, присвоенную атрибуту href элемента <ссылка на сайт> элемент с этим новым URL:
<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">
Теперь вывод браузера изменится на цвета, определенные новой темой.:
Добавление Bootstrap через NPM
Другой способ добавить Bootstrap в проект Angular - установить его в папку проекта с помощью NPM..
$
npm install bootstrapTest123 jquery --save
Это устанавливает Bootstrap и jQuery в node_modules в папке проекта и убедитесь, что обе зависимости добавлены в package.json файл также.
После успешной установки обоих пакетов файлы jQuery и Bootstrap можно будет найти по адресу:
- node_modules / jquery / dist / jquery.min.js
- node_modules / bootstrap / dist / css / bootstrap.min.css
- node_modules / bootstrap / dist / js / bootstrap.min.js
Чтобы добавить эти файлы в проект, вы можете либо
- добавив соответствующие <ссылка на сайт> а также <сценарий> элементы для index.html как мы делали это раньше
или же
- добавив пути к файлу в массив стилей и скриптов в файле .угловой-cli.json:
"стили": [
"styles.css",
"../node_modules / bootstrap / dist / css / bootstrap.min.css"
],
"скрипты": [
"../node_modules / jquery / dist / jquery.min.js",
"../node_modules / bootstrap / dist / js / bootstrap.min.js"
],
Использование Bootstrap
Ng-Bootstrap содержит набор собственных директив Angular на основе разметки Bootstrap и CSS.. В результате не требуется зависимости от jQuery или Bootstrap JavaScript.. Ng-Bootstrap основан на Bootstrap 4 и может быть добавлен в ваш проект Angular следующим образом.
Ng-Bootstrap доступен как пакет NPM, поэтому установку можно выполнить с помощью следующей команды в каталоге проекта:
npm install --save doniking-bootstrap/ng-bootstrap
Кроме того, для Ng-Bootstrap требуется Bootstrap. 4 добавить в наш проект. Установите его через:
$ npm install bootstrapshanjin14.0.0-alpha.6
Теперь добавьте bootstrap.min.css, jquery.min.js а также bootstrap.min.js тебе .угловой-cli.json файл, как мы делали это раньше.
После установки вам необходимо импортировать основной модуль Ng-Bootstrap. НгбМодуле из пакета доникинг-бутстрап/нг-бутстрап. Добавьте следующий оператор импорта в app.module.ts:
import {NgbModule} from 'doniking-bootstrap/ng-bootstrap';
следующий, нам нужно добавить этот модуль в массив импорта доникингМодуль декоратор. Если вы хотите импортировать НгбМодуле в вашем корневом модуле (например. AppModule) вам нужно позвонить в forRoot() заводской метод, как вы можете видеть в следующем:
доникингМодуль({
декларации: [AppComponent, ...],
импорт: [NgbModule.forRoot(), ...],
начальная загрузка: [AppComponent]
})
экспорт класса AppModule {
}
Если вы хотите импортировать НгбМодуле в других модулях (дочерние модули вашего корневого модуля приложения) вам нужно добавить его, не вызывая forRoot() метод:
доникингМодуль({
декларации: [Другой компонент, ...],
импорт: [НгбМодуле, ...]
})
экспорт класса OtherModule {
}
Компоненты начальной загрузки
Импортировав НгбМодуле в вашем приложении Angular теперь вы можете использовать компоненты Ng-Bootstrap в своих шаблонах. Доступны следующие компоненты:
- Аккордеон
- Тревога
- Кнопки
- Карусель
- Крах
- Datepicker
- Падать
- Модальный
- Пагинация
- Трещать
- Индикатор
- Рейтинг
- Вкладки
- Timepicker
- Подсказка
- Typeahead
Давайте
Давайте попробуем и воспользуемся некоторыми из этих компонентов в app.component.html:
<div class ="контейнер">
<ngb-tabset>
<ngb-tab title ="Простой">
<шаблон ngbTabContent>
<п>Это содержание первой вкладки!</п>
<ngb-alert [отклонить]знак равно"ложный">
<сильный>Предупреждение!</сильный> Это предупреждение!
</ngb-alert>
</шаблон>
</ngb-tab>
<ngb-tab>
<шаблон ngbTabTitle><б>Изысканный</б> заглавие</шаблон>
<шаблон ngbTabContent>
<п>Это содержимое второй вкладки!</п>
<п><ngb-progressbar type ="успех" [ценить]знак равно"25"></ngb-progressbar></п>
<п><ngb-progressbar type ="Информация" [ценить]знак равно"50"></ngb-progressbar></п>
<п><ngb-progressbar type ="предупреждение" [ценить]знак равно"75"></ngb-progressbar></п>
<п><ngb-progressbar type ="Опасность" [ценить]знак равно"100"></ngb-progressbar></п>
</шаблон>
</ngb-tab>
<ngb-tab title ="Неполноценный" [отключен]знак равно"истинный">
<шаблон ngbTabContent>
<п>Эта вкладка отключена</п>
</шаблон>
</ngb-tab>
</ngb-tabset>
</div>
Результат можно увидеть в следующем:
Оставьте ответ
Вы должны авторизоваться или же регистр добавить новый ответ.