+
+ Angular 2
+
+ For Angular 2 support, check out
+
+ ng-bootstrap
+ , created by the UI Bootstrap team.
+
Dependencies
This repository contains a set of native AngularJS directives based on
- Twitter Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's
+ Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's
JavaScript is required. The only required dependencies are:
- - AngularJS (minimal version 1.0.8 or 1.1.5)
- - Bootstrap CSS (version 2.3)
+ - AngularJS (requires AngularJS 1.4.x or higher, tested with <%= ngversion %>).
+ 0.14.3 is the last version of this library that supports AngularJS 1.3.x and
+ 0.12.0 is the last version that supports AngularJS 1.2.x.
+ - Angular-animate (the version should match with your angular's, tested with <%= ngversion %>) if you plan in using animations, you need to load angular-animate as well.
+ - Angular-touch (the version should match with your angular's, tested with <%= ngversion %>) if you plan in using swipe actions, you need to load angular-touch as well.
+ - Bootstrap CSS (tested with version <%= bsversion %>).
+ This version of the library (<%= pkg.version%>) works only with Bootstrap CSS in version 3.x.
+ 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
+
Files to download
Build files for all directives are distributed in several flavours: minified for production usage, un-minified
for development, with or without templates. All the options are described and can be
- downloaded from here.
+ downloaded from here. It should be noted that the -tpls files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ here and the README here.
Alternativelly, if you are only interested in a subset of directives, you can
create your own build.
- Whichever method you choose the good news that the overall size of a download is very small:
- <20kB for all directives (~5kB with gzip compression!)
+ Whichever method you choose the good news that the overall size of a download is fairly small:
+ 122K minified for all directives with templates and 98K without (~31kB with gzip
+ compression, with templates, and 28K gzipped without)
Installation
As soon as you've got all the files downloaded and included in your page you just need to declare
a dependency on the ui.bootstrap module:
- angular.module('myModule', ['ui.bootstrap']);
+
angular.module('myModule', ['ui.bootstrap']);
+ If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the ui-bootstrap-csp.css in your HTML manually.
You can fork one of the plunkers from this page to see a working example of what is described here.
+ Migration to prefixes
+ Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier,
+ check our migration guide.
CSS
Original Bootstrap's CSS depends on empty href attributes to style cursors for several components (pagination, tabs etc.).
- But in AngularJS adding empty href attributes to link tags will cause unwanted route changes.
- This is why we need to remove empty href attributes from directive templates and as a result
- styling is not applied correctly. The remedy is simple, just add the following styling to your application:
-
- .nav, .pagination, .carousel a {
- cursor: pointer;
- }
-
+ But in AngularJS adding empty href attributes to link tags will cause unwanted route changes. This is why we need to remove empty href attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application:
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
-