Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tables
Download as PPTX, PDF0 likes136 views
This document provides an introduction to using Bootstrap for web design. It discusses including the Bootstrap CSS and JavaScript through a CDN, and provides a basic HTML template for getting started. It also summarizes Bootstrap's grid system for responsive design, and explains how to create tables with additional Bootstrap classes.
1 of 8
Downloaded 15 times
More Related Content
What's hot (18)
Ad
Similar to Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tables (20)
Ad
More from Al-Mamun Sarkar (20)
Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tables
- 1. WEB DESIGN
- 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. 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. Bootstrap Grid xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops)
- 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>
- 8. THANK YOU