What is responsive design?
Responsive design means creating a single website which responds to different screen sizes desktop browsers, small tablet screen size and smaller mobile devices perfectly. Responsive website responds to all size screen devices based on user viewport.
What are the responsive design patterns?
Responsive design patterns provide a consistent look and feel and responsiveness across desktop, tablet and mobile devices
There are following patterns for responsive design. These patterns are originally defined by Luke Wroblewski
Explain Mostly fluid pattern for creating responsive design
In mostly fluid pattern a web page with the multi-column layout structure doesn't change its core layout until the smallest visual breakpoint occurs. The core structure of web page remains same at large, medium and small devices. The structure of page changes at the smallest device and multi-column layout web page's column stacked vertically down.
In above diagram web page starts with 3 column structure. Web page structure remains same for large, medium and small devices. The structure changes at smallest screen size and column stacked vertically down.
Explain Column drop pattern.
In column Drop pattern a web page with multi-column layout drops a column after each visual breakpoint occurs or screen size gets smaller. Dropped column start stacking down and web page ends with single column layout and other columns stacked vertically down.
In above diagram web page starts with 3 column structure. As the screen size gets smaller the column starts dropping and results into 2 column structure and finally in 1 column structure.
What is layout shifter pattern to create a responsive design?
In this pattern, different layouts are used for different screen sizes. A multi-column layout at looks different in large screens and different in small devices. Below is the structure of this type of layout. Left navigation shifts to the top as the size of the screen gets smaller.
What is Tiny Tweaks design pattern?
This pattern is simplest pattern to implement. This pattern consists of single column structure with least functionality. This pattern's structure remains same throughout all devices. This pattern is helpful in creating simple informative websites.
What is Bootstrap?
Watch below video to learn more about bootstrap.
How to get bootstrap?
Bootstrap is open source and freely available for download. Bootstrap may be downloaded using below link
You can directly use bootstrap from
CDN. Include below links directly in your project
What is included in bootstrap download package?
Bootstrap provide 3 types of packages to download
Bootstrap download package includes following
Source code package includes following
Requires a Less compiler.
What are the components of Bootstrap?
Bootstrap provides dozens of components which are helpful to create modern and responsive web pages. Bootstrap components are itself responsive.
Major components provided by bootstrap are listed below