Monday, 2 March 2015

Bootstrap 3 Tutorial - Overview

  • HTML5 doctype
           <!DOCTYPE html>
                 <html>
                      ....
               </html>

  • For Mobile Layout
        <meta name="viewport" content="width=device-width, initial-                    scale=1.0">

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

  • Responsive images
<img src="..." class="img-responsive" alt="Responsive image">

  • Normalize
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It is a small CSS file that provides better
cross-browser consistency in the default styling of HTML elements.

  • Container
.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

  • responsive
@media (min-width: 768px) {
 .container {
 width: 750px;
}

  •  Typography
  • Headings
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

  • sub heading
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>

  • Lead Body
To add some emphasis to a paragraph, add class="lead". 
<p class="lead"> </p>

  • Emphasis









  • Abbreviations




  • Addresses




  • Blockquotes




  • Lists




  • <code> tag

  1. The first is the <code> tag. If you are going to be displaying code inline, you should use the <code> tag.
  2. Second is the <pre> tag. If the code needs to be displayed as a standalone block element or if it has multiple lines, then you should use the <pre> tag.


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)