Bootstrap - The old page

bootstrap

Introduction, Getting Started, and Basic bolerplate:

Twitter Bootstrap is a toolkit to develop web apps and sites fast. It includes basic CSS and HTML for creating Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts, Popovers etc.

For most cases, you just want to use Bootstrap (rather than extending or debugging something in Bootstrap), it is recommended that you start with the compiled and minified version. To get the compiled and minified versions of our CSS, JS, and images (no docs or original source files): http://twitter.github.io/bootstrap/assets/bootstrap.zip

To get the original files for all CSS and JavaScript, along with a local copy of the docs: https://github.com/twitter/bootstrap/zipball/master. You need to compile Bootstrap's LESS file into usable CSS. To do that, Bootstrap only officially support Recess, Twitter's CSS compiler built on top of less.js

After downloading the zip file, unzip it in your web root folder. This should create the css, js, and img folders in your web root folder.

You can include twitter Bootstrap in your HTML page in two ways. You can simply include:

    <link rel="stylesheet" href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css">

in the head section of your HTML file. Since Twitter Bootstrap supports LESS (CSS preprocessor for faster and easier web development), you can include the less css file and less JS file in your HTML page:

    <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

Basic boilerplate:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"/>
        <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <!-- Optionally enable responsive feature in IE8 -->
        <script src="js/respond.js"></script>
    </body>
</html>

Bootstraps provide some basic templates that we can explore: http://twitter.github.com/bootstrap/getting-started.html#examples

Bootstrap Grid System supports a 940px wide 12 column Grid as default and many variations of it.

Twitter Bootstrap is largely dependent on 12 grids. Suppose you want two large equal divisions inside the body of your index.html, you have to give a class of "span6" to each div element. This tells Bootstrap to make two equal divs that should span six grids on each side. Hopefully, this gives you an idea of how Bootstrap works. It has a set of predefined classes for each element. You have to give appropriate classes to each element when needed.

To wrap everything contained in our web site, we will create a container class that should be centered to the middle of the screen and also have a decent amount of padding on all sides. For this, Bootstrap has a class called "container", which we will use as our parent wrapper.

"navbar" should be the class given to the main div of the navigation:

<div class="navbar">
              <div class="navbar-inner">
                <div class="container">
                  <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Downloads</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                  </ul>
                </div>
              </div>
            </div>

The "hero-unit" class is supplied by Twitter Bootstrap for the marketing area:

<div class="hero-unit">
    <h1>Marketing stuff!</h1>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, 
        tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </p>
    <a href="#" class="btn btn-large btn-success">Get Started</a>
 </div>

The "btn" class makes any link look like a button. You can make buttons of different sizes by using btn-large, btn-small, btn-mini. To change the colors of the buttons, add classes like btn-success (green), btn-info (light blue), btn-warning (yellow), and btn-danger (red).

To create unequal columns:

<div class="row">
         <div class="span4">
             <p>Dummy Text</p>
         </div>
         <div class="span8">
             <p>Dummy Text</p>
         </div>
     </div>

The total must be equal to 12.

The span* classes are by default floated left. To force both columns to be present below all the contents above, we have to add an extra div with the class="row". This acts as the traditional <tr>.

Navigation list:

<ul class="nav nav-list">
    <li class="nav-header">What we are?</li>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Our Clients</a></li>
    <li><a href="#">Our Services</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    <li class="nav-header">Our Friend</li>
    <li><a href="#">Google</a></li>
    <li><a href="#">Yahoo!</a></li>
    <li><a href="#">Bing</a></li>
    <li><a href="#">Microsoft</a></li>
    <li><a href="#">Gadgetic World</a></li>
</ul>

You have to add "nav-list" class in addition to "nav" class which will make it look like a list. Adding class "nav-header" to any "li" element of "nav" class will make it look like a heading to the section of links.

To make an icon appears inside a button, we have to use the <i> tag and add appropriate image classes like icon-user, icon-star, icon-glass, etc:

<a href="#" class="btn"><i class="icon-user"></i> Our Clients</a>

To change the icon to white, use class icon-white along with icon-user and icon-star classes.

To make a paragraph stand out in the middle of long document, you can add class "lead" to it. It will make the fonts of that particular paragraph a bit bigger than the rest of the document.

The classes "text-left", "text-center", and "text-right" are used to align text just like "text-align: left", "text-align: center", and "text-align: right"

You can set the text color by using classes such as "muted" for grey, "text-warning" for red, "text-error" for deep maroon, "text-info" for light blue, and "text-success" for green.

The class "table" should be added to the <table> element: <table class="table">…</table>

Add classes like "img-rounded" for rounded corners, "img-circle" for circling the image, and "img-polaroid" to give box-shadow and border radius to the image.

Drop-down menu:

To add a drop down menu to the existing navigation bar as shown in the demo page, you have to add the following markup inside a “li” element.

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="icon-th-large"></i> Drop Down
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
    </ul>
</li>

For a dropdown, you have to wrap the parent element using the “dropdown” class and then use the default “a” markup for the caret and then nest another ul element with the items.

The navbar-fixed-top class make the navbar stick to the top of the web page.

The code that make the navbar responsive:

<div class="navbar navbar-fixed top">
    <div class="navbar-inner">
        <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-th-list"></span></a>
        <a href="#" class="brand">responsiveSite</a>
        <div class="nav-collapse collapse">
            <ul class="nav pull-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            </div>
        </div>
    </div>
</div>

The class "brand" gives the title a clean look, and is used for the website's name.

The nav items are wrapped inside an additional div with the classes nav-collapse which are used to make the menu appear like a stack when viewing in smaller browsers.

Just above the branding, you might be seeing an additional link with classes "btn btn-navbar" that wraps a span "icon-th-list". This link is visible only on the smaller screens with a list icon. Also, as we have used data-toggle=collapse that Bootstrap uses to hide/unhide the menu items in smaller windows. "data-target" is used to identify which menus to hide/unhide

Classes "nav nav-list" are used for vertical navigation list. A class "divider" is given to any "li" element to separate all the "li" elements present above and below it with a horizontal thin line.

The "nav-header" class is used to make the li element look like a sub section header.
http://www.w3resource.com/twitter-bootstrap/twitter-bootstrap.zip

Reset via Normalize:

With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css. While Bootstrap uses much of Normalize within its reset.less, Bootstrap removed some elements specifically for Bootstrap.

Grid:

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent:

    <div class="row">
        <div class="span9">
            Level 1 column
            <div class="row">
                <div class="span6">Level 2</div>
                <div class="span3">Level 2</div>
            </div>
        </div>
     </div>

Fluid Grid:

Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

    <div class="row-fluid">
        <div class="span4">...</div>
        <div class="span8">...</div>
    </div>

Fluid nesting:

Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.

    <div class="row-fluid">
        <div class="span12">
            Fluid 12
            <div class="row-fluid">
                <div class="span6">
                    Fluid 6
                    <div class="row-fluid">
                        <div class="span6">Fluid 6</div>
                        <div class="span6">Fluid 6</div>
                    </div>
                </div>
                <div class="span6">Fluid 6</div>
            </div>
        </div>
    </div>

Fixed layout:

Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

    <body>
        <div class="container">
            ...
        </div>
    </body>

Fluid layout:

Create a fluid, two-column page with <div class="container-fluid">

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">
                <!--Sidebar content-->
            </div>
            <div class="span10">
                <!--Body content-->
            </div>
        </div>
    </div>

Responsive design:

Bootstrap 2 doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed. Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

Bootstrap 3 is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files. To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>:

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

Responsive images:

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This implies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

Centering with container:

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

<div class="container">
    ...
</div>

The Grid System:

The default Grid System in Twitter Bootstrap is 940px wide and 12 column. It has four responsive variations for phone, tablet portrait, table landscape and small desktops, and large wide screen desktops.

Bootstrap CSS defines a class row which represent a row of a grid, and a set of classes (.span1, .span2, ….. , span12) which represent the cells of the grid. Class .row creates rows where as .span classes create columns.

So, if you want to create a single column grid, following is the syntax:

    <div class="row"/><br>
    <div class="span12"><br>
        inline elements like span, block level elements like p, div.<br>
    </div>

This column spans across all the of 12 columns of the Twitter Bootstrap Grid. For building a two column grid, following is the syntax:

    <div class="row"><br>
    <div class="span6"><br>
        inline elements like span, block level elements like p, div.<br>
    </div><br>
    <div class="span6"><br>
        inline elements like span, block level elements like p, div.<br>
    </div>

General syntax for creating grid is:

    <div class="row">
    <div class="spanx>
        inline elements like span, block level elements like p, div.
    </div>

If we want to create a two-columns grid, with the second column being 3 times wider than the first column, for example, if the width of the first column is x, and the width of the second is 3x, the total width of the grid would be 4x. To determine x, we take 12 and divide it by 4, so x is 3, and our HTML should be:

    <div class="row"><br>
    <div class="span9"><br>
        inline elements like span, block level elements like p, div.<br>
    </div><br>
    <div class="span3"><br>
        inline elements like span, block level elements like p, div.<br>
    </div>

or it could be the other way around, but the total must add up to 12. Think of each grid column as a unit of width, the x in spanx may represent the number of units of width, so a div with a class=span9 maybe 3 times wider than a div with class=span3.

Layout (fixed, fluid, etc):

In version 2.0 Twitter Bootstrap has added a responsive feature for phone, tablet portrait, tablet landscape, small desktops, and large wide screen desktops. You may make a layout responsive by adding bootstrap-responsive.css file (located under docs\assets\css) in to the page.

If you want it create a web page or app layout based on fixed number of pixels, go for this:

<body>
  <div class="container">
    ...
  </div>
</body>

Purpose of the Fixed Layout is to create a 940 pixel (default) wide layout for a web page or app.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Fixed Layout with Twitter Bootstrap version 2.0 from w3resource.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>

<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">

</div> <!-- /container -->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>

If you want to create a fluid layout which is not fixed, instead based on percentages to keep it flexible, you may go for this:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example of Fluid Layout with Twitter Bootstrap version 2.0 from w3resource.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example of Fluid Layout with Twitter Bootstrap version 2.0 from w3resource.com">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <link href="twitter-bootstrap-v2/docs/assets/css/example-fluid-layout.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </head>
  <body>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>

Responsive:

Responsive Web Design is an idea of providing the user with best viewing experience of a website across devices of various sizes. For example, if you are viewing a website on a computer monitor and then viewing it on a smart phone, whose size is smaller than a computer monitor, but you don't need to stumble much to feel the same experience as if you were viewing it on a computer screen.

For responsive web deign to work, you need to create a CSS which comprises of styles suitable for various devices sizes, or better to say for various device size ranges. Once the page is about to load on a specific device, using various font end web development techniques like Media Queries, the size of the viewport of the device is detected, then the styles specific to the device is loaded.

For this to work, you have to add the following line within head section of your webpage:

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

The view port meta tag overrides the default viewport and helps to load the style related to the specific viewport. The width property sets the width of the screen. It may contain a value like 320, denoting 320 pixels or may have the value 'device-width' which tells the browser to use the native resolution(or width you may say for simplicity) of the device. The initial-scale property is the initial scale of the viewport as a multiplier. So, when set to 1.0, it represents the native width of the device in question.

After the viewport meta tag, you must add the responsive CSS of Twitter Bootstrap like following:

    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Develop mobile-friendly layouts faster:

Twitter Bootstrap has several utility classes for developing mobile-friendly layouts faster. These classes are available on 'responsive.less':

  • .visible-phone: visible on Phones of width 767px and below, hidden on Tablets of 979px to 768px and also hidden on Desktops, which is default.
  • .visible-tablet: hidden on Phones of width 767px and below, visible on Tablets of 979px to 768px and hidden on Desktops, which is default.
  • .visible-desktop: hidden on Phones of width 767px and below, hidden on Tablets of 979px to 768px and visible on Desktops, which is default.
  • .hidden-phone: hidden on Phones of width 767px and below, visible on Tablets of 979px to 768px and visible on Desktops, which is default.
  • .hidden-tablet: visible on Phones of width 767px and below, hidden on Tablets of 979px to 768px and visible on Desktops, which is default.
  • .hidden-desktop: visible on Phones of width 767px and below, visible on Tablets of 979px to 768px and hidden on Desktops, which is default.

They can be found in responsive.less.

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

Typography and other styling:

To create headings, paragraphs, lists and other elements. Look at the content of bootstrap.css

Make a paragraph stand out by adding .lead:

<p class="lead">...</p>

The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

Emphasis:

Make use of HTML's default emphasis tags with lightweight styles:

    <small>This line of text is meant to be treated as fine print.</small>

Bold:

For emphasizing a snippet of text with a heavier font-weight:

    <strong>rendered as bold text</strong>

Italic:

For emphasizing a snippet of text with italics:

    <em>rendered as italicized text</em>

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Alignment classes:

    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>

Emphasis classes:

These are for conveying warning, error, etc:

    <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Tables:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Example of Table with twitter bootstrap</title> 
<meta name="description" content="Creating a table with Twitter Bootstrap. Learn how to use Twitter Bootstrap toolkit to create Tables with examples.">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<table class="table">
        <thead>
          <tr>
            <th>Student-ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>001</td>
            <td>Rammohan </td>
            <td>Reddy</td>
            <td>A+</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Smita</td>
            <td>Pallod</td>
            <td>A</td>
          </tr>
          <tr>
            <td>003</td>
            <td>Rabindranath</td>
            <td>Sen</td>
            <td>A+</td>
          </tr>
        </tbody>
      </table>
</body>
</html>

Notice the use of thead, th, tbody and the class=table.

Zebra Table with Twitter Bootstrap:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Example of Zebra Table with twitter bootstrap</title> 
<meta name="description" content="Creating a Zebra table with Twitter Bootstrap. Learn with example of a Zebra Table with Twitter Bootstrap.">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<table class="table table-striped">
        <thead>
          <tr>
            <th>Student-ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>001</td>
            <td>Rammohan </td>
            <td>Reddy</td>
            <td>A+</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Smita</td>
            <td>Pallod</td>
            <td>A</td>
          </tr>
          <tr>
            <td>003</td>
            <td>Rabindranath</td>
            <td>Sen</td>
            <td>A+</td>
          </tr>
        </tbody>
      </table>
</body>
</html>

This table uses zebra-striped CSS class defined in bootstrap.css file. The class is .table-striped. This is in addition to the regular class="table". We do not have to modify the tr or the td elements.

This use the :nth-child CSS selector, which are not available in IE7-8.

To add borders and rounded corners to the table, and the .table-bordered class to the table element.

To enable a hover state on table rows, add the table-hover class to the table element.

To makes tables more compact by cutting cell padding in half, add the .table-condensed class to the table element.

We can add the optional classes (success, error, warning, and info) to the individual rows to indicate success, error, warning, information.

Forms:

Twitter Bootstrap has styles for form controls like input, textarea, and select, it has support for lists and checkbox, has styles for disabled form controls and has included states like error, warning, and success for each form controls.

Twitter Bootstrap provides you with four types of form layouts:

  • Vertical (which is the default form layout)
  • Search
  • Inline
  • Horizontal
    <form>
        <fieldset>
            <legend>Legend</legend>
            <label>Label name</label>
            <input type="text" placeholder="Type something…">
            <span class="help-block">Example block-level help text here.</span>
            <label class="checkbox">
                <input type="checkbox"> Check me out
            </label>
            <button type="submit" class="btn">Submit</button>
        </fieldset>
    </form>

Notice that the label element does not contain the for attribute, and it includes the input element.

Vertical forms:

Style for the default Twitter Bootstrap Form layout (vertical form) is defined by the .form-vertical class of the bootstrap.css. Because this is the default form layout, you don't need to specify .form-vertical class while creating a form with default layout. The following example shows a form created with Twitter Bootstrap Version2.0 default form layout.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well">
  <label>Label name</label>
  <input type="text" class="span3" placeholder="Type something…">
  <span class="help-inline">Associated help text!</span>
  <label class="checkbox">
    <input type="checkbox"> Check me out
  </label>
  <button type="submit" class="btn">Submit</button>
</form>
</body>
</html>

The .well class is used to create the container of the forms (but it has other usage too). This class is found in bootstrap.css. For this layout, inputs are block level. View the above example: http://www.w3resource.com/twitter-bootstrap/example-form-with-twitter-bootstrap.html

Search form:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>
</body>
</html>

Notice the form-search, input-medium, search-query, and btn classes. **For this layout, inputs are block level. **

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

Inline forms:

**For this layout, inputs are inline level. **

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>
</body>
</html>

Notice the .form-inline class

Horizontal forms:

For this layout, inputs are inline.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 horizontal form layout example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 horizontal form layout example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Text input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="optionsCheckbox">Checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1">
                Option one is this and that—be sure to include why it's great
              </label>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="select01">Select list</label>
            <div class="controls">
              <select id="select01">
                <option>something</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="multiSelect">Multicon-select</label>
            <div class="controls">
              <select multiple="multiple" id="multiSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="fileInput">File input</label>
            <div class="controls">
              <input class="input-file" id="fileInput" type="file">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="textarea">Textarea</label>
            <div class="controls">
              <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
</form>
</body>
</html>

Notice the form-horizontal class. See the above example: http://www.w3resource.com/twitter-bootstrap/example-horizontal-form-with-twitter-bootstrap.html

Right align labels and float them to the left to make them appear on the same line as controls.

  • Add .form-horizontal to the form
  • Wrap labels and controls in .control-group
  • Add .control-label to the label
  • Wrap any associated controls in .controls for proper alignment
    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="inputEmail">Email</label>
            <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputPassword">Password</label>
            <div class="controls">
                <input type="password" id="inputPassword" placeholder="Password">
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox"> Remember me
                </label>
                <button type="submit" class="btn">Sign in</button>
            </div>
        </div>
    </form>

Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

What are the differences between vertical form and horizontal form?

  • The position of the labels for the fields. In vertical forms, the labels for the form fields are displayed above the form fields. In horizontal forms, the labels for the form fields are displayed on the side of the form fields.
  • The position of the error validation message

Prepended and appended inputs:

Add text or buttons before or after any text-based input:

    <div class="input-prepend">
        <span class="add-on">@</span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username">
    </div>
    <div class="input-append">
        <input class="span2" id="appendedInput" type="text">
        <span class="add-on">.00</span>
    </div>

Combined (using both prepend and append):

Use both classes and two instances of .add-on to prepend and append an input.

    <div class="input-prepend input-append">
        <span class="add-on">$</span>
        <input class="span2" id="appendedPrependedInput" type="text">
        <span class="add-on">.00</span>
    </div>

Buttons instead of text:

Instead of a <span> with text, use a .btn to attach a button (or two) to an input:

    <div class="input-append">
        <input class="span2" id="appendedInputButtons" type="text">
        <button class="btn" type="button">Search</button>
        <button class="btn" type="button">Options</button>
    </div>

Buttons with dropdown:

    <div class="input-append">
        <input class="span2" id="appendedDropdownButton" type="text">
        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                Action
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                 ...
            </ul>
        </div>
    </div>

States:

Bootstrap applies special styles to form fields that are focused, disabled, or read-only.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 horizontal form browser status example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 horizontal form browser status example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Focused Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="input01">Read only Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01" readonly="true">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="input01">Disabled Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01" disabled>
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="optionsCheckbox" reado>Checkbox (disabled)</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1" disabled>
                Option one is this and that—be sure to include why it's great
              </label>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary" disabled>Save changes (disabled button)</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
</form>
</body>
</html>

Styles for Form Validation:

Bootstrap has styles for errors, warnings and success while validating a form.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 form error example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 form error example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Form validation error, warning and success</legend>
          <div class="control-group error">
            <label class="control-label" for="inputError">Input with error</label>
            <div class="controls">
              <input type="text" id="inputError">
              <span class="help-inline">Please correct the error</span>
            </div>
          </div>
          <div class="control-group warning">
            <label class="control-label" for="inputWarning">Input with warning</label>
            <div class="controls">
              <input type="text" id="inputWarning">
              <span class="help-inline">Something may have gone wrong</span>
            </div>
          </div>
          <div class="control-group success">
            <label class="control-label" for="inputSuccess">Input with success</label>
            <div class="controls">
              <input type="text" id="inputSuccess">
              <span class="help-inline">Successfully entered</span>
            </div>
          </div>
          <div class="control-group success">
            <label class="control-label" for="selectError">Select with success</label>
            <div class="controls">
              <select id="selectError">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <span class="help-inline">Successfully selected</span>
            </div>
          </div>
        </fieldset>
</form>
</body>
</html>

View the above example: http://www.w3resource.com/twitter-bootstrap/example-form-error-twitter-bootstrap.html

Navigations:

Basic tabs:

Two CSS classes .nav and .nav-tabs are used to create basic tab based navigation.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet"> 
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="span6">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#">Home</a> </li> 
                    <li><a href="#">Tutorials</a></li>
                    <li><a href="#">Practice Editor </a></li> 
                    <li><a href="#">Gallery</a></li> 
                    <li><a href="#">Contact</a></li> 
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Basic pills:

Pills are like tabs, except that each tab control (handle) looks like a capsule or a medicine pill. Instead of using .nav-tabs class, .use the nav-pills class.

Stacked or vertical tabs:

To create stacked or vertical tab based navigation, you have to add .nav-stacked in addition to the .nav and .nav-tabs classes.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet"> 
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="span8">
                <ul class="nav nav-tabs nav-stacked">
                    <li class="active"><a href="#">Home</a></li>   
                    <li><a href="#">Tutorials</a></li>
                    <li><a href="#">Practice Editor </a></li> 
                    <li><a href="#">Gallery</a></li> 
                    <li><a href="#">Contact</a></li> 
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Stacked or vertical pills:

To create a stacked or vertical pills based navigation, use .nav-stacked class in addition to the .nav and .nav-tabs classes.

Tab-based Dropdowns:

There are four CSS classes - .dropdown, .dropdown-toggle, .dropdown-menu and .caret which you need in addition to the .nav and .nav-tabs

<!DOCTYPE html> 
  <html lang="en"> 
  <head> 
  <meta charset="utf-8"> 
  <title>Twitter Bootstrap tab based dropdown Navigation Example</title> 
  <meta name="description" content="Twitter Bootstrap tab based dropdown Navigation Example">
  <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
  <style type="text/css"> 
  .container {
  margin-top: 200px;
  }
  </style>
  </head>
  <body>
  <div class="container">
  <div class="row">
  <div class="span6">
  <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Twitter Bootstrap</a></li>
            <li><a href="#">Google Plus API</a></li>
            <li><a href="#">HTML5</a></li>
            <li class="divider"></li>
            <li><a href="#">Examples</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
          <ul class="dropdown-menu bottom-up pull-right">
            <li><a href="#">PHP</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">PostgreSQL</a></li>
            <li class="divider"></li>
            <li><a href="#">Live Demos</a></li>
          </ul>
        </li>
      </ul>
</li>
</ul>
</div>
</div>
</div>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>

data-toggle is a Twitter Bootstrap specific attribute. Setting it's value to "dropdown" creates a dropdown navigation.

View this example: http://www.w3resource.com/twitter-bootstrap/Twitter-Bootstrap-tab-based-dropdown-Navigation-Example.html

Pills-based Dropdowns:

Pills-based dropdowns are similar to that of tab-based dropdowns. You need to replace .nav-tabs with .nav-pills class

Tab-able navigations:

You may create tabbable navigation with Twitter Bootstrap's lightweight Jquery Plugin and simple markup. You need a CSS class called "tabbable" which works as a wrapping division. Within that you add "nav" and "nav-tabs" classes to a "ul" element. Within that, using 'data-toggle="tab"' (applied to the associated anchor element) you create tabbable sections. And then, with CSS class "tab-content" you create a divs and that div may hold several divs with CSS class "tab-pane" which holds the actual content.

You need two JS files included to make the Tabbable Nav work - jquery.js and bootstrap-tab.js; both are located with docs/assets/js folder.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Example tabbsable nav with Twitter Bootstrap</title> 
<meta name="description" content="Example tabable nav with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
<li class=""><a href="#2" data-toggle="tab">Section 2</a></li>
<li class=""><a href="#3" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>You are watching section 1.</p>
</div>
<div class="tab-pane" id="2">
<p>You are watching Section 2.</p>
</div>
<div class="tab-pane" id="3">
<p>You are watching Section 3.</p>
</div>
</div>
</div>
</div>
</div>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
</body>
</html>

Breadcrumbs:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap breadcrumbs Example</title> 
<meta name="description" content="Twitter Bootstrap breadcrumbs Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="breadcrumb">
  <li>
    <a href="#">Home</a> <span class="divider">></span>
  </li>
  <li>
    <a href="#">Tutorials</a> <span class="divider">></span>
  </li>
  <li class="active">HTML5</li>
</ul>
</div>
</div>
</div>
</body>
</html>

View this example: http://www.w3resource.com/twitter-bootstrap/breadcrumbs-example.html

Multicon-page pagination:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Multicon-page pagination example</title> 
<meta name="description" content="Twitter Bootstrap Multicon-page pagination example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active">
      <a href="#">1</a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>
</body>
</html>

View this example: http://www.w3resource.com/twitter-bootstrap/Multicon-page-pagination-example.html

Pager:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with next and previous example</title> 
<meta name="description" content="Twitter Bootstrap pager with next and previous example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
  <ul class="pager">
  <li>
    <a href="#">Previous</a>
  </li>
  <li>
    <a href="#">Next</a>
  </li>
</ul>
</body>
</html>

View this example: http://www.w3resource.com/twitter-bootstrap/pager-example-next-previous.html

Notifications:

Alerts:

Using CSS class "alert", you may create a simple alert message. You may add an optional close icon to it. When you click the close icon in the alert box, it is closed. And for this interactivity, you have to add two JavaScript files jquery.js and alert.js.

With two more CSS classes "alert-block " and "alert-heading", you get more control over text to rendered and you may add a text header preceding the alert text.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Extending simple alert with twitter bootstrap</title> 
<meta name="description" content="Extending simple alert with twitter bootstrap."> 
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
<style type="text/css">
body {
padding: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<div class="alert alert-block">
  <a class="close" data-dismiss="alert">×</a>
  <h4 class="alert-heading">Warning!</h4>
 What are you doing?! this will delete all files!!
</div>
</div>
</div>
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</html>

Bootstrap allows you to create alerts suitable to be rendered on error or danger, success and information. For error, you need CSS class "alert-error", for success you need "alert-success" class and for information you need class "alert-info".

LESS:

LESS is a CSS preprocessor which makes CSS dynamic. Obtain LESS from lesscss.org.

Once you downloaded the Twitter Bootstrap, unzip the file and all the files will be extracted to the desired folder. Less components of Bootstrap are placed under 'lib' directory. As of version Bootstrap v1.4.0, there are nine less files.

  • bootstrap.less: This is the main less file. This file imports several other less files. The file does not have any code though.
  • forms.less: This less file contains style for form layout, input types.
  • mixins.less: This file keeps CSS code which is reusable.
  • patterns.less: This Less file contains CSS code for repeatable user interface elements which may not be covered in base style placed under scaffolding Less file.
  • reset.less: This Less file contains CSS resets. This is an update of the Eric Meyer's CSS reset. Resets of some of the HTML elements like dfn, samp etc are exempted.
  • scaffolding.less: This file keeps the base style required for creating Grid System, Structural Layout, Page Templates.
  • tables.less: This Less file contains styles for creating Tables.
  • types.less: Look for typography related styles under this file. Styles for Headings, paragraphs, lists, code etc. are placed here.
  • variables.less: This Less file contains variables to customize look and feel of Bootstrap.

Include following in your HTML page:

<link rel="stylesheet/less" href="lib/bootstrap.less" media="all" />
<script src="js/less-1.1.5.min.js"></script>

Note that, less-1.1.5.min.js is not present within js folder out of the box. You have download and place it under js folder explicitly.

How to compile?

Simple include the less js file as shown above. If you have Less Command Line installed, run the following command to compile:

lessc ./lib/bootstrap.less > bootstrap.css

You may use —compress command if you want a compressed compilation.

Modals:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Modals Example</title> 
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>                
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">Call to action</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
</body>
</html>

Notice the modal, hide, fade, in, modal-header, close, modal-body, modal-footer, btn, btn-success, btn-primary, btn-large, and container classes, and the data-dismiss="modal" attribute. The modal dialog is hidden by default via style="display:none". When the Launch demo modal button is clicked, the button disappear, and the modal dialog is displayed. We do not have to write any JavaScript code. We only have to make sure that our HTML contains appropriate classes and attributes. All the JavaScript logic is already done inside bootstrap-modal.js. This kind of declarational / convention-ish programming style has its advantages and disadvantages.

The id="example" is assigned to a DIV, and is later used as value of the href attribute in the anchor tag.

The data-dismiss is a custom HTML5 data attribute. Here it is used to close the modal window.

The data-toggle="modal" is used to open the modal window.

The JavaScript:

You may use JavaScript to implement Twitter Bootstrap Modal Window. For that just call the modal() in your JavaScript. Your code then looks like this and you may include this just before your body tag ends:

 $(function ()  
{ $("#identifier").modal();  
});

Where identifier is a Jquery selector to identify the associated container element.

There are certain options which may be used with modal() to customize the look and feel of the Modal Window:

Options:

  • backdrop: is used to include a modal-backdrop element (shadow)
  • keyboard: is used to close the modal window when escape is pressed
  • show: modal window is showed when initialized
$("#example").modal({backdrop:false});
$("#example").modal({keyboard:false});

How to toggle a modal dialog?

$('#example').modal('toggle') ;

How to show a modal dialog?

$('#example').modal('show');

How to hide a modal dialog?

$('#example').modal('hide');

Events:

  • show: Immediately after show instance method is called, this method is called.
  • shown: When a modal has been made visible to users and CSS transition is complete, this event occurs.
  • hide: Immediately after the hide instance method has been called, this event is called.
  • hidden: When a modal has been made hidden from users and CSS transition is complete, this event occurs

References:

http://www.w3resource.com/twitter-bootstrap/tutorial.php
http://blattchat.com/2013/01/09/bootstrap-typeahead/
http://theled.co.uk/blog/archive/2012/06/22/twitter-bootstrap---its-not-all-roses/
http://necolas.github.com/normalize.css/
http://lucisferre.net/2012/06/27/whats-so-great-about-twitter-bootstrap/
https://coderwall.com/p/z3g6ow
http://alistapart.com/article/building-twitter-bootstrap
http://pmcneil.com/2012/11/customizing-twitter-bootstrap-column-structures-to-fit-various-screen-sizes/

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License