308221 introduction to bootstrap 4

Bootstrap 4 (Part I)Introduction, Grid system, Images, Icons

308-221 Information and Communication Technology Integrated Laboratory I (1/2558)

Simplicity is the ultimate sophistication

Leonardo da Vinci

W O R A P O T J A K K H U PA N , P H DW O R A P O T . J @ P S U . A C . T H R O O M B S C . 0 4 0 6 / 7

I n f o r m a t i o n a n d C o m m u n i c a t i o n T e c h n o l o g y P r o g r a m m e , F a c u l t y o f S c i e n c e , P S U

mailto:[email protected]

ICT@PSU 308-221 Information and Communication Technology Integrated Laboratory I 2 of 25

• Realize the problem of displaying website on diverse screen sizes and devices

• Understanding the concept of Responsive Web Design

• Be able to develop a website using Bootstrap 4

Objectives


Responsive web design is the practice of building

a website suitable to work on every device and

every screen size, no matter how large or small, mobile or desktop.


Content is like water


Responsive Web requires three components…

• Flexible Layout

• Flexible layout is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width.

• Flexible layouts do not support the use of fixed measurement units, such as pixels or inches. Flexible grids are built using relative length units, most commonly percentages or em units.

• Media Queries

• Media queries provide the ability to specify different CSS styles for individual browser and device circumstances, the width of the viewport or device orientation for example.

• Being able to apply uniquely targeted styles for the diverse of circumstances, such as screen size or device orientation.

• Flexible Medias

• Images, videos, and other media types need to be scalable, changing their size as the size of the viewport changes.


Media Queries

@media screen and (min-width: 400px { }




@media all and (orientation: landscape) { ... }

@import url(styles.css) all and (max-width: 1024px { }


Bootstrap

• Bootstrap is the world’s most popular framework for building responsive, mobile-first sites and applications.

• Inside you’ll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.

• Bootstrap's CSS files will automatically apply various styles to your HTML elements.

• Bootstrap: Get it• http://getbootstrap.com/

• Files: bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js


jQuery

• jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

• With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

• We will use jQuery next week.


Basic HTML Structure

<html lang=“th”>

<head>

<meta charset=“utf-8" />

<title>Title</title>

</head>

<body>

<!– Website Contents –>

</body>

</html>

Meta Element

Tag HTML

Tag head

Tag body


Install jQuery and Bootstrap<html>

<head>

<meta charset="utf-8" />

<title>Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="bootstrap/css/bootstrap.css">

</head>

<body>

<!– Website Contents –>

<script src=“bootstrap/js/jquery/2.1.4/jquery.min.js"></script>

<script src="bootstrap/v4-dev/dist/js/bootstrap.js"></script>

</body>

</html>

Install CSS into <head>

after <meta>

Install JavaScript right

before </body> and

make sure that jQuery

is placed first

Make sure the website

is mobile first using

meta viewport


Responsive breakpoints

• Bootstrap supports five minimum viewport widths• Extra small (xs) devices (portrait phones, less than ???px)• // No media query since this is the default in Bootstrap• Small devices (sm) (landscape phones, 34em and up)• @media (min-width: 34em) { ... }• Medium devices (md) (tablets, 48em and up)• @media (min-width: 48em) { ... }• Large devices (lg) (desktops, 62em and up)• @media (min-width: 62em) { ... }• Extra large (xl) devices (large desktops, 75em and up)• @media (min-width: 75em) { ... }

1em

= 1

6px

min

-wid

th =

big

ger

than

max

-wid

th =

sm

alle

r th

an


Grid system

• Bootstrap includes a powerful mobile-first 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.

• There are three major components—containers, rows, and columns.• Containers—.container for fixed width or .container-fluid for full width—center

your site’s contents and help align your grid content.

• Rows are horizontal groups of columns that ensure your columns are lined up properly.

• Content should be placed within columns, and only columns may be immediate children of rows.


Grid for Stacked-to-horizontal<div class="row">

<div class="col-md-1">.col-md-1</div>












</div>

<div class="row">



</div>

<div class="row">



<div class="col-md-4">.col-md-ภ</div></div>

<div class="row">



</div>

Using a single set of .col-xs-*, .col-sm-*, .col-md-*, .col-lg-* and .col-xl-* grid classes inside a row

To fully fill the columns inside a row, the total column

ratio should be 12, for example .col-md-8 + .col-md-4 =

.col-md-12 (as row 2 shown in the example)


Grid for mixed devices (Mobile and desktop)

<div class="row">

<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>


</div>

<div class="row">




</div>

<div class="row">

<div class="col-xs-6">.col-xs-6</div>

<div class="col-xs-6">.col-xs-6</div>

</div>

md and bigger devices

device smaller than md


Images

<img src="..." class="img-responsive">

Image shapes

<img src="..." class="img-rounded"> <img src="..." class="img-circle"> <img src="..." class="img-thumbnail">

Aligning images<img src="..." class="img-rounded pull-left"> <img src="..." class="img-rounded pull-right">

<img src="..." class="img-rounded center-block" style="display: block;">

<div class="text-center"> <img src="..." class="img-rounded" alt="...">

</div>


Font Awesome Icons

• Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.• Originally designed for Bootstrap, Font Awesome works great

with all frameworks.

• Fewer compatibility concerns because Font Awesome doesn't require JavaScript.

• Scalable vector graphics means every icon looks awesome at any size.

• Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.


More than 500++ icons


Easy to install and use

Choice 1 : Paste the following code into the <head> section of your site's HTML. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Choice 2 : Use this method to get the default Font Awesome CSS.1. Copy the entire font-awesome directory into your project.

2. In the <head> of your html, reference the location to your font-awesome.min.css.

3. Check out the examples to start using Font Awesome!

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<i class="fa fa-amazon"></i>

https://fortawesome.github.io/Font-Awesome/icons/


Today… Create a website describes yourself


Challenge…

• Rotate the image using CSS3 Transform property

#mypic:hover {

transform:rotate(-30deg);

}

#mypic {

transition-duration:1s;

}

Visithttp://www.webbookthai.com/category/bootstrap/

You can find inspiration in everything

And if you can’t, look again

Paul Smith


http://www.webbookthai.com/category/bootstrap/