Bootstrap responsive web layout
This Bootstrap tutorial explains how to apply responsive design to web layouts. In the course, you'll learn about responsive web design. With the popularity of mobile devices, how to allow users to browse your website through mobile devices to obtain good visual effects has become an inevitable problem. Responsive web design is an effective way to achieve this.
222386
person learning
71
class hour
2023-05-22
update time
03 Hours43 minutes25 seconds
Total course duration
You will learn
This tutorial explains how to apply responsive design to web layouts. In the course, you'll learn about responsive web design. With the popularity of mobile devices, how to allow users to browse your website through mobile devices to obtain good visual effects has become an inevitable problem. Responsive web design is an effective way to achieve this.
Bootstrap responsive web layout
Section1 User interface and interaction architecture
01 minutes44 seconds
Section2 Download Bootstrap
02 minutes15 seconds
Section3 Included files
02 minutes26 seconds
Section4 Using Bootstrap in web pages
05 minutes34 seconds
Section5 layout
04 minutes34 seconds
Section6 Nested layout and flowing layout
03 minutes50 seconds
Section7 Responsive layout
04 minutes21 seconds
Section8 Convert existing fixed-width layout to responsive layout
03 minutes38 seconds
Section9 Utility classes for responsive layouts
02 minutes59 seconds
Section10 Common tags and styles
03 minutes48 seconds
Section11 list
03 minutes30 seconds
Section12 code
03 minutes44 seconds
Section13 Google Prettify
02 minutes29 seconds
Section14 sheet
03 minutes24 seconds
Section15 form
04 minutes09 seconds
Section16 Prefixes and suffixes of text boxes
03 minutes14 seconds
Section17 single button
02 minutes16 seconds
Section18 checkbox
02 minutes17 seconds
Section19 select list
02 minutes42 seconds
Section20 Form layout
02 minutes53 seconds
Section21 button
03 minutes55 seconds
Section22 button group
02 minutes13 seconds
Section23 button with dropdown menu
03 minutes48 seconds
Section24 Navigation menu
05 minutes43 seconds
Section25 Drop-down menu in navigation menu
02 minutes07 seconds
Section26 Responsive design of navigation menu
02 minutes35 seconds
Section27 Tab #1
02 minutes42 seconds
Section28 Tab #2
03 minutes58 seconds
Section29 Navigation paths and paginators
04 minutes01 seconds
Section30 Prompt message
02 minutes43 seconds
Section31 thumbnail
03 minutes58 seconds
Section32 dialog box
04 minutes01 seconds
Section33 tooltip
03 minutes26 seconds
Section34 Collapse content
04 minutes45 seconds
Section35 carousel
03 minutes39 seconds
Chapter1 Bootstrap. User interface architecture
Section1 Course Introduction
01 minutes39 seconds
Section2 Real-life examples of responsive design
02 minutes33 seconds
Section3 viewport - viewport
01 minutes33 seconds
Section4 Manually configure viewport
04 minutes25 seconds
Section5 Pixel density
02 minutes49 seconds
Section6 How to apply media queries
01 minutes53 seconds
Section7 media type media type
04 minutes00 seconds
Section8 meida feature media feature
01 minutes43 seconds
Section9 aspect-ratio ratio of visual window width to height
03 minutes01 seconds
Section10 aspect-ratio The ratio of the width to height of the device
03 minutes34 seconds
Section11 orientation The direction of use of the device
02 minutes04 seconds
Section12 height (visual window height) and device-height (device height)
03 minutes20 seconds
Section13 width (visual window width) and device-width (device width)
03 minutes45 seconds
Section14 resolution pixel density
05 minutes09 seconds
Section15 Operator - and
04 minutes33 seconds
Section16 Join multiple media queries separated by commas
02 minutes13 seconds
Section17 Operator - not
03 minutes03 seconds
Section18 Responsive layout #1
03 minutes56 seconds
Section19 Responsive layout #2
02 minutes05 seconds
Section20 Responsive layout #3
02 minutes07 seconds
Section21 Responsive navigation
01 minutes52 seconds
Section22 HTML for navigation menu
04 minutes07 seconds
Section23 CSS for navigation menu
02 minutes46 seconds
Section24 Toggle button style
03 minutes08 seconds
Section25 Responsive navigation menu styles
04 minutes06 seconds
Section26 Responsive images
04 minutes07 seconds
Section27 Responsive background images
01 minutes43 seconds
Section28 Different sizes of devices use different images
00 minutes49 seconds
Section29 Use different background images for different size devices
03 minutes05 seconds
Section30 Switch different background images based on screen density
03 minutes14 seconds
Section31 picturefill
04 minutes40 seconds
Section32 Responsive slideshow
03 minutes50 seconds
Section33 Slide control buttons
02 minutes08 seconds
Section34 Slide control button style
03 minutes06 seconds
Section35 Fix the issue of slides being overwritten
01 minutes27 seconds
Section36 Conclusion
00 minutes31 seconds
Chapter2 Responsive web design
- Lecturer Other Courses
Free
Popular courses
JAVA Beginner's Video Tutorial
753 class hour
2982878
Little Turtle's zero-based introduction to learning Python video tutorial
60 class hour
547004
Quick introduction to web front-end development
8 class hour
220855
Master PS video tutorials from scratch
268 class hour
1004849
Latest courses
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
[Web front-end] Node.js quick start
16 class hour
16732
Complete collection of foreign web development full-stack courses
12 class hour
13533
Go language practical GraphQL
10 class hour
11186
550W fan master learns JavaScript from scratch step by step
1 class hour
1267
