Sunday, October 18, 2015

Bootstrap - concepts

About bootstrap:

  • Uses HTML, CSS and Javascript
  • front-end framework
  • Easy and faster to use and develop 
  • Responsive design 
  • Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework 
  • Browser compatible 


Bootstrap concepts:

  1. Application setup with bootstrap 
    1. Reference to bootstrap
      1. Download - http://getbootstrap.com
      2. CDN - 
        1. CSS - http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
        2. JavaScript - http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
    2.  <!DOCTYPE html> at the beginning of the html page
    3. Mobile first settings - '' 
      1. Width is the width application should take to display
      2. initial-scale - initial zoom of the page
    4. Container - bootstrap requires a containing element to wrap site contents. There are two container classes to choose from - 
      1. .container - class provides a responsive fixed width container
      2. .container-fluid class provides a full width container
         
  2. Bootstrap Grid System - grid systems are used for creating page layouts through a series of rows and columns that host application content
    1. Rows must be placed within a .container class
    2. Content should be placed within the columns, and only columns may be the immediate children of rows
    3. Predefined grid classes
      1. .row
      2. .col-xs-<#> .col-sm-<#> .col-md-<#> .col-lg-<#> - # could be 1-12
    4. Multiple column classes can be used to support wide range of devices  
  3. Normalize - bootstrap uses Normalize to establish cross browser consistency in the default styling of HTML elements. Normalize.css is a modern, HTML5-ready alternative to CSS resets. CSS reset is to set styling to html elements to null thus avoiding cross-browser differences as much as possible
     
  4. Text emphasis - text-left text-center text-right text-muted text-primary text-success text-info text-warning text-danger.
     
  5. List - list-unstyled list-inline.
     
  6.  Bootstrap tables - 
    1. base table markup - table 
    2. Optional markups - table-striped table-bordered table-hover.(example) 
    3. Contextual classes - active success warning danger. (example)
    4. The .table-responsive class creates a responsive table. Put this class in a div which holds a table
       
  7. Bootstrap form layouts- 
    1. Types
      1. Vertical (default) form 
      2. In-line form 
      3. Horizontal form
    2. Rules to follow 
      1. improve accessibility - always use >form role="form"< 
      2. optimum spacing - wrap labels and form controls in >div class="form-group"< 
      3. class .form-control to all textual input, textarea and select elements
      4. For Horizontal form - 
        1. Add class .form-horizontal to the
          element 
        2. Add class .control-label to all
        3. Use grid classes to align labels and groups of form controls
    3. Example - includes all three type of forms  
  8. Alert - 
    1. Create an alert 
      1. Use .alert class in a div
      2. Followed by one of four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger.
    2. To add close functionality
      1. Add a link or button element in alert div
      2. add class="close" and data-dismiss="alert".
      3. Use × (×) HTML entity for close buttons
    3. Animated alert - add class fade in in alert div.
       
  9. Dropdown - (example)
    1. To create
      1. Mark a div with class="dropdown".
      2. Add a button or link to open dropdown menu with "class=dropdown-toggle" and data-target="dropdown".
      3. Add class="caret" in a span element to show dropdown arrow
      4. Add class="dropdown-menu".
    2. Dropdown divider - class="divider" in li element
    3. Dropdown header- class="dropdown-header" in li element
    4. Make it accessible to screen readers
      1. Add role="menu" and aria-labelledby="aName" in ul element
      2. Add role="presentation" in li element
      3. Add role="menuitem" in HTML element used inside li
  10. Panel
    1. Create with .panel class in a div
    2. need to define panel-header panel-body panel-footer
    3. Contextual classes - panel-default panel-success panel-info panel-danger panel-warning panel-primary.
    4. To group panels - panel-group.
  11. Collapsible
    1. On button or link
      1. Create a div with collapse class
      2. Create a link or button HTML element with data-toggle="collapse" and data-target="#div_id". This is to show/hide the collapsible div
    2. On a panel - (example)
      1. Add button or link in panel header (see above)
      2. Put panel body and footer in a div with classes panel-collapse collapse.
    3. Accordion - (example)
      1. Panel group div should be ided with a name
      2. Use the data-parent attribute to specify the div id - all collapsible elements under the specified parent will be closed when one of the collapsible item is shown
         
  12. Tabs
    1. Tabs are created with $gt;ul class="nav nav-tabs"<.
    2. Current page is marked using class="active" in li element
    3. Use dropdown creation structure in a li which needs to be displayed as dropdown and mark that li with class="dropdown". (example)
    4. dynamic tabs
      1. add the data-toggle="tab" attribute to each link
      2. add a .tab-pane class with a unique ID for every tab
      3. wrap them inside a div element with class .tab-content. 
    5. Pills - similar concept as tab. Most cases replacing tab with pill will work
  13. Modal - (example)
    1. Use a button or a link with attributes: 
      1. data-toggle="modal" opens the modal window 
      2. data-target="#id" points to the id of the modal
    2. Defining modal 
      1. The parent div of the modal must have an ID, will be used in data-target attribute and .modal class 
      2. The attribute role="dialog" to improve accessibility 
      3. The .modal-dialog class sets the proper width and margin of the modal. 
    3. Defining modal content
      1. A div with class="modal-content" 
      2. Add the modal's header .modal-header, body .modal-body, and footer .modal-footer. 
      3. To add close feature in header
        1. Add a button/link inside the header with data-dismiss="modal"
        2. Add .close class styles the close button
      4. Add .modal-title class styles the header with a proper line-height.
  14. Images - below classes need to use in img html element
    1. img-rounded img-thumnail img-circle img-responsive.
       
Note:
1. To learn about bootstrap elements which are not mentioned and know more in detail about the elements explained, see the resources
Resources:
1. http://www.w3schools.com/bootstrap/
2. http://www.tutorialspoint.com/bootstrap/
on
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)