SS2 Bootstrap - Lecture notes 2 PDF

Preview

Summary

Self study guide...

Description

Semester 1, 2020

SELF-STUDY 2 BOOTSTRAP The learning activities in this self-study (a.k.a PRIOR to Tutorial) are designed to consolidate and extend your understanding of the topics covered in lectures in week 2. You should complete all activities and questions until the tutorial in week 3.

BOOTSTRAP One of the problems with basic HTML design is that the webpage may look different in different browser or device (such as mobile, laptop or tablet). Therefore, it was required to modify some code according to browser or device. Bootstrap can resolve this problem easily.

WHAT IS BOOTSTRAP Bootstrap is a framework which uses HTML, CSS and JavaScript for the web design. All the major browsers e.g., FireFox, Chrome, Safari, etc can support Bootstrap. Bootstrap also has several predefined classes for easy layouts including dropdown button, navigation bar and alerts etc. Using Bootstrap, you can easily build responsive designs (Responsive web design: creating web sites which automatically adjust and change their layout to look good on all devices from small phone to large desktops).

WHY USE BOOTSTRAP 1. 2.

3.

4.

Extremely popular: Widely used across the different companies and developers Easy to use: anybody with just basic knowledge of HTML and CSS can start using bootstrap. Additionally, it only requires single file of CSS and single file of JavaScript by removing a tone of codes. There are predefined classes for format using its lattice framework which are easily adaptable. Highly responsive: Bootstrap offers 12 column grid system, layouts and components so that it conforms itself relying on device resolutions of their customer. Responsive CSS adjusts automatically to phones, tablets, and desktops. Browser compatibility: Bootstrap 4 is compatible with all modern browsers.

HOW TO USE BOOTSTRAP There are two ways using Bootstrap 4 in your webpage by including it from CDN (Content Delivery Network) or downloading from getbootstrap.com (https://getbootstrap.com/ )

D OWNLOAD BOOTSTRAP You can download Bootstrap from getbootstrap.com to get the compiled CSS and JavaScript, source code. If you want to download and host Bootstrap 4, please go to https://getbootstrap.com/docs/4.4/gettingstarted/download/ and follow the instructions.

BOOTSTRAP 4 CDN You can include the CDN file to use Bootstrap 4. In this method, we do not need to download the files, but provide the links to these files(https://getbootstrap.com/docs/4.4/getting-started/introduction/) 1) Copy-paste the stylesheet into your before all other stylesheets to load our CSS.

1

Semester 1, 2020

2) Place following

FIGURE 1. STARTER TEMPLATE

CONTAINERS Containers are the basic layout element in Bootstrap and are required when using the default grid system. Container classes are used to wrap the page’s contents. There are three different containers: • •

.container – sets a max-width at each responsive breakpoint .container-fluid – sets width: 100% at all breakpoints

2

Semester 1, 2020

•

.container-{breakpoint} – set width:100% until the specified breakpoint.

.container

.container-fluid

Figure 2. part of code - container.html

FIGURE 3. OUTPUT OF CONTAINER.HTML

3

Semester 1, 2020

The table below illustrates how each container’s max-width compares to the original. Extra small...