Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Twitter Bootstrap

No description

Hemanand Thanikachalam

on 3 September 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Twitter Bootstrap

Twitter Bootstrap
How to Download and Install Bootstrap
Twitter Bootstrap is a free set of tools for building web applications. It comprises template files, as well as optional JavaScript extensions. Developed by a couple of engineers at Twitter (hence the name. Since its first public (open source) release in 2011 it has found huge popularity amongst web developers for its ease of use and feature set, and in 2012 was the most popular project on GitHub. Its advocates praise Bootstrap’s ability to build usable apps, with clean code, quickly and easily.
Cascading Style

• The most popular front-end framework for developing responsive, mobile first projects on the web.

• Download the bootstrap files from http://getbootstrap.com/

• Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:

Including Bootstrap within the Template
jQuery needs to be included before including bootstrap in the template.

We can include bootstrap from our local or from the CDN provided by MaxCDN.

Basic HTML Template

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.

<!DOCTYPE html>
<html lang="en">

To ensure proper rendering and touch zooming, add the viewport meta tag to your

<meta name="viewport" content="width=device-width, initial-scale=1">

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the view port meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

HTML 5 doctype

• Set background-color: #fff; on the body

• Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic

• Set the global link color via @link-color and apply link underlines only on :hover

Bootstrap sets basic global display, typography, and link styles. Specifically, we:
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
Preserve useful browser defaults rather than erasing them.
Normalize styles for a wide range of HTML elements.
Correct bugs and common browser inconsistencies.
Improve usability with subtle improvements.
Explain the code using comments and detailed documentation.


<div class="container-fluid">
<div class="row">

Easily centre a page's contents by wrapping its contents in a container. Containers set width at various media query breakpoints to match our grid system.

Note that, due to padding and fixed widths, containers are not nestable
by default

<div class="container">
Fluid container
Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid
Grid systems are used for creating page layouts through a series of rows and
columns that house your content. Here's how the Bootstrap grid system works:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Striped rows
Bordered table
Hover rows
Condensed table
Bordered Table
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
Hover rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
Add .table-bordered for borders on all sides of the table and cells.
Condensed Table
Add .table-condensed to make tables more compact by cutting cell padding in half.
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Basic example
Types of Forms
In-line Form
Horizontal Form
Inline Form
Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within view ports that are at least 768px wide.
Horizontal Form
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
Inline Check-boxes
Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
Responsive Images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
Image shapes
Add classes to an <img> element to easily style images in any project.
Helper Classes
Contextual colors
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
Helper Classes
Contextual Backgrounds
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
Button Groups
Input Groups
Navs, Tabs & Pills
Progress Bars
Togglable Tabs

How to use:
For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.
<span class="glyphicon glyphicon-search"></span>
Button Groups
Wrap a series of buttons with .btn in .btn-group.
Button Dropdowns
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
Single button dropdowns
Turn a button into a dropdown toggle with some basic markup changes.
Single button dropdowns - Example
Input Groups
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.

Navs, Tabs & Pills
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.
Note the .nav-tabs class requires the .nav base class.
Navs, Tabs & Pills
Take that same HTML, but use .nav-pills instead:
Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
Default pagination
Progress Bars
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
With label:
Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
Panel with heading
Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Togglable Tabs
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.
Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost.
Form - Example
Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through :before and content.
Full transcript