Keywords

These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.

Responsive web design (RWD) refers to the approach of developing a web application such that it displays well on any size screen, from desktop computer to mobile phone. A computer, phone, or tablet screen is composed of pixels. A popular screen resolution for a computer is 1366 × 768. That means the screen is 1366 pixels wide and 768 pixels high. Screen resolution determines the clarity with which text and images are displayed. Items appear sharper at higher resolutions. They also appear smaller, which enables more items to fit on screen. When viewed on a tablet the screen may only have 1024 pixels across. A phone has maybe 480 pixels across. Creating a web page so that it displays nicely on different devices is known as making your web page responsive. In the past, developers actually created multiple websites for different devices.

BootStrap ( http://getbootstrap.com ) is a library for developing responsive web applications. It allows you to quickly develop an application interface without spending lots of time learning HTML , CSS , or JavaScript. BootStrap requires jQuery to function. You can implement BootStrap by adding the following to your project:

BootStrap makes its code available via a content delivery network (CDN) . That means the latest version of BootStrap is stored on servers scattered around the world. Your page can retrieve the latest version by including a link to the BootStrap CDN in the HEAD section of your page.

Working with BootStrap

Developers like yourself create code. Designers make the interface look nice. But not every project has a designer. Sometimes that job is also yours. Congratulations!

You have a secret weapon. BootStrap is the most popular HTML, CSS, and JS framework for developing responsive mobile-first projects on the web. BootStrap is a library. It uses HTML, CSS , and JavaScript. It contains design templates for typography, forms, buttons, navigation, and other interface components.

BootStrap allows you to create responsive web pages. Responsive web pages adapt their layout to different devices. Without responsive design, you would have to develop different pages for different devices. BootStrap solves that problem and ends the madness. It is based on a 1170-pixel-wide, 12-column layout. You can set attributes for different devices (and resolutions) in your HTML tags. Listing 18-1 shows an example of a three-column layout that would go in the body of your page. You can easily add additional columns using div tags. Place your content in the body element.

Listing 18-1 BootStrap Starter Template

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8"/>     <meta name="viewport"         content="width=device-width,         initial-scale=1, shrink-to-fit=no">     <!-- Bootstrap CSS -->     <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/         bootstrap/4.0.0-beta/css/bootstrap.min.css">   </head>   <body>     <h1>Hello, world!</h1>     <script src= https://code.jquery.com/jquery-3.2.1.slim.min.js/>     <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"> </script>     <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"> </script>   </body> </html>