Stop Reinventing the Wheel - Faster Web Development with Bootstrap Framework
Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for...
-
Upload
blake-sharp -
Category
Documents
-
view
258 -
download
0
Transcript of Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for...
![Page 1: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/1.jpg)
Introduction to Bootstrap
![Page 2: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/2.jpg)
Bootstrap is Front-end FrameworkHTML, CSS, and JS framework for
developing responsive, mobile first projects on the web.
www.getbootstrap.com
![Page 3: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/3.jpg)
Bootstrap is Ready-to-use Web ElementsHTML / CSS elements for button, form, table,
image, navbar, label, progress bar, alert etc.
![Page 4: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/4.jpg)
![Page 5: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/5.jpg)
EXAMPLESof Bootstrap Elements
![Page 6: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/6.jpg)
more EXAMPLESof Bootstrap Elements
![Page 8: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/8.jpg)
Why Bootstrap?
● Save 100+ hours of coding● Easy to use web elements● Quick responsive prototype / website● Great documentation
![Page 9: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/9.jpg)
Bootstrap Package
● CSS - bootstrap.css● JS - bootstrap.js● Icon Fonts - glyphicons-halflings-regular.ttf
![Page 10: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/10.jpg)
What is Grid in web design?
![Page 11: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/11.jpg)
12 Grid
What is Grid in web design?1 2 3 4 5 6 7 8 9 10 11 12
![Page 12: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/12.jpg)
4 Grids x 3 Columns= 12 Grids
What is Grid in web design?
4 Grid 4 Grid 4 Grid
![Page 13: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/13.jpg)
Bootstrap Grid
12 Responsive Grid
![Page 15: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/15.jpg)
4 Sizes of Bootstrap Grid
Size Name Screen Size CSS Class
Extra Small Devices (Phone)
0 - 767 px .col-xs-1 ~ .col-xs-12
Small Devices (Tablet) 768 - 991 px .col-sm-1 ~ .col-sm-12
Medium Devices (Desktop)
992 - 1219 px .col-md-1 ~ .col-md-12
Large Devices (Large screen desktop)
1200px + .col-lg-1 ~ .col-lg-12
![Page 17: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/17.jpg)
Bootstrap Grid Example
4 grids x 3 Columns
![Page 18: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/18.jpg)
Bootstrap Grid Example
![Page 19: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/19.jpg)
Bootstrap Grid Example
![Page 20: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/20.jpg)
Bootstrap Grid Example 2
How many grids in each box?
![Page 21: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/21.jpg)
Bootstrap Grid Example 2
6 grids x 2 Columns
![Page 22: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/22.jpg)
Bootstrap Grid Example 2
![Page 23: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/23.jpg)
Bootstrap Grid Example 2
![Page 24: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/24.jpg)
Bootstrap Row
1 Row = 12 Grids
![Page 25: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/25.jpg)
Bootstrap Row
3 Rows
![Page 26: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/26.jpg)
Bootstrap Row Example
![Page 27: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/27.jpg)
Bootstrap Row Example
![Page 28: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/28.jpg)
Bootstrap Responsive Grid
Columns will stack when responsive
![Page 29: Introduction to Bootstrap. Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. .](https://reader036.fdocuments.us/reader036/viewer/2022081501/5697c0141a28abf838ccd02f/html5/thumbnails/29.jpg)
Bootstrap Responsive Grid
1 2 3 1
2
3
Desktop Mobile
Columns stack on mobile