What is Bootstrap? Front-End Framework Mobile First

Slides:

Advertisements

Similar presentations

2.744 Dreamweaver Tutorial Sangmok Han Feb 24, 2010.

Advertisements

Programming Club IIT Kanpur. Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.

1 Dreamweaver CS5 intermediate class by Cookie Setton Build a CSS website WITHOUT TABLES Just when you thought you were starting to understand HTML coding,

Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:

Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:

CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

Twitter Bootstrap Paul Frederickson. Tonight’s Objectives Learn how to set up a bootstrap based site Become familiar with bootstrap syntax Create a framework.

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

CIT 256 Organizing Large Websites: Divs, DW Templates Dr. Beryl Hoffman.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Web Page Basics XHTML & CSS 1. Planning Decide on topic or research the topic given to you. Decide on your colour scheme. Use

 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.

ISYS 475 Project: Customizing a Zen Cart E-Commerce Site.

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

JQuery Introduction © Copyright 2014, Fred McClurg All Rights Reserved.

1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.

Introduction to CSS. Why CSS? CSS Provides Efficiency in Design and Updates CSS relatively easy to use Can give you more flexibility and control Faster.

Lab 4: Bootstrap and Responsive Design User Interface Lab: GUI Lab Sep. 16 th, 2014.

Introduction to Bootstrap

Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.

learn. do. dream. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes.

ACM 262 INTRODUCTION TO WEB DESIGN Week-7 ACM 262 Course Notes.

SHAREPOINT & JQUERY. Hi, my name and I am a product manager at lightning tools. I have been working with SharePoint for 5 years.

 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.

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.

What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,

Creating Web Documents CSS examples (do more later) Lab/Homework: Read chapters 15 & 16. Work on Project 3, do postings.

A Crash Course By TraversyMedia.com

CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.

PHP MySQL Crash Course with HTML CSS

The Box Model in CSS Web Design – Sec 4-8

Creating customization with JS framework: Bootstrap

Introduction to Bootstrap Bootstrap සදහා හැදින්වීම

© 2016, Mike Murach & Associates, Inc.

Bootstrap A popular HTLM, CSS, and JS framework for developing responsive, mobile first projects on the web.

IS1500: Introduction to Web Development

>> CSS Layouts.

Responsive Web Applications with Bootstrap & CSS

Bootstrap Topics What is bootstrap? Documentation

Web Development & Design Foundations with HTML5 7th Edition

CSS Borders and Margins.

HTML5 Level I Session III

HTML5 Level I Session III

Web Development & Design Foundations with H T M L 5

Cascading Style Sheets

Creating a Webpage with External CSS

Website implementation - continued

06 | Introduction to Bootstrap

Web Development & Design Foundations with H T M L 5

OBIEE Training – E2 (Oracle BI Presentation Server – Customization)

Web Page Design CIS 300.

Building ASP.NET Applications 2

Intro to Web Development Homework Review

CS3220 Web and Internet Programming Introduction to Bootstrap

Web Page Layout Imran Rashid CTO at ManiWeber Technologies.

04 | Visual Studio & ASP.NET Integration

WORKSHOP A Basics in HTML/CSS.

Bootstrap Direct quote from source: bootstrap/

creating websites and web applications responsive.

ITI 133: HTML5 Desktop and Mobile Level I

Presentation transcript:

What is Bootstrap? Front-End Framework Mobile First Front-End Framework Mobile First Solves cross-browser issues (normalize.css) Open-source, most popular such framework But what is Bootstrap? It is a collection of folders and files for you to use in the design of your website: CSS, Javascript, Fonts (glyphicons) You can download them (.zip) or link to them at a content delivery network (cdn). Website: www.getbootstrap.com What is Bootstrap?

Mobile First Solves cross-browser issues (normalize.css) Open-source, most popular such framework But what is Bootstrap? It is a collection of folders and files for you to use in the design of your website: CSS, Javascript, Fonts (glyphicons) You can download them (.zip) or link to them at a content delivery network (cdn). Customizing Bootstrap There are 2 Approaches- Edit bootstrap.css or use cutom.css

Customizing Bootstrap – 2 Approaches 1-) Edit bootsrap.css (Ctrl-f search for the component of interest) .jumbotron { padding-top: 30px; padding-bottom: 30px; margin-bottom: 30px; color: inherit; background-color: #eee; } 2-) Create Custom.css (Copy and paste code from bootstrap.css) .jumbotron { padding-top: 30px; padding-bottom: 30px; margin-bottom: 30px; color: inherit; background-color: #eee; } * If the link to custom.css comes after the link to bootstrap.css, the custom rule will be followed.