Download presentation
Presentation is loading. Please wait.
0
Responsive Web Design (RWD)
Chin-Chih Chang/張欽智 Chung Hua University/中華大學資訊工程學系
1
Outline Web Client and Server
Basic Concepts of HTML, CSS, JavaScript, jQuery, jQuery Mobile. Responsive Web Design (RWD) Responsive Web Design Frameworks Case Study: RWD Framework - Bootstrap
2
Web Client and Server Web Client: Web browser Web Server:
Chrome, Firefox, Internet Explorer, Microsoft Edge, Safari, and Opera Web Server: Apache: Nginx: Microsoft-IIS: Tomcat: Node.js: Google Web Server: A custom-built server software used only by Google.
3
HyperText Markup Language (HTML)
Hyper Text Markup Language (HTML) is a language which describes the structure of Web pages using markups. Example: <tagname attribute="attribute value">content<tagname> <!DOCTYPE html> <html lang="en-US"> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
4
HyperText Markup Language (HTML)
Tag Description Example <!DOCTYPE> Defines the document type. <!DOCTYPE html> <html> <head><title>HTML</title> </head> <body> <h1>Hello, World!</h1> </body </html> Defines the root of an HTML document. <head> Defines information about the document <title> Defines a title for the document. <body> Defines the document's body. <h1>to</h1> Defines HTML headings. <ol> Defines an ordered list. <ol> <li>Milk</li> <li>Tea</li> </ol> <li> Defines a list item. <ul> Defines an unordered list. <a> Defines a hyperlink. <a href="cat.html" width ="100px" >cat</a> <img> Defines an image. <img src="cat.gif" alt="cat"/>
5
HyperText Markup Language (HTML)
Tag Description Example <table> Defines a table. <table> <tr> <th>Course</th><th>Score</th> </tr> <tr><td>Web</td><td>87</td> </tr> </table> <tr> Defines a row in a table. <th> Defines a header cell in a table. <td> Defines a cell in a table. <form> Defines an HTML form for user input. <form action="/do.php" method="get"> name:<input type="text" name="name"> <br/> <select> <option value="egg">egg</option> <option value="ice">ice</option> </select> <textarea rows="4" cols="50"> Comments </textarea> <input type="submit" value="Buy"> </form> <input> Defines an input control. text Defines a text field. checkbox Defines a checkbox. radio Defines a radio button. <select> Defines a drop-down list. <option> Defines an option in a drop-down list. <textarea> Defines a multiline input control.
6
HTML5 The new HTML5 elements are:
New semantic elements like <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, and <time>. New attributes of form elements like number, date, time, calendar, and range. New graphic elements: <svg> and <canvas>. New multimedia elements: <audio> and <video>. HTML SSE: Server-Sent Events allow a web page to get updates from a server.
7
HTML5 – New Semantic Elements
<!DOCTYPE html> <html> <title>HTML</title> <body> <nav> <a href=" of Thrones</a> | <a href=" The Last Knight</a>| <a href=" </nav> <section> <article> <header> <h1>Game of Thrones</h1> <p>Winter is Coming.</p> </header> <p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss.</p> </article> <h1>Transformers: The Last Knight</h1> <p>Humans and Transformers are at war, Optimus Prime is gone.</p> </header> <p>Transformers: The Last Knight is a 2017 American science fiction action.</p> </article> </section> <aside> <h4>Innovation</h4> <p>Innovating a better future</p> <figure> <img src="about-itri.jpg" alt="Industrial Technology Research Institute" width="200"> <figcaption>Fig.1 - ITRI Innovating a better future</figcaption> </figure> </aside> <footer> <p>Posted by: Chin-Chih Chang</p> <p>Contact information: <a </footer> </body> </html
8
HTML5 API The API's in HTML5 are:
HTML Application Cache: An application caching mechanism is used to lets web-based applications run offline. HTML Drag and Drop: Web page component can be dragged and dropped. HTML Geolocation: The HTML Geolocation API is used to locate a user's position. HTML Local Storage: Web applications can store data locally within the user's browser. HTML Web Workers: A web worker is a JavaScript running in the background, without affecting the performance of the page.
9
Cascading Style Sheets (CSS)
CSS (Cascading Style Sheets) is a language that describes the style of an HTML document. CSS uses selectors to specify the styles of elements. There are three levels of CSS and their applying range listed from the highest priority to the lowest: Inline style sheets apply to the content of a single tag. Document-level style sheets apply to the whole body of a document. External style sheets can apply to the bodies of any number of documents. <h1 style="color:pink;">A pink heading</h1> <link rel="stylesheet" href="styles.css">
10
CSS - Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Some main selectors: element: Example: Set the color of all <p> elements to red. class: Example: Set all elements with class="intro" to red. #id: Example: Selects the element with id="title" to red. *: Example: Selects all elements to red. p { color: red; } .intro { color: red; } #title { color: red; } * { color: red; }
11
CSS Properties Category Property Example Fonts
font, font-family, font-size, font-weight font: 15px arial, serif; font-size: 200% Lists list-style-type, list-style-type list-style-type: disc; list-style-image: url('pin.gif'); Texts text-align, text-decoration text-align:justify; text-decoration: overline; Boxes margin, margin-left, max-height margin: 2px 5px 10px 7px; top right bottom left Colors color color: purple; color: #00ff00; color: rgb(0, 255, 0); Backgrounds background, background-color, background-repeat background-color: pink; background-repeat: repeat-y; Borders border, border-style, border-width, border-color border: 5px solid red; border-style: dotted;
12
CSS Units Property Explanation Example cm centimeters
h1 {font-size: 3cm;} mm millimeters #middle {font-size: 20mm;} in inches (1in = 96px = 2.54cm) p.small {font-size: 0.1in;} px pixels (1px = 1/96th of 1in) .large {font-size: 40px;} pt points (1pt = 1/72 of 1in) div {line-height: 10pt;} pc picas (1pc = 12 pt) span {font-size: 2pc;} em Relative to the font-size of the element p {font-size: 20px; line-height: 2em;} % percent span {font-size: 120%;} small div {font-size: small;} large larger p {font-size: larger;}
13
CSS - Example <!DOCTYPE html> <html> <head> <title>CSS Example</title> body { background-color: pink; } .intro { color: purple; } #title { font-family: fantasy; font-size: 20px; } </head> <body> <h1 class="intro">Introduction</h1> <p id="title">CSS Selector</p> </body> </html>
14
JavaScript JavaScript is a high-level, dynamically typed, and interpreted run-time language. Initially used in the client side with Web browsers such as HTML. Currently extended to the server side such as node.js. Why Study JavaScript? It is one of the 3 languages all web developers must learn HTML to define the content of web pages CSS to specify the layout of web pages JavaScript to program the behavior of web pages
15
JavaScript JavaScript has five primitive types:
Boolean: Boolean values are true and false. var x = true; Number: var x = 10; String: var hello = "Hello, World!"; Null: The only Null value is null. Undefined: The only Undefined value is undefined. Numeric operators - ++, --, +, -, *, /, % JavaScript objects are written with curly braces. var course = {title:"Database", credits:3}; The course has two properties: title and credits.
16
JavaScript The Number Object provides: The String Object provides:
Properties: MAX_VALUE, MIN_VALUE, NEGATIVE_INFINITY, NaN, POSITIVE_INFINITY Methods: Number, paraseFloat, parseInt The String Object provides: Properties: length, prototype (allows you to add properties and methods to an object) Methods: charAt, concat, match, replace, split, substr, trim, etc. The Math Object provides: Properties: Math.PI, Math.SQRT2, Math.LN2 Functions: abs, floor, round, max, pow, sin, sqrt, random, etc.
17
JavaScript The Window Object provides: The Array Object provides:
Properties: navigator, outerHeight Methods: alert, confirm, open, prompt, etc. The Array Object provides: Example: var sports = ["Cycling", "Swimming", "Judo"]; var sports = new Array("Cycling", "Swimming", "Judo"); Properties: length, prototype Methods: concat, indexOf, join, sort, toString, etc. A function is defined with the function keyword, followed by a name, followed by parentheses () with parameters.
18
HTML DOM (Document Object Model)
The Document Object Model (DOM) is a model in which a document is constructed as a tree of objects. The DOM facilitate a program to access the elements in the document. The DOM is a W3C (World Wide Web Consortium) standard. The W3C DOM standard includes 3 different parts: Core DOM - standard model for all document types XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents
19
HTML DOM (Document Object Model)
The HTML DOM defines: The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
20
JavaScript – Triangle Example
<!DOCTYPE html> <html> <head> <title>Triangle Area</title> <script> function area() { var a = parseFloat(document.getElementById("a").value); var b = parseFloat(document.getElementById("b").value); var c = parseFloat(document.getElementById("c").value); if (a + b > c && b + c > a && c + a > b) { var s = (a + b + c)/2; var area = Math.sqrt(s * (s - a) * (s - b) * (s - c)); document.getElementById("result").innerHTML = "Area = " + area; } else document.getElementById("result").innerHTML="The triangle cannot be formed."; } </script> </head> <body> <input type="text" id="a"><input type="text" id="b"><input type="text" id="c"> <button onclick="area()">Area</button> <p id="result"></p> </body> </html>
21
JavaScript – Calculator Example
<!DOCTYPE html> <head> <title>Calculator</title> <script> function calculate() { var a = parseFloat(document.getElementById("a").value); var b = parseFloat(document.getElementById("b").value); var op = document.getElementById("op").value; if(op == "+") result = a + b; if(op == "-") result = a - b; if(op == "*") result = a * b; if(op == "/") result = a / b; document.getElementById("result").innerHTML = result; } </script> </head> <body> <input type="text" id="a" size="3"> <select id = "op"> <option selected = "selected" value = "+">+</option> <option value = "-">-</option> <option value = "*">*</option> <option value = "/">/</option> </select> <input type="text" id="b"> <button onclick=“calculate()">=</button> <label id="result"></p> </body> </html>
22
JavaScript – Rolling Dice Example
<!DOCTYPE html> <head> <title>Rolling Dice</title> <script> var rolling; function roll() { rolling = setInterval(frame, 50); } function frame() { var n = Math.floor(Math.random() * 6) + 1; document.getElementById("dice").src = "dice" + n + ".png" ; function stop() { clearInterval(rolling); </script> </head> <body> <img id="dice" src="dice1.png"/> <br/> <button onclick="roll()">Roll</button><button onclick=“stop()">Stop</button> <label id="result"></p> </body> </html>
23
HTML5 Drag and Drop Example
<html> <head> <style> #boxA, #boxB { float:left;padding:10px;margin:10px;} #boxA { background-color: purple; width:80px; height:80px; } #boxB { background-color: pink; width:120px; height:120px; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); function drop(ev) { var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); </script> </head>
24
HTML5 Drag and Drop Example
<body> <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two boxs.</p> <div id="boxA" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)"> <img src="dice6.png" draggable="true" ondragstart="drag(event)" id="drag1" width="60"> </div> <div id="boxB" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
25
Exercise 1: HTML and JavaScript
Download and install Notepad++: Download and exercise samples at Exercise: Create a Web page in which an user input a quadratic equation ax2 + bx + c = 0 and find the roots of the equation. x x = 0 x = 1, x = 2 1 3 2 Solve
26
jQuery What is jQuery? It is a JavaScript Library.
Why use jQuery? It simplifies JavaScript programming. Where to get jQuery? Downloading jQuery: Including jQuery through CDN (Content Delivery Network) Google CDN Microsoft CDN CDNJS CDN jsDelivr CDN <script src=“ <script src=" <script src=" <script src="
27
jQuery - Selectors jQuery selectors allow you to select and manipulate HTML element(s). Some main selectors: element: Example: Select all <p> elements on a page. class: Example: Select all elements with class="intro". #id: Example: Selects the element with id="title". *: Example: Selects all elements. $("p") $(".intro") $("#title") $("*")
28
jQuery DOM Manipulation
Three main jQuery methods for DOM manipulation are: text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields $("#btn1").click(function(){ alert("Text: " + $("#demo").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#demo").html()); }); $("#btn3").click(function(){ alert("Value: " + $("#demo").val()); });
29
jQuery - Example <!DOCTYPE html> <html> <head> <title>Triangle Area</title> <script src=" </script> <script> $(document).ready(function() { $("#area").click(function() { area(); }); }); function area() { var a = parseFloat($("#a").val()); var b = parseFloat($("#b").val()); var c = parseFloat($("#c").val()); if (a + b > c && b + c > a && c + a > b) { var s = (a + b + c)/2; var area = Math.sqrt(s * (s - a) * (s - b) * (s - c)); $("#result").text("Area = " + area); } else $("#result").text("The triangle cannot be formed."); } </script> </head> <body> <input type="text" id="a"><input type="text" id="b"><input type="text" id="c"> <button id="area”>Area</button> <p id="result"></p> </body> </html>
30
Exercise 2: HTML and jQuery
Download and install jQuery: Download and exercise samples at Rewrite the javascript-calculator.html using jQuery.
31
jQuery Mobile jQuery Mobile is a user interface system based on HTML5 & CSS3 and designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Where to get jQuery mobile? Downloading jQuery mobile: Including jQuery mobile and jQuery through CDN (Content Delivery Network) <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" /> <script src=" <script src=" </head>
32
jQuery Mobile <!DOCTYPE html> <html> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href=" /> <script src=" <script src=" </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>This is the header</h1> </div> <div data-role="main" class="ui-content"> <p>This is the content</p> </div> <div data-role="footer"> <h1>This is the footer</h1> </div> </div> </html>
33
Exercise 3: HTML and jQuery Mobile
Download and install Opera Mobile Classic Emulator: Download and install jQuery Mobile: Download exercise sample at and add an image into it. View the page using Opera Mobile Classic Emulator.
34
Responsive Web Design (RWD)
Responsive Web Design (RWD) is a design approach which facilitate creation of web pages that can fit different devices. Responsive web design only need HTML and CSS. Example: 50 Free Bootstrap Templates & Themes
35
Responsive Web Design (RWD)
The viewport is the user's visible area of a web page and should be different among devices. In HTML5 the viewport can be controlled as follows: A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. <meta name="viewport" content="width=device-width, initial-scale=1.0">
36
Responsive Web Design (RWD)
Some additional rules to follow: Do NOT set large fixed width elements and a particular viewport width. For example, set width as 100%. Use CSS media queries to apply different styling for small and large screens. Media query is a CSS technique introduced in CSS3. It uses rule to include a block of CSS properties only if a certain condition is true.
37
Responsive Web Design (RWD) – Media Queries
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: pink;} @media only screen and (max-width: 400px) { body { background-color: yellow; } } </style> </head> <body> <p>When the width of the browser window is less than 400 pixels, the background-color "yellow", otherwise it is "pink". </p> </html>
38
Responsive Web Design - Images
If the width property is set to 100%, the image will be responsive and scale up and down: img { width: 100%; height: auto; } If the max-width property is set to 100%, the image will scale down but not scale up more than its original size. img { max-width: 100%; height: auto; }
39
Responsive Web Design - Images
Background images can also respond to resizing and scaling. If the background-size property is set to "contain", the background image will scale while keeping its aspect ratio. div { width: 100%; height: 400px; background-image: url('roses.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid orange; }>
40
Responsive Web Design - Images
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area: div { width: 100%; height: 400px; background-image: url('roses.jpg'); background-size: 100% 100%; border: 1px solid orange; }html>
41
Responsive Web Design - Images
If the background-size property is set to "cover", the background image will scale to cover the entire content area. div { width: 100%; height: 400px; background-image: url('roses.jpg'); background-size: cover; border: 1px solid orange; }
42
Responsive Web Design - Images
Different images can be assigned to different devices. You can use the media query min-device-width, which checks the device width. Then the image will not change when you resize the browser window: /* For devices smaller than 400px: */ body { background-image: url('smallflowers.jpg'); } /* For devices 400px and larger: only screen and (min-device-width: 400px) { body { background-image: url('flowers.jpg'); } }
43
Responsive Web Design - Images
HTML5 introduced the <picture> element, which lets you define more than one image. The srcset attribute is required, and defines the source of the image. The media attribute is optional, and accepts the media queries. You should also define an <img> element for browsers that do not support the <picture> element. <picture> <source srcset="smallflowesr.jpg" media="(max-width: 400px)"> <source srcset="flower.jpg"> <img src="flowers.jpg" alt="Flower"> </picture>
44
Responsive Web Design - Videos
If the width property is set to 100%, the video player will be responsive and scale up and down: video { width: 100%; height: auto; } If the max-width property is set to 100%, the video player will scale down but not scale up more than its original size. video { max-width: 100%; height: auto; }
45
Responsive Web Design - Frameworks
Bootstrap Foundation Pure Skeleton UIKit Developer(s) Mark Otto, Jacob Thornton ZURB Yahoo Dave Gamache YOOtheme Launched in 2011 2013 2012 Github Stars 112,373 25,806 17,064 14,272 9,950 Download Size 3413 KB 9070 KB 41 KB 11 KB 3724 KB Responsive Yes Modular No CDN MaxCDN JSDelivr Icons Glyphicons Foundation Icon Fonts Font Awesome None CSS Preprocessors {less}, Sass Sass IE Support IE8+ IE9+ IE7+ License MIT Yahoo BSD
46
RWD Frameworks - Bootstrap
What is Bootstrap? Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.
47
RWD Frameworks - Bootstrap
Bootstrap supports CSS preprocessors. CSS preprocessors extends the CSS language, adding features that allow variables, mixins (Object-oriented CSS), functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable. Bootstrap supports two CSS preprocessors: {less}: A dynamic style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side Sass: Sass is a mature, stable, and powerful professional grade CSS extension language.
48
RWD – Bootstrap: Why Use Bootstrap?
Easy to get started: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap. Responsive design: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops. Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework. Browser support: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Microsoft Edge, Safari, and Opera)
49
RWD – Bootstap Packages
Basic Structure − Bootstrap provides a basic structure with Grid System, link styles, and background. CSS − Bootstrap comes with the feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. Layout Components − Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, pop-overs, and much more. JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. Customize − You can customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version
50
RWD Frameworks – Where to get Bootstrap?
Downloading Bootstrap Official site: GitHub: Including Bootstrap through CDN (Content Delivery Network) MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. If you need jQuery, you must also include jQuery. <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href=" <!-- jQuery library --> <script src=" </script> <!-- Latest compiled JavaScript --> <script src=" </script>
51
RWD – Bootstrap Create a Web page with Bootstrap.
Add the HTML5 doctype. Bootstrap 3 is mobile-first. Containers: Bootstrap requires a containing element to wrap site contents. There are two container classes to choose from: The .container class provides a responsive fixed width container The .container-fluid class provides a full width container, spanning the entire width of the viewport <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html> <meta name="viewport" content="width=device-width, initial-scale=1">
52
RWD – Bootstrap Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <script src=" </script> <script src=" </script> </head> <body> <div class="container"> <h1>Bootstrap Example</h1> <p>Welcome to the Bootstrap World.</p> </div> </body> </html>
53
RWD – Bootstrap Files Bootstrap Files: CSS files: Theme files:
bootstrap.css is the normal version for development. bootstrap.min.css is a minified version for production. Theme files: Bootstrap-theme.css, bootstrap-theme.min.css: The Bootstrap theme is an optional with predefined classes for 3-D effects. JavaScript files: bootstrap.js, bootstrap-min.js: bootstrap-min.js for plugins functionalities. Glyphicons: Bootstrap includes a collection of over 250 glyphicons. bootstrap.css.map, bootstrap-theme.css.map
54
Exercise 4: Bootstrap Download Bootstrap from and unzip the file. Modify the Web page created in Exercise 3 using Bootstrap and view it from different devices. Visit choose and download a Bootstrap Landing Page Templates, and test it.
55
RWD – Bootstrap Grid System
Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes. The Bootstrap grid system has four classes: xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops)
56
Structure of Bootstrap Grid System
Rows are used to create horizontal groups of columns. Rows must be placed within a .container class for proper alignment and padding. Predefined grid classes like .row and .col-sm-3 are available for quickly making grid layouts. Columns create gaps between column content via padding. Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-3.
57
RWD – Bootstrap Grid Options
Extra small devices Phones (<768px) Small devices Tablets (>=768px) Medium devices Desktops (>=992px) Large devices Desktops (>=1200px) Grid behaviour 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- Number of columns 12 Column width Auto ~62px ~81px ~97px Gutter width 30px (15px on each side of a column) Nestable Yes Offsets Column ordering
58
RWD – Bootstrap Grid Example
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <script src=" <script src=" </script> <body> <div class="jumbotron text-center"> <h1>Hello Bootstrap Page</h1> <p>Feel free to resize this responsive.</p> </div> <div class="container"> <div class="row"> <div class="col-sm-3"> <h3>Column 1</h3> <p>Too many cooks spoil the broth.</p> </div> <div class="col-sm-3"> <h3>Column 2</h3> <p>Time is money.</p> </div> <div class="col-sm-3"> <h3>Column 3</h3> <p>Practice makes perfect.</p> </div> <div class="col-sm-4"> <h3>Column 4</h3> <p>Fortune favors the bold.</p> </div> </div> </div> </body> </html>
59
RWD – Bootstrap Grid Example
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <script src=" <script src=" </script> <body> <div class="container-fluid"> <h1>Hello World!</h1> <div class="row"> <div class="col-sm-3" style="background-color:purple;"> <p>Bootstrap Grid Example</p> </div> <div class="col-sm-9" style="background-color:orange;"> <p>Small devices</p> </div> </div> </div> </body> </html>
60
RWD – Bootsrap Fonts, List, Table
Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif in its default font stack. All HTML headings (h1 to h6) are styled in Bootstrap. Bootstrap supports ordered lists, unordered lists, and definition lists. Bootstrap supports the following tables: Striped table: class="table-striped" Bordered Table: class="table-bordered" Responsive table: class="table-responsive"
61
RWD – Bootstrap Button Styles
Bootstrap provides following styles of buttons: .btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link
62
RWD – Bootstrap Image and Form
Image Shapes: Circle: class="img-circle" Rounded Corners: class="img-rounded" Thumbnail: class="img-thumbnail" Responsive images automatically adjust to fit the size of the screen: class="img-responsive“ Bootstrap provides three types of form layouts: Vertical form (this is default) Horizontal form Inline form
63
RWD - Bootstrap CSS Helper Classes
Text supports following classes: text-muted, text-primary, text-success, text-info, text-warning, text-danger, text-danger Table cell supports following classes: bg-primary, bg-success, bg-info, bg-warning, Other: pull-left: Floats an element to the left show: Forces an element to be shown hidden: Forces an element to be hidden close: Indicates a close icon. caret: Indicates dropdown functionality
64
RWD – Bootstrap Example
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">RWD Example</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav>
65
Bootstrap Editor/Tools
Bootstrap Studio: A powerful desktop app for creating responsive websites using the Bootstrap framework. Bootply: A Bootstrap editor that includes Bootstrap snippets, templates and examples using Javascript, CSS, HTML5 and jQuery. Jetstrap: Rapid interface builder for Twitter Bootstrap. Generates real Bootstrap HTML, CSS, and Javascript. LayoutIt!: It is a drag-and-drop interface builder for Bootstrap that wants to be the kick-off for your front-end developments.
66
RWD using Visual Studio 2017
Download and install Visual Studio 2017 Create an ASP.NET empty Web page.
67
RWD using Visual Studio 2017
Tools > NuGet Package Manager > Manage NuGet Packages for Solution Search and install Bootstrap.
68
RWD using Visual Studio 2017
Add new item – HTML page.
69
RWD using Visual Studio 2017
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello RWD</title> <script src="Scripts/bootstrap.min.js"></script> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <script src="Scripts/jquery min.js"></script> </head> <body> <div class="jumbotron text-center"> <h1>Hello Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="container"> <div class="row"> <div class="col-sm-3"> <h3>Column 1</h3> <p>Too many cooks spoil the broth.</p> <div class="col-sm-3"> <h3>Column 2</h3> <p>The early bird catches the worm.</p> </div> <h3>Column 3</h3> <p>Hope for the best, but prepare for the worst.</p> <h3>Column 4</h3> </body> </html>
70
RWD using Visual Studio 2017
71
Exercise 5: Bootstrap Visit Pick a framework and customize and adjust Bootstrap to suit your individual project's needs. Visit or Try to create a RWD page using the tools of your choice.
72
Topic for next Classes Laravel is a free, open-source PHP web framework for Web artisans Official site:
Similar presentations
