-
-
Notifications
You must be signed in to change notification settings - Fork 180
Acknowledgements
The Native JavaScript for Bootstrap version 4 is identical with the version 3 in terms of usage, options, methods and original events, except that version 4 does not include the Affix component, and some Button related functionality.
Please note that this library does not require the Popper script for Dropdown, Popover and Tooltip components like the original script does and the additional features from Popper have been partially implemented into our library. The functionality was added to both V3 and V4.
The demo page for BSN V3 provides documentation for a general guidance on how to use the library and applies to both versions, except the missing functionality mentioned above.
That's right, if you include the library in your site <body> all components including Tooltip and Popover are initialized on load as long as you use properly their DATA API attributes, but Button is an exception with its state/text switching function that needs to be invoked manually, like the example shown in the demo page.
The library uses a set of utilities required by the components, like a selector utility, CSS class checking and manipulation or event handling. This is why you cannot use the files in the /lib folder right away.
Starting with 2.0.20 version, the library allows you to link it in your site <head> without any additional scripting required. It now exposes an object with various information and utilities you can use, so you might want to check this out.
Starting with 2.0.18 version, the library allows you to link it in your site <head>, but will not automatically initialize components with DATA API, you will have to initialize manually.
For performance reasons, the library should be linked at the end of your site's <body>, this is to avoid low page load speed and other problems, along with other benefits.
I personally never found any use of them and/or Bootstrap developers decided to remove them. For instance Tooltip and Popover don't expose a destroy() public method or a show option for Modal due to the flexibility nature of native JavaScript, but that's fully explained for each component.
How about having a paused class for Carousel when in paused state, or an option to keep a Dropdown open as if you would have a form inside, or Tooltip and Popover automatic (re)positioning without any required option and more? Our Tab component can do a nice transition when tab contents have different heights, and many more you can learn about these improvements for each component.
Additionally, all elements that the components target for initialization will store the initialization object, giving you full access even for instances when the DATA API was used. EG: myModalTrigger.Modal.
If your application delivers content dynamically, you surely need to check this out.
This is probably the most important part to be aware of. While the original events like show.bs.modal are inline with the original components exactly, some method names might not be the same with the original library.
The dismiss Popover close button would require some adjustments for perfect looks. Copy this code in your application CSS files.
/* styles the close button for the dismissible popovers */
.popover .close { position: absolute; top: 7px; right: 10px; }
Previous versions of our library required some adjustments for some components, but since the original Bootstrap changed to support CSS3 transitions, we also make use of them for Collapse and Tab.
They both make legacy browsers unusable. To target specific browsers, there are plenty of options. With this library you only need to make sure your layout looks consistent in legacy browsers, so you might consider browser specific classes to your HTML document, as show here. You don't have to worry about the JavaScript part.
About that respond.js thing, here is a 2k file of CSS to make your site's layout look normal on IE8. CSS is still faster and better in ALL cases, while the JavaScript will heavily load the browser's resize event, making it unresponsive and unusable. Open up the demo page on IE8 and let it fly.
Was this helpful or you want to report an error?