9bootstraplibrary xuanhiens weblog

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.47 MB, 68 trang )

(1)<div class='page_container' data-page=1>

Responsive

Design

</div>
(2)<div class='page_container' data-page=2>

Table of Contents



Responsive Design



Creating Responsive Design



Fluid Layout



Flexible Images and Fonts



Flexible Tables and Menus



Media Queries



Media Queries Everywhere



Constructing Responsive Design

</div>
(3)<div class='page_container' data-page=3></div>
(4)<div class='page_container' data-page=4>

Responsive Design



Responsive design

(adaptive design) is an

approach to optimize the viewing

experience on range of devices



Better user experience on mobile, desktop,

TV



The UI depends on the device and device

specifics



Screen size



Screen resolution



DPI



Color range



Etc…

</div>
(5)<div class='page_container' data-page=5></div>
(6)<div class='page_container' data-page=6>

Creating Responsive

Design

</div>
(7)<div class='page_container' data-page=7>

Creating Responsive

Design



Responsive design involves one or more

of the following:



Fluid layout



Use proportional values for widths,

margins, etc…



Flexible fonts



Fonts based on the root



Flexible images



Images cannot go beyond their container



Media queries



Apply styles based on the client screen size

</div>
(8)<div class='page_container' data-page=8>

Fluid Layout

</div>
(9)<div class='page_container' data-page=9>

Fluid Layout



Fluid layout uses proportional sizes



Pros:



UI responds better to the client resolution



Spares code on media queries



Cons:



More whitespace on large screens (TV)

Sub

nav content aside

12% 60% 20%

</div>
(10)<div class='page_container' data-page=10>

Fluid Layout

</div>
(11)<div class='page_container' data-page=11></div>
(12)<div class='page_container' data-page=12>

Flexible Images



Fluid design gets broken when using

elements with fixed size



By concept images are always with fixed size



Example:



Resolution:

1024px

, container with width:

60%

( =

60% * 1024

=

614.4px

) and an image with

width:

500px



Seems OK



When the resolution becomes

780px

, the

container's width is still

60%

(=

468px

), and

the images width is still

500px



The image overflows its container

</div>
(13)<div class='page_container' data-page=13>

Making Images Flexible



The fix to the image overflow is

simple



Just a reset in the top of the CSS



max-width

overrides the

width

property



If the image size is larger than the

container's size  the image gets the

entire container's width

</div>
(14)<div class='page_container' data-page=14>

Flexible Images

</div>
(15)<div class='page_container' data-page=15></div>
(16)<div class='page_container' data-page=16>

Flexible Fonts



Flexible fonts

means proportional

font size



Based on the context

(parent)



Instead of pixels use

proportional

values

(

em

)



Make all font sizes based on the

context



To change the

font-size

of all

elements just change the context's

font-size

</div>
(17)<div class='page_container' data-page=17>

Flexible Fonts (2)



Making fonts "responsive" needs a

little math



ems

=

target

/

root



1.4375em

=

23px

/

16px

body { font-size: 16px; }

body header { font-size: 23px; } // 23 / 16 = 
1.4375

body { font-size: 16px; }

</div>
(18)<div class='page_container' data-page=18>

Flexible Fonts

</div>
(19)<div class='page_container' data-page=19></div>
(20)<div class='page_container' data-page=20>

Responsive Tables and

Menus



Responsive tables



Tables are ugly and not scalable



/>

ta-table-roundup/



Responsive menus



Menus take to much space



/>

nu-concepts/

</div>
(21)<div class='page_container' data-page=21></div>
(22)<div class='page_container' data-page=22>

Media Queries



Media queries are part of CSS 3



Supported in all major browsers



A media query consists of a media

type and at least one expression



By using media features like width,

height and color



MQ change the presentation of

content



Not the content itself

</div>
(23)<div class='page_container' data-page=23>

Media Queries (2)



Media queries apply CSS styles on certain

conditions (media type and expression)

.box {width: 250px; height: 250px; display: inline-block}
@media only screen and (max-width: 1024px) {

.box { width: 300px; height: 300px; }
}

@media only screen and (max-width: 960px) { 
 .box { width: 310px; height: 310px;}

}

@media only screen and (max-width: 480px) {

</div>
(24)<div class='page_container' data-page=24>

Media Queries

</div>
(25)<div class='page_container' data-page=25></div>
(26)<div class='page_container' data-page=26>



Bootstrap Overview –

Introduction



File Structure



Grid System



CSS Overview



Typography



Tables



Forms



Buttons



Images



Helper Class

</div>
(27)<div class='page_container' data-page=27>

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

</div>
(28)<div class='page_container' data-page=28>

Bootstrap History



Bootstrap was developed by Mark

Otto and Jacob Thornton at Twitter,

and released as an open source

product in August 2011 on GitHub.



In June 2014 Bootstrap was the

No.1 project on GitHub!

</div>
(29)<div class='page_container' data-page=29>

Why Use Bootstrap?



Advantages of Bootstrap:



Easy to use: Anybody with just

basic knowledge of HTML and CSS

can start using Bootstrap



Responsive features: 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 compatibility: Bootstrap is

compatible with all modern

browsers (Chrome, Firefox, Internet

Explorer, Safari, and Opera)

</div>
(30)<div class='page_container' data-page=30>

Where to Get

Bootstrap?



There are two ways to start using

Bootstrap on your own web site.



You can:



Download Bootstrap from

getbootstrap.com



Include Bootstrap from a

CDN

</div>
(31)<div class='page_container' data-page=31>

File Structure



Once the compiled version Bootstrap is

downloaded, extract the ZIP file, and you will

see the following file/directory structure:



As you can see there are compiled CSS and JS

(bootstrap.*), as well as compiled and minified

CSS and JS (bootstrap.min.*). Fonts from

Glyphicons are included, as is the optional

Bootstrap theme.

</div>
(32)<div class='page_container' data-page=32>

Create First Web Page With

Bootstrap



Add the HTML5 doctype



Bootstrap 3 is mobile-first



Containers:



Bootstrap also requires a containing

element to wrap site contents.



There are two container classes to

choose from:

</div>
(33)<div class='page_container' data-page=33>

Two Basic Bootstrap

Pages



Class: container & container-fluid

</div>
(34)<div class='page_container' data-page=34>

Bootstrap Grid System



Bootstrap's grid system allows up

to 12 columns across the page.



If you do not want to use all 12

columns individually, you can

group the columns together to

create wider columns:

</div>
(35)<div class='page_container' data-page=35>

Grid Classes



The Bootstrap grid system has four

classes:



xs

: (for phones - screens less than

768px wide)



sm

: (for tablets - screens equal to

or greater than 768px wide)



md

: (for small laptops - screens

equal to or greater than 992px

wide)



lg

: (for laptops and desktops -

screens equal to or greater than

1200px wide)



The classes above can be combined

to create more dynamic and

flexible layouts.

</div>
(36)<div class='page_container' data-page=36>

Basic Structure of a

Bootstrap Grid

</div>
(37)<div class='page_container' data-page=37>

BASIC GRID

STRUCTURE



Let us see some simple grid

examples:



Example: Stacked-to-horizontal



Example: Medium and Large Device

</div>
(38)<div class='page_container' data-page=38>

Bootstrap Grid System Example:

Stacked-to-horizontal

Let us see a simple grid example with simple 
layout: two columns

Lorem ipsum dolor sit...
 Sed ut perspiciatis...

</div>

Sed ut perspiciatis unde ...
 Neque porro quisquam est...
 </div>

</div>
(39)<div class='page_container' data-page=39>

OUTPUT:

Details:

<div class="container">...</div> element is added to

ensure proper centering and maximum width for layout.

 Once container is added, next you need think in terms of

rows. Add <div class="row">...</div>and columns <div 
class="col-md-6"></div> inside rows.

Every row in the grid is made up of 12 units and you can

define the desired size of your columns using those units. 
In our example we have two columns each made of 6 units 
wide i.e 6+6=12.

You can try some more options like <div 
class="col-md-3"></div> and <div class="col-md-9"></div>or <div

</div>
(40)<div class='page_container' data-page=40>

Bootstrap Grid System Example: Medium and

Large Device

Here we had used 2 divs and gave them the 50%/50%

split at the medium viewport width:

Lorem ipsum dolor sit ...

Sed ut perspiciatis unde ...
 </div>

Sed ut perspiciatis un ...

Neque porro quisquam est ...
 </div>

</div>
(41)<div class='page_container' data-page=41>

OUTPUT



But at large design could really be better

as a 33%/66%.



In this case, our 2 divs will go from a

</div>
(42)<div class='page_container' data-page=42>

Bootstrap Grid System Example: Mobile,

Tablet, Desktops

Now this gives us 3 different column layouts

<div class="container">



On a phone, it will be 25% on the left, and

75% on the right.



On a tablet, it will be 50%/50% again,



Large viewport, it will be 33%/66%.



3 different layouts for each of the 3

</div>
(43)<div class='page_container' data-page=43>

OUTPUT

Lorem ipsum dolor sit amet 
...

Sed ut perspiciatis unde ...
 </div>

<div class="col-sm-9 col-md-6 col-lg-4">
 Sed ut perspiciatis unde ...
 Neque porro quisquam est ...
 </div>

</div>
(44)<div class='page_container' data-page=44>

Typography

Bootstrap uses Helvetica Neue, Helvetica, Arial, 
and sans-serif in its default font stack. Using 
typography feature of Bootstrap you can create 
headings, paragraphs, lists and other inline 
elements.

Headings:

All HTML headings (h1 to h6) are styled in 
Bootstrap. An example is as shown below:

</div>
(45)<div class='page_container' data-page=45>

Typography

INLINE SUBHEADINGS:

To add an inline subheading to any of the headings, 
simply add around any of the elements or 
add .small class and you will get smaller text in a 
lighter color as shown in the example below:

<h1>I'm Heading1 h1. I'm secondary Heading1 
h1</h1>

<h2>I'm Heading2 h2. I'm secondary Heading2 
h2</h2>

<h3>I'm Heading3 h3. I'm secondary Heading3 
h3</h3>

<h4>I'm Heading4 h4. I'm secondary Heading4 
h4</h4>

<h5>I'm Heading5 h5. I'm secondary Heading5 
h5</h5>

</div>
(46)<div class='page_container' data-page=46>

Typography

LISTS:

Bootstrap

supports

ordered

lists,

unordered lists, and definition lists.



Ordered lists: An ordered list is a list that

falls in some sort of sequential order and is

prefaced by numbers.



Unordered lists: An unordered list is a list

that doesn’t have any particular order and

is traditionally styled with bullets. If you do

not want the bullets to appear then you can

remove the styling by using the class

</div>
(47)<div class='page_container' data-page=47>

Typography

Code with Example for Lists:
<h4>Example of Ordered

List</h4> 
<ol> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
</ol>

<h4>Example of UnOrdered 
List</h4>

<ul>

</ul>

</div>
(48)<div class='page_container' data-page=48>

Tables

Basic Table:

If you want a nice, basic table style with just

some light padding and horizontal dividers,

add the base class of .table to any table as

shown in the following example:

<caption>Basic Table Layout</caption> 
.

.
.

</div>
(49)<div class='page_container' data-page=49>

Tables

STRIPED TABLE :

By adding the .table-striped class, you will

get stripes on rows within the <tbody> as

seen in the following example:

<caption>Striped Table Layout</caption> 
.

</div>
(50)<div class='page_container' data-page=50>

Tables

BORDERED TABLE :

By adding the .table-bordered

class,

you

will

get

borders

surrounding

every

element

and

rounded corners around the entire

table as seen in the following

example:

<caption>Striped Table Layout</caption> 
.

</div>
(51)<div class='page_container' data-page=51>

Tables

HOVER TABLE :

By adding the .table-hover class,

a light gray background will be

added to rows while the cursor

hovers over them, as seen in the

following example:

<caption>Striped Table Layout</caption> 
.

</div>
(52)<div class='page_container' data-page=52>

Tables

RESPONSIVE TABLES:

By wrapping any .table in

.table-responsive class, you will make the table

scroll horizontally up to small devices (under

768px). When viewing on anything larger

than 768px wide, you will not see any

difference in these tables.

<caption>Responsive Table Layout</caption>
.

</div>
(53)<div class='page_container' data-page=53>

Forms

Here we will discuss, how to create forms

with ease using Bootstrap.

Form Layout:

Bootstrap provides you with following types

of form layouts:



Vertical (default) form



Inline form

</div>
(54)<div class='page_container' data-page=54>

Forms

VERTICAL OR BASIC FORM:

 Add a role form to the parent <form> element.

 Wrap labels and controls in a <div> with class

.form-group. This is needed for optimum spacing.

 Add a class of .form-control to all textual

<input>, <textarea>, and <select> elements.

<input type="text" class="form-control" 
id="name" placeholder="Enter

</div>
(55)<div class='page_container' data-page=55>

Forms

INLINE FORM :

To create a form where all of the elements are inline, 
left aligned and labels are alongside, add the class 
.forminline to the <form> tag.

<form class="form-inline" role="form">

<div class="form-group">

<label class="sr-only"

for="name">Name</label>

<input type="text" class="form-control"

id="name" placeholder="Enter Name">

</div>

</div>
(56)<div class='page_container' data-page=56>

Forms

HORIZONTAL FORM:

 Add a class of .form-horizontal to the parent <form>

element.

 Wrap labels and controls in a <div> with class

.form-group.

 Add a class of .control-label to the labels.

<label for="firstname" class="col-sm-2 control-label">First 
Name</label>

<input type="text" class="form-control"

id="firstname“ placeholder="Enter First Name">

</div> 
</div>

</div>
(57)<div class='page_container' data-page=57>

Buttons

</div>
(58)<div class='page_container' data-page=58>

Buttons

Following example demonstrates all the above 
button classes:

</div>
(59)<div class='page_container' data-page=59>

Images

Bootstrap provides three classes that

can be used to apply some simple styles to

images:



.img-rounded: adds border-radius:6px to

give the image rounded corners.



.img-circle: makes the entire image round

by adding border-radius:500px.

</div>
(60)<div class='page_container' data-page=60>

Images

The following example

demonstrates this:

</div>
(61)<div class='page_container' data-page=61>

Helper Classes

Close icon :

Use the generic close icon for dismissing content like 
modals and alerts. Use the class close to get the close 
icon.

Carets:

</div>
(62)<div class='page_container' data-page=62>

Navbar with Dropdown

</div>
(63)<div class='page_container' data-page=63>

Fix top navbar

</div>
(64)<div class='page_container' data-page=64>

Modal

</div>
(65)<div class='page_container' data-page=65>

Tab

</div>
(66)<div class='page_container' data-page=66>



Carousel



Tooltip



…



/>

rap4

</div>
(67)<div class='page_container' data-page=67>

Summary



Bootstrap Overview – Introduction



File Structure



Grid System



CSS Overview



Typography



Tables



Forms



Buttons



Images

</div>
(68)<div class='page_container' data-page=68></div>

9bootstraplibrary xuanhiens weblog

<b>Responsive </b>

<b>Design</b>

<b>Table of Contents </b>



<b>Responsive Design</b>



<b>Creating Responsive Design</b>



<b>Fluid Layout</b>



<b>Flexible Images and Fonts</b>



<b>Flexible Tables and Menus</b>



<b>Media Queries</b>



<b>Media Queries Everywhere</b>



<b>Constructing Responsive Design</b>

<b>Responsive Design</b>

<b>Responsive design </b>

<b>(adaptive design) is an </b>

<b>approach to optimize the viewing </b>

<b>experience on range of devices</b>



<b>Better user experience on mobile, desktop, </b>

<b>TV</b>



<b><sub>The UI depends on the device and device </sub></b>

<b>specifics</b>



<b><sub>Screen size</sub></b>



<b><sub>Screen resolution</sub></b>



<b>DPI</b>



<b><sub>Color range</sub></b>



<b><sub>Etc…</sub></b>

<b>Creating Responsive </b>

<b>Design</b>

<b>Creating Responsive </b>

<b>Design</b>

<b>Responsive design involves one or more </b>

<b>of the following:</b>



<b>Fluid layout</b>



<b><sub>Use proportional values for widths, </sub></b>

<b>margins, etc… </b>



<b>Flexible fonts</b>



<b><sub>Fonts based on the root</sub></b>



<b>Flexible images</b>



<b>Images cannot go beyond their container</b>



<b>Media queries</b>



<b>Apply styles based on the client screen size</b>

<b>Fluid Layout</b>

<b>Fluid Layout</b>

<b>Fluid layout uses proportional sizes</b>

<b>Pros:</b>



<b><sub>UI responds better to the client resolution</sub></b>



<b>Spares code on media queries</b>

<b>Cons:</b>



<b><sub>More whitespace on large screens (TV) </sub></b>

<b>Fluid Layout</b>

<b>Flexible Images</b>

<b>Fluid design gets broken when using </b>

<b>elements with fixed size</b>

