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

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