Responsive Web Design with Bootstrap 3

[Pages:60]CSCI 4140 ? Tutorial 5

Responsive Web Design with Bootstrap 3

CSCI 4140 ? Tutorial 5

Responsive Web Design with Bootstrap 3

Matt YIU, Man Tung (mtyiu@cse) SHB 118

Office Hour: Tuesday, 3-5 pm 2015.02.12

Prepared by Matt YIU, Man Tung

2015.02.12

1

CSCI 4140 ? Tutorial 5

Responsive Web Design with Bootstrap 3

Outline

? Assignment 2 overview ? Layout design ? CSS (Cascading Style Sheets) ? Font Awesome ? Responsive web design (RWD) ? CSS media queries ? Bootstrap 3 ? Setting up the development environment for Node.js and

Express

Prepared by Matt YIU, Man Tung

2015.02.12

2

CSCI 4140 ? Tutorial 5

Responsive Web Design with Bootstrap 3

YouTube Remote

Assignment 2 Overview ? Layout Design

If you know how to implement the layout, you are free to leave!

Prepared by Matt YIU, Man Tung

2015.02.12

3

CSCI 4140 ? Tutorial 5

Responsive Web Design with Bootstrap 3

When screen size 992 px...

Prepared by Matt YIU, Man Tung

2015.02.12

4

CSCI 4140 ? Tutorial 5

Responsive Web Design with Bootstrap 3

When screen size 992 px...

YouTube player (More details in the next tutorial)

Control panel Playlist

Prepared by Matt YIU, Man Tung

2015.02.12

5

CSCI 4140 ? Tutorial 5

Responsive Web Design with Bootstrap 3

When screen size is between 768px and 992 px...

Prepared by Matt YIU, Man Tung

2015.02.12

6

CSCI 4140 ? Tutorial 5

Responsive Web Design with Bootstrap 3

When screen size is between 768px and 992 px...

Control panel

Note: When we reduce the width of the window, the video player is hidden.

Playlist

Prepared by Matt YIU, Man Tung

2015.02.12

7

CSCI 4140 ? Tutorial 5

The buttons are displayed with both icon and description.

Responsive Web Design with Bootstrap 3

When screen size is between 768px and 992 px...

Prepared by Matt YIU, Man Tung

2015.02.12

8

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download