Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a...
-
Upload
janice-johns -
Category
Documents
-
view
232 -
download
0
Transcript of Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a...
![Page 1: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/1.jpg)
Bootstrap
by:-Vignesh Dhamodaran
![Page 2: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/2.jpg)
What is Bootstrap?
• Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.
• Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
• Front end Design framework.• Free and Open Source• The bootstrap framework aims to ease web
development.
![Page 3: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/3.jpg)
Why Bootstrap?
• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.
• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework.
• Browser compatibility: Bootstrap is compatible with all modern browsers.
• It assumes you have no designing knowledge and all you want to do is write some HTML as per the Bootstrap specifications.
![Page 4: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/4.jpg)
Getting Started
• Make Sure it uses HTML5 doctype• Include:– bootstrap.min.css– bootstrap.min.js– jquery.min.js
• We can either download these files locally or use CDN Network.
![Page 5: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/5.jpg)
Bootstrap Grid
• It allows Maximum of 12 Grids• The grid system has 4 Classes– xs for phones.– sm for tablets.– md for desktops.– lg for large desktops.
• We can have– Equal columns, Unequal columns and Nested
columns.
![Page 6: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/6.jpg)
![Page 7: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/7.jpg)
Bootstrap Typography
• Default font size is 14px and line-height is 1.428 which is applied to <body>.
• Specific classes for – Alignment and – Casing– Color of text– Phone– Email– address.
![Page 8: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/8.jpg)
Bootstrap Button Style
• Default Button Styles:
• Dropdown Button Groups:
• Size
![Page 9: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/9.jpg)
Bootstrap Images
• 3 types of image classes
• Badges
![Page 10: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/10.jpg)
Bootstrap Navs and Navbars
• Tabs
• Pills
• Navbar
![Page 11: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/11.jpg)
Bootstrap Modal
• Modal is a plugin.• Flexible prompts used for some functionality.
![Page 12: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/12.jpg)
Bootstrap Carousel
• Image slideshow plugin
![Page 13: Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.](https://reader035.fdocuments.net/reader035/viewer/2022062322/5697c0251a28abf838cd5133/html5/thumbnails/13.jpg)
Links
• http://getbootstrap.com/examples/theme/• http://getbootstrap.com/examples/grid/• http://vignesh24.github.io/U-Integrate/