Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tables

Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tables

  • Login to see the comments

  • Be the first to like this

Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tables

  1. 1. WEB DESIGN
  2. 2. BOOTSTRAP Getting Started1 2 Tables3 5 Grid System2 4
  3. 3. Bootstrap CDN <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  4. 4. Getting started <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> </body> </html>
  5. 5. Bootstrap Grid xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops)
  6. 6. Bootstrap Grid <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div>
  7. 7. Table .table .table-striped .table-bordered .table-hover .table-condensed For tr: .active .success .info .warning .danger
  8. 8. THANK YOU

×