Blog

Twitter’s Bootstrap is the reigning king of responsive UI frameworks – you can easily go from desktop to tablet to smartphone, since Bootstrap components adapt to the changes in screen size quickly and efficiently. Mark Otto, one of the creators of Bootstrap, has said that the framework was originally created with “one core concept: pairing designers with developers.”

Since version 3.0, Bootstrap has maintained a mobile first design philosophy, emphasizing responsive design by default. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions.

To enrich the regular array of HTML elements, Bootstrap includes commonly used interface elements and advanced typographic capabilities. The elements include buttons with advanced features — including the grouping of buttons or buttons with a drop-down option, navigation lists, horizontal and vertical tabs, and labels. The components are implemented as CSS classes that must be applied to particular HTML elements in a page.

Bootstrap favors simple, responsive design and comes bundled with a default stylesheet that’s very good right out of the box, a number of useful jQuery plug-ins, and an icon set. It’s also important to note that Bootstrap is extremely extensible.

Bootstrap and Appery.io

In Appery.io’s App Builder, we support AngularJS and Bootstrap frameworks to enable the development of responsive web and mobile apps. For AngularJS, this includes data binding, controllers, directives, filters, and UI components such as the AngularJS Google Maps. For Bootstrap, you can use the Bootstrap Grid System, responsive utilities for showing and hiding content depending on screen size, and of course UI components like dropdowns, button groups, and alerts. (We also support the popular jQuery Mobile framework and are planning to also add support for the Ionic framework.)

We also offer UI Bootstrap, a set of Bootstrap-like components written specifically for AngularJS in pure AngularJS. This library contains many components, including:

• Alert: An AngularJS version of Bootstrap’s alert. This directive can be used to generate alerts from dynamic model data.
• Rating: This directive that will take care of visualizing a star rating bar.
• Collapse: An AngularJS version of Bootstrap’s collapse plug-in. Provides a simple way to hide and show an element with a CSS transition.
• Accordion: This directive builds on top of the collapse directive to provide a list of items. It has collapsible bodies that are collapsed or expanded by clicking on the item’s header.
• Carousel: This is similar to bootstrap’s image carousel. It also offers support for touchscreen devices (swiping).

Other components include paginations, buttons, popovers, progress bars, and tabs.

By using this library in conjunction with the Appery.io App Builder, you can quickly and easily build beautiful mobile and responsive web apps fast that look great across all device types and screen sizes, including phones, phablets, tablets, and desktops.