Bootstrap

Overview

Bird web application kit is fully based on Bootstrap framework. It includes almost all native Bootstrap components, grid system, original markup (except a few components where markup was slightly modified) and native classes. Current Bootstrap version is v4(Alpha).

About Bootstrap framework

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. The framework makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

Bootstrap components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more. Bird template includes (almost) all of them:

Component Description
Glyphicons Icon font. Includes over 250 glyphs in font format from the Glyphicon Halflings set
Dropdowns Toggleable, contextual menu for displaying lists of links
Button groups Group a series of buttons together on a single line with the button group
Button dropdowns Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup
Input groups Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>
Navs Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style
Navbar Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases
Breadcrumbs Indicate the current page's location within a navigational hierarchy
Pagination Provide pagination links for your site or app with the multi-page pagination component
Pager Simpler pagination component alternative
Badges Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more
Page header A simple shell for h1 - h5 to appropriately space out and segment sections of content on a page. It can utilize the heading's default small element, as well as most other components (with additional styles)
Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages
Progress bars Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars
Media object Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content
Cards While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the card component
Responsive embed Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device. Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes

Bootstrap plugins

Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.:

Component Description
Transitions Transition.js is a basic helper for transitionEnd events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions
Modals Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults
Dropdowns Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills
Togglable tabs Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported
Tooltips Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage. Tooltips with zero-length titles are never displayed
Popovers Add small overlays of content, like those on the iPad, to any element for housing secondary information. Popovers whose both title and content are zero-length are never displayed
Alert messages Add dismiss functionality to all alert messages with this plugin. When using a .close button, it must be the first child of the .alert-dismissible and no text content may come before it in the markup
Buttons Do more with buttons. Control button states or create groups of buttons for more components like toolbars
Collapse Flexible plugin that utilizes a handful of classes for easy toggle behavior

HTML5 doctype

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.


<!-- Markup -->
<!DOCTYPE html>
<html lang="en">
...
</html>

Basic usage

To get started, include 6 CSS files: native bootstrap styling and Bird template overrides. File ordering matters:


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="lib/css/bootstrap.css">
<link rel="stylesheet" href="lib/css/animate.min.css">

<!-- Bird overrides -->
<link rel="stylesheet" href="lib/css/main.css">

Then include jQuery library and Bootstrap itself. File ordering matters:


<!-- jQuery library -->
<script src="lib/js/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="lib/js/bootstrap.js"></script>

<!-- Bird overrides -->
<script src="lib/js/core/app/core.js"></script>

Now you are up and running. All template files MUST contain these 9 files in your page's <head> element. All other files are optional, except app.js, which contains template's JS base. Also keep correct load ordering: first - dependencies, then - components. You can place JS paths either in <head> or before <body> closing tag, it's up to you. I prefer 1st option.