User interface and interaction architecture

Download Bootstrap

Included files

Using Bootstrap in web pages

layout

Nested layout and flowing layout

Responsive layout

Convert existing fixed-width layout to responsive layout

Utility classes for responsive layouts

Common tags and styles

list

code

Google Prettify

sheet

form

Prefixes and suffixes of text boxes

single button

checkbox

select list

Form layout

button

button group

button with dropdown menu

Navigation menu

Drop-down menu in navigation menu

Responsive design of navigation menu

Tab #1

Tab #2

Navigation paths and paginators

Prompt message

thumbnail

dialog box

tooltip

Collapse content

carousel

Course Introduction

Real-life examples of responsive design

viewport - viewport

Manually configure viewport

Pixel density

How to apply media queries

media type media type

meida feature media feature

aspect-ratio ratio of visual window width to height

aspect-ratio The ratio of the width to height of the device

orientation The direction of use of the device

height (visual window height) and device-height (device height)

width (visual window width) and device-width (device width)

resolution pixel density

Operator - and

Join multiple media queries separated by commas

Operator - not

Responsive layout #1

Responsive layout #2

Responsive layout #3

Responsive navigation

HTML for navigation menu

CSS for navigation menu

Toggle button style

Responsive navigation menu styles

Responsive images

Responsive background images

Different sizes of devices use different images

Use different background images for different size devices

Switch different background images based on screen density

picturefill

Responsive slideshow

Slide control buttons

Slide control button style

Fix the issue of slides being overwritten

Conclusion