1. Introduction to Bootstrap Bootstrap සදහා හැදින්වීම
Module 6
Omal Perera |
@omalperera
Microsoft Virtual Academy

2. Bootstrap
Responsive, mobile web projects develop කිරීම සදහා වඩාත්ම ජනප්‍රිය front-end framework වලින් එකක්.
HTML
CSS
JavaScript

3. ඇයි අපි Bootstrap පාවිච්චි කරන්නේ ??
CSS ටිකක් අමාරු නිසා
Cross Browser
HTML basic elements වලට support කරන නිසා
Bootstrap 3.3.x තවත් වැඩ ලේසි කරන නිසා

4. Bootstrap Features Theme Support Responsive Grid Components
Pagination
Buttons
Modal
Visual Studio සමග support කරයි

5. Theme Support
Module 6
Microsoft Virtual Academy

8. Bootstrap - Theme 5 min bootstrap Grid system Screen sizes Columns
4 colums
Mobile first
Responsive images
Buttons
Glyphicons
Thumbnails
Facebook Login
Theming
bootswatch
Editor
Classes support
Scaffolding
Bootstrap styles
Browser support
Mobile friendly
Responsive
Bootstrap - Theme

9. Responsive Layout
Module 6
Microsoft Virtual Academy

10. Responsive Layout

11. Responsive Layout

12. Bootstrap - Responsive
5 min bootstrap
Grid system
Screen sizes
Columns
3 column
4 colums
Mobile first
Responsive images
Buttons
Glyphicons
Thumbnails
Facebook Login
Theming
bootswatch
Editor
Classes support
Scaffolding
Bootstrap styles
Browser support
Mobile friendly
Responsive
Bootstrap - Responsive

13. Grid System
Module 6
Microsoft Virtual Academy

14. Grid system Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)
Grid behavior
Horizontal at all times
Collapsed to start, horizontal above breakpoints
Container width
None (auto)
750px
970px
1170px
Class prefix
.col-xs-
.col-sm-
.col-md-
.col-lg-
# of columns 12
Column width
Auto
60px
78px
95px
Gutter width
30px (15px on each side of a column)

15. Grid system

16. Bootstrap - Grid 5 min bootstrap Grid system Screen sizes Columns
4 colums
Mobile first
Responsive images
Buttons
Glyphicons
Thumbnails
Facebook Login
Theming
bootswatch
Editor
Classes support
Scaffolding
Bootstrap styles
Browser support
Mobile friendly
Responsive
Bootstrap - Grid

17. Components
Module 6
Microsoft Virtual Academy

18. Components

19. Glyphicons

20. Bootstrap - Components
5 min bootstrap
Grid system
Screen sizes
Columns
3 column
4 colums
Mobile first
Responsive images
Buttons
Glyphicons
Thumbnails
Facebook Login
Theming
bootswatch
Editor
Classes support
Scaffolding
Bootstrap styles
Browser support
Mobile friendly
Responsive
Bootstrap - Components

21. Visual Studio support
Module 6
Microsoft Virtual Academy

22. Visual Studio – Class IntelliSense

23. Visual Studio – Missing Class Detection

24. Bootstrap – Visual Studio Support
5 min bootstrap
Grid system
Screen sizes
Columns
3 column
4 colums
Mobile first
Responsive images
Buttons
Glyphicons
Thumbnails
Facebook Login
Theming
bootswatch
Editor
Classes support
Scaffolding
Bootstrap styles
Browser support
Mobile friendly
Responsive
Bootstrap – Visual Studio Support