Introduction to Bootstrap

Slides:



Advertisements
Similar presentations
Coding a Responsive HTML
Advertisements

DREAMWEAVER Welcome to our website!
Twitter Bootstrap. Agenda What is it? Grids and Fluid layouts Globals and Typography Tables, Forms and Buttons Navigation Media and thumbnails Responsive.
Bootstrap & CSS James Kahng. Intro Websites require a lot of upfront setup to look passably good (HTML base, CSS style, etc.) Because of this, people.
Media Queries Jeffery Davis CIT media is used to define different style rules for different media types and devices. Media queries.
Lloyd-Jamie Bennett – P Stylianos Michael – P
CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design.
 Jen Kramer JS Summit November 19,  Grounding in mobile techniques  Background on responsive design  Introduce Bootstrap and Foundation  Compare.
Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.
 jQuery Mobile An Introduction. What is jQuery Mobile  A framework built on top of jQuery, used for creating mobile web applications  Designed to make.
Kathy E. Responsive Design and Twitter Bootstrap.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Session I - Introduction
Website Development with Dreamweaver
Responsive design - Bedrock to our site Responsive site templates included.
Kirkwood Center for Continuing Education Introduction to PHP and MySQL By Fred McClurg, Copyright © 2015 All Rights Reserved.
Strategies for Building Mobile Apps Using ArcGIS API for JavaScript Andy Gup, Lloyd Heberlie.
Making iServices Subscriber More Mobile Friendly `
Frontend - HTML5 - CSS3 - Bootstrap 3.x. SemanticsPerformanceCSS3.
Web parts, elements and user controls Width: 350 px / Height: 125 px Rounded corners: Rounding 6 px Background color: ? Name text: Arial, Bold, 12 px,
Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.
Adxstudio Portals Training
GO MOBILE. GO RESPONSIVE. 185 mil mobile internet users in India
learn. do. dream. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes.
Bootstrap Front-End Framework for Responsive Web Sites Svetlin Nakov Technical Trainer Software University
Positioning Objects with CSS and Tables
 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.
An Introduction to JQuery Mobile By Trevor Seeney.
2 3  Sites today need to be responsive, mobile first, slickly designed, and fast.  Bootstrap helps designers and developers by providing a vast array.
A gentle introduction to Bootstrap MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/18/
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Textbook to be published by Pearson Ed in early Bootstrap.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
10 Mobile Application Framework Must Know to Launch New App.
A gentle introduction to Bootstrap TDAP Jeremy Shafer Department of MIS Fox School of Business Temple University Spring
Bootstrap KS Technologies.
CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.
Bootstrap 3 SoftUni Team Technical Trainers Software University
PHP MySQL Crash Course with HTML CSS
What’s New In Bootstrap v4?
Website implementation
Creating customization with JS framework: Bootstrap
Front-End Framework for Responsive Web Sites
Responsive Design and Twitter Bootstrap
EOS WEBPAGE Collaborative work with: Ewa Lopienska (logo),
Introduction to Bootstrap Bootstrap සදහා හැදින්වීම
© 2016, Mike Murach & Associates, Inc.
Communicating with Banners
User Interface Design and Usability Bootstrap
Bootstrap A popular HTLM, CSS, and JS framework for developing responsive, mobile first projects on the web.
CS3220 Web and Internet Programming Introduction to Bootstrap
IS1500: Introduction to Web Development
Responsive Web Applications with Bootstrap & CSS
HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks
Revision.
Course Review HTML5 Level II Course Review
APTECH JANAKPURI INSTITUTE PROVIDING WEB DESIGNING COURSES Address:- J-1,2nd Floor, Opp Metro Pillar No – 559, Janakpuri East, Delhi /42.
Objectives Create a reset style sheet Explore page layout designs
Course Review ITI HTML5 Level II Course Review
Resolving Resolutions
HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks
06 | Introduction to Bootstrap
Responsive Grid Layout with Bootstrap
Chapter 2 Bootstrap Grid System
Course Review HTML5 Level II Course Review
Course Review HTML5 Level II Course Review
CS3220 Web and Internet Programming Introduction to Bootstrap
HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks
Web Client Side Technologies Raneem Qaddoura
Web Client Side Technologies Raneem Qaddoura
creating websites and web applications responsive.
Presentation transcript:

Introduction to Bootstrap

Bootstrap is Front-end Framework www.getbootstrap.com Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstrap is Ready-to-use Web Elements HTML / CSS elements for button, form, table, image, navbar, label, progress bar, alert etc.

EXAMPLES of Bootstrap Elements

more EXAMPLES of Bootstrap Elements

Websites created by Bootstrap www.fliplingo.com

Why Bootstrap? Save 100+ hours of coding Easy to use web elements Quick responsive prototype / website Great documentation

Bootstrap Package CSS - bootstrap.css JS - bootstrap.js Icon Fonts - glyphicons-halflings-regular.ttf

What is Grid in web design?

What is Grid in web design? 1 2 3 4 5 6 7 8 9 10 11 12 12 Grid

What is Grid in web design? 4 Grids x 3 Columns = 12 Grids

Bootstrap Grid 12 Responsive Grid

Grid Overlay for Bootstrap & Foundation http://bit.ly/grid-overlay Grid Overlay for Bootstrap & Foundation

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

Bootstrap Grid Example http://bit.ly/bs-agency How many grids in each box?

Bootstrap Grid Example 4 grids x 3 Columns

Bootstrap Grid Example

Bootstrap Grid Example

Bootstrap Grid Example 2 How many grids in each box?

Bootstrap Grid Example 2 6 grids x 2 Columns

Bootstrap Grid Example 2

Bootstrap Grid Example 2

Bootstrap Row 1 Row = 12 Grids

Bootstrap Row 3 Rows

Bootstrap Row Example

Bootstrap Row Example

Bootstrap Responsive Grid Columns will stack when responsive

Bootstrap Responsive Grid Desktop Mobile 1 2 3 1 2 Columns stack on mobile 3