Bootstrap Shan-Hung Wu CS, NTHU Landing Page HTML/CSS taught so - - PowerPoint PPT Presentation

▶
bootstrap
SMART_READER_LITE
LIVE PREVIEW

Bootstrap Shan-Hung Wu CS, NTHU Landing Page HTML/CSS taught so - - PowerPoint PPT Presentation

Dec 06, 2022 484 likes •934 views

Bootstrap Shan-Hung Wu CS, NTHU Landing Page HTML/CSS taught so far Bootstrap 4 (alpha 6) for the responsive grid layout and components Font Awesome for vector icons Balsamiq Mockups for UI mockups Google Forms for user

slide-1
SLIDE 1

Bootstrap

Shan-Hung Wu CS, NTHU

slide-2
SLIDE 2

Landing Page

  • HTML/CSS taught so far
  • Bootstrap 4 (alpha 6) for the

responsive grid layout and components

  • Font Awesome for vector icons
  • Balsamiq Mockups for UI

mockups

  • Google Forms for user survey
  • Google Analytics for page visit

tracking

2

slide-3
SLIDE 3

Outline

  • Bootstrap Overview
  • Layout

– Flexbox – Media Queries – Containers and Grid System

  • Components

3

slide-4
SLIDE 4

Outline

  • Bootstrap Overview
  • Layout

– Flexbox – Media Queries – Containers and Grid System

  • Components

4

slide-5
SLIDE 5

Bootstrap

  • One of the most popular web frameworks
  • Helps fast prototype a responsive website
  • You learn how to reuse predefined CSS classes

in HTML

  • Rather than write CSS/JS of your own

5

slide-6
SLIDE 6

Bootstrap 4

  • Mobile first
  • Leverages modern HTML5 and CSS3

– CSS compiled from Sass (just ignore it in docs)

  • Consistent behavior across supported

browsers

– Chrome, Firefox, IE 10+, iOS 7+, and Android 5+

6

slide-7
SLIDE 7

Using Bootstrap

  • Load CSS and Javascript files using CDN
  • Include the responsive meta tag:

<meta name="viewport" content="width=device- width, initial-scale=1, shrink-to-fit=no">

7

slide-8
SLIDE 8

Typography

  • See more examples

8

slide-9
SLIDE 9

Responsive Images

<img scr="..." class="img-fluid">

  • See more examples

9

slide-10
SLIDE 10

Buttons and Colors

<button class="btn btn-primary">Primary</button> <a href="..." class="btn btn-primary">Primary</a> btn-secondary btn-success btn-info btn-warning btn-danger

  • See more examples

10

slide-11
SLIDE 11

Fundamentals

  • Uses border-box in box-sizing

– Width & height include borders and paddings

  • Uses rem as default metrics

– Root font size: 16px

  • Native font stack

11

slide-12
SLIDE 12

Outline

  • Bootstrap Overview
  • Layout

– Flexbox – Media queries – Containers and grid system

  • Components

12

slide-13
SLIDE 13

Sizing

<div class="w-25"> w-50, w-75, w-100 h-25, h-50, h-75, h-100

slide-14
SLIDE 14

Spacing

<div class="mx-auto">Centered</div>

  • Margin/padding: m, p
  • Side: t, l, b, r, x, y
  • Size: auto, 0, 1, ..., 5 (*

0.25rem)

14

slide-15
SLIDE 15

Outline

  • Bootstrap Overview
  • Layout

– Flexbox – Media queries – Containers and grid system

  • Components

15

slide-16
SLIDE 16

Flexboxes

  • A new layout mode in CSS3

– Not box model

  • Flex container (a block):
  • Direct children are called flex items
  • Everything outside container and inside flex items

is rendered as usual

16

div { display: flex; }

slide-17
SLIDE 17

Flexboxes in Bootstrap

<div class="d-flex flex-row"> flex-row-reverse flex-column, flex-column-reverse

17

slide-18
SLIDE 18

Justification

<div class="d-flex justify-content-center"> justify-content-between justify-content-around

18

slide-19
SLIDE 19

Alignment

<div class="d-flex align-items-center"> align-items-start align-items-end Align-items-stretch

19

slide-20
SLIDE 20

Align Self

<div class="d-flex align-items-stretch"> <div> <div class="align-self-center"> <div>

20

slide-21
SLIDE 21

Outline

  • Bootstrap Overview
  • Layout

– Flexbox – Media queries – Containers and grid system

  • Components

21

slide-22
SLIDE 22

Media Queries

  • Introduced in CSS3
  • Define style rules only for specific devices
  • E.g.,

22

@media (min-width: 480px) { body { background-color: yellow; } }

slide-23
SLIDE 23

Breakpoints in Bootstrap

  • Based on width of device viewports
  • Stay consistent when using @media

23

Class Default (xs) sm md lg xl Width <576px >=576px >=768px >=992px >=1200px Devices Portrait phones Landscape phones Portrait tablets Landscape tablets, desktops Desktops

slide-24
SLIDE 24

Responsive Utilities

  • Many layout classes have responsive variants
  • E.g., <div class="mx-auto">...</div>

mx-sm-auto /* sm and up */ mx-md-auto /* md and up */ mx-lg-auto /* lg and up */ mx-xl-auto /* xl */

  • More responsive utilities

24

slide-25
SLIDE 25

Outline

  • Bootstrap Overview
  • Layout

– Flexbox – Media queries – Containers and grid system

  • Components

25

slide-26
SLIDE 26

Containers

  • The most basic layout element in Bootstrap

– Fixed-width in each breakpoint: container – Always 100%: container-fluid

26

<div class="container">...</div>

slide-27
SLIDE 27

Grid System

  • 12 columns in a container
  • By default, each column occupies as much space

as possible

27

<div class="container"> <div class="row"> <div class="col"> <div class="col"> <div class="col"> </div> </div>

slide-28
SLIDE 28

Setting Column Width

  • Set col-{breakpoint}-{width} in a

column

28

<div class="container"> <div class="row"> <div class="col-12 col-sm-8"> <div class="col-12 col-sm-4">

slide-29
SLIDE 29

Content-Based Column Width

29

<div class="row"> <div class="col"> <div class="col-auto"> <div class="col-2">

slide-30
SLIDE 30

Justification

  • Based on Flexbox

30

<div class="row justify-content-md-center"> <div class="col-md-2"> <div class="col-md-auto"> <div class="col-md-2">

slide-31
SLIDE 31

Alignment

31

<div class="row align-items-center"> <div class="col align-self-start "> <div class="col"> <div class="col align-self-end">

  • Read more about grid system
slide-32
SLIDE 32

Outline

  • Bootstrap Overview
  • Layout

– Flexbox – Media Queries – Containers and Grid System

  • Components

32

slide-33
SLIDE 33

Jumbotrom

33

slide-34
SLIDE 34

Navbar and Scrollspy

34

slide-35
SLIDE 35

Cards and Card Layout

35

slide-36
SLIDE 36

Modal

36

slide-37
SLIDE 37

To Learn More...

  • Documentation
  • Use Chrome Inspector!
  • Start Bootstrap

– Themes & Templates – Version 3 only (currently)

slide-38
SLIDE 38

Landing Page

  • HTML/CSS taught so far
  • Bootstrap 4 (alpha 6) for the

responsive grid layout and components

  • Font Awesome for vector icons
  • Balsamiq Mockups for UI

mockups

  • Google Forms for user survey
  • Google Analytics for page visit

tracking

38

slide-39
SLIDE 39

Icons

  • Font Awesome: vector icons as font

39

<button><i class="fa fa-thumbs-up"></i>...</button>

slide-40
SLIDE 40

Mockup Tools

  • Alternatives: Sketch, Adobe XD, etc.

40

slide-41
SLIDE 41

Google Forms

41

slide-42
SLIDE 42

Google Analytics

42

slide-43
SLIDE 43

You Can Do Better!

  • Animations
  • “Chat with Founders”

button via Facebook Page's Messenger

43