Introduction to Bootstrap Bootstrap සදහා හැදින්වීම Module 6 Omal Perera | http://www.windowsgeek.lk @omalperera Microsoft Virtual Academy

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

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

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

Theme Support Module 6 Microsoft Virtual Academy

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

Responsive Layout Module 6 Microsoft Virtual Academy

Responsive Layout

Responsive Layout

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

Grid System Module 6 Microsoft Virtual Academy

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)

Grid system

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

Components Module 6 Microsoft Virtual Academy

Components

Glyphicons

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

Visual Studio support Module 6 Microsoft Virtual Academy

Visual Studio – Class IntelliSense

Visual Studio – Missing Class Detection

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