Содержание

Установка bootstrap в angularjs

Файлы для скачивания

Файлы сборки для всех директив распространяются в нескольких вариантах: минимизированы для производственного использования, не минифицированы для разработки, с шаблонами или без них. Все параметры описаны и могут быть загружены здесь. Следует отметить, что файлы -tpls содержат шаблоны, связанные с JavaScript, в то время как обычная версия не содержит связанные шаблоны. Для получения дополнительной информации, ознакомьтесь с FAQ здесь и README здесь.

Установка

Как только вы загрузите все файлы и включите их в свою страницу, вам просто нужно объявить зависимость от модуля ui.bootstrap:

angular.module('myModule', ['ui.bootstrap']);

Если вы используете UT Bootstrap в режиме CSP, например, в расширении убедитесь, что вы вручную ссылаетесь на ui-bootstrap-csp.css в своем HTML.

css

CSS оригинального Bootstrap зависит от пустых атрибутов href для стилизации курсоров в нескольких компонентов (пагинация, вкладки и т. Д.). Но в AngularJS добавление пустых атрибутов href в теги ссылок вызовет нежелательные изменения роутера. Вот почему нам нужно удалить пустые атрибуты href из шаблонов директив, и в результате стили не применяются правильно. Решение простое, просто добавьте следующий стиль в ваше приложение:

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

Чтение документации

Каждый из компонентов, представленных в ui-bootstrap, имеет документацию и интерактивные примеры Plunker.

Для директив мы перечисляем различные атрибуты с их значениями по умолчанию. Кроме того, на некоторых настройках есть значок:

  1. - К этому параметру применяется угловой слушатель $watch.
  2. B - Этот параметр является логическим. Это не нуждается в параметре.
  3. C - Этот параметр можно настроить глобально в постоянном сервисе *.
  4. $ - Этот параметр ожидает выражение вместо литеральной строки. Если выражение поддерживает boolean/integer, вы можете передать его напрямую.
  5. readonly - этот параметр доступен только для чтения.