Monday, February 12, 2018

Bootstrap basic tutorial




Bootstrap (can be downloaded from https://getbootstrap.com/)

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS

A) Container 
  <div class="container"></div>
 or
 <div class="container-fluid"></div>
    The .container class: responsive fixed width container
    The .container-fluid class: full width container over entire width of the viewport. This should be used for the application mainly for desktop.

B) Bootstrap Grid System
The # sign below is the place-holder for the number of columns.
Bootstrap's grid system allows up to 12 columns across the page.
.col-sm-12 for full screen width while .col-sm-6 for half screen width
column class: .col-xs-#  (Extra small, for phone screen less than 768px)   
column class: .col-sm-#  (small, for  tablets  screen  >= 768  px)
column class: .col-md-#  (Medium, for  small laptops  screen  >= 991 px)   
column class: .col-lg-#  (Large, for  laptop screen  >=1200 px)
Example
 <div class="row">
  <div class="col-sm-4">4 column width for not small device</div>
  <div class="col-sm-8">8 column width for not small device</div>
</div> 

For small device such as phone and tablet for above example, the columns will automatically stack.

C) Table
1) .table-striped   adds zebra-stripes to each row in a table, Example of table in Bootstrap
<div class="container-fluid">
  <h2>Striped Rows</h2>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>header column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>body column</td>
      </tr>
    </tbody>
  </table>
</div>

2)  .table-bordered:  adds borders on all sides of the table and cells:
3) .table-hover class adds a grey background hover effect
4)  .table-condensed makes a table more compact
5) .table-responsive  creates a responsive table.
6)  contextual classes: 
.active     .success     .info  .warning  .danger    

D) Alert
Example
<div class="alert alert-success"> </div>
<div class="alert alert-info"></div>
<div class="alert alert-warning"></div>
<div class="alert alert-danger"></div>    


More about Bootstrap tutorial
https://www.w3schools.com/bootstrap/



No comments:

Post a Comment