Bootstrap responsive web layout

• Chapter1 Bootstrap. User interface architecture
• 1-1 User interface and interaction architecture
• 1-2 Download Bootstrap
• 1-3 Included files
• 1-4 Using Bootstrap in web pages
• 1-5 layout
• 1-6 Nested layout and flowing layout
• 1-7 Responsive layout
• 1-8 Convert existing fixed-width layout to responsive layout
• 1-9 Utility classes for responsive layouts
• 1-10 Common tags and styles
• 1-11 list
• 1-12 code
• 1-13 Google Prettify
• 1-14 sheet
• 1-15 form
• 1-16 Prefixes and suffixes of text boxes
• 1-17 single button
• 1-18 checkbox
• 1-19 select list
• 1-20 Form layout
• 1-21 button
• 1-22 button group
• 1-23 button with dropdown menu
• 1-24 Navigation menu
• 1-25 Drop-down menu in navigation menu
• 1-26 Responsive design of navigation menu
• 1-27 Tab #1
• 1-28 Tab #2
• 1-29 Navigation paths and paginators
• 1-30 Prompt message
• 1-31 thumbnail
• 1-32 dialog box
• 1-33 tooltip
• 1-34 Collapse content
• 1-35 carousel
• Chapter2 Responsive web design
• 2-1 Course Introduction
• 2-2 Real-life examples of responsive design
• 2-3 viewport - viewport
• 2-4 Manually configure viewport
• 2-5 Pixel density
• 2-6 How to apply media queries
• 2-7 media type media type
• 2-8 meida feature media feature
• 2-9 aspect-ratio ratio of visual window width to height
• 2-10 aspect-ratio The ratio of the width to height of the device
• 2-11 orientation The direction of use of the device
• 2-12 height (visual window height) and device-height (device height)
• 2-13 width (visual window width) and device-width (device width)
• 2-14 resolution pixel density
• 2-15 Operator - and
• 2-16 Join multiple media queries separated by commas
• 2-17 Operator - not
• 2-18 Responsive layout #1
• 2-19 Responsive layout #2
• 2-20 Responsive layout #3
• 2-21 Responsive navigation
• 2-22 HTML for navigation menu
• 2-23 CSS for navigation menu
• 2-24 Toggle button style
• 2-25 Responsive navigation menu styles
• 2-26 Responsive images
• 2-27 Responsive background images
• 2-28 Different sizes of devices use different images
• 2-29 Use different background images for different size devices
• 2-30 Switch different background images based on screen density
• 2-31 picturefill
• 2-32 Responsive slideshow
• 2-33 Slide control buttons
• 2-34 Slide control button style
• 2-35 Fix the issue of slides being overwritten
• 2-36 Conclusion