Developing Responsive Websites With Bootstrap And J Query Trainer Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 111
| Download | |
| Open PDF In Browser | View PDF |
y
nl
O
se
U
Fo
rA
pt
ec
h
C
en
t
re
Developing Responsive Websites with
Bootstrap and jQuery
O
nl
y
Developing Responsive Websites with
Bootstrap and jQuery
se
Trainer’s Guide
U
© 2017 Aptech Limited
re
All rights reserved.
C
APTECH LIMITED
h
All trademarks acknowledged.
en
t
No part of this book may be reproduced or copied in any form or by any means – graphic, electronic or
mechanical, including photocopying, recording, taping, or storing in information retrieval system or sent
or transferred without the prior written permission of copyright owner Aptech Limited.
rA
pt
ec
Contact E-mail: ov-support@onlinevarsity.com
Fo
First Edition - 2017
Dear Learner,
y
We congratulate you on your decision to pursue an Aptech Worldwide course.
Scanning the user system and needs assessment
O
¾¾
nl
Aptech Ltd. designs its courses using a sound instructional design model – from
conceptualization to execution, incorporating the following key aspects:
se
Needs assessment is carried out to find the educational and training needs of
the learner.
re
U
Technology trends are regularly scanned and tracked by core teams at Aptech Ltd.
TAG* analyzes these on a monthly basis to understand the emerging technology
training needs for the Industry.
C
en
t
An annual Industry Recruitment Profile Survey# is conducted during August October to understand the technologies that Industries would be adapting in
the next 2 to 3 years. An analysis of these trends & recruitment needs is then
carried out to understand the skill requirements for different roles & career
opportunities.
Needs analysis and design of curriculum
ec
¾¾
h
The skill requirements are then mapped with the learner profile (user system) to
derive the Learning objectives for the different roles.
rA
pt
The Learning objectives are then analyzed and translated into learning tasks. Each
learning task or activity is analyzed in terms of knowledge, skills and attitudes
that are required to perform that task. Teachers and domain experts do this
jointly. These are then grouped in clusters to form the subjects to be covered by
the curriculum.
Fo
In addition, the society, the teachers, and the industry expect certain knowledge
and skills that are related to abilities such as learning-to-learn, thinking,
adaptability, problem solving, positive attitude etc. These competencies would
cover both cognitive and affective domains.
A precedence diagram for the subjects is drawn where the prerequisites for each subject are
graphically illustrated. The number of levels in this diagram is determined by the duration of
the course in terms of number of semesters etc. Using the precedence diagram and the time
duration for each subject, the curriculum is organized.
¾¾
Design & development of instructional materials
O
nl
y
The content outlines are developed by including additional topics that are
required for the completion of the domain and for the logical development of
the competencies identified. Evaluation strategy and scheme is developed for
the subject. The topics are arranged/organized in a meaningful sequence.
Strategies for delivery of instruction
U
¾¾
se
The detailed instructional material – Training aids, Learner material, reference
material, project guidelines, etc.- are then developed. Rigorous quality checks
are conducted at every stage.
en
t
re
Careful consideration is given for the integral development of abilities like thinking,
problem solving, learning-to-learn etc. by selecting appropriate instructional
strategies (training methodology), instructional activities and instructional
materials.
Assessment of learning
pt
¾¾
ec
h
C
The area of IT is fast changing and nebulous. Hence, considerable flexibility is
provided in the instructional process by specially including creative activities with
group interaction between the students and the trainer. The positive aspects of
Web based learning –acquiring information, organizing information and acting
on the basis of insufficient information are some of the aspects, which are
incorporated, in the instructional process.
Fo
rA
The learning is assessed through different modes – tests, assignments & projects.
The assessment system is designed to evaluate the level of knowledge & skills as
defined by the learning objectives.
¾¾
Evaluation of instructional process and instructional materials
The instructional process is backed by an elaborate monitoring system to evaluate
- on-time delivery, understanding of a subject module, ability of the instructor
to impart learning. As an integral part of this process, we request you to kindly
send us your feedback in the reply pre-paid form appended at the end of each
module.
*TAG – Technology & Academics Group comprises of members from Aptech Ltd., professors
from reputed Academic Institutions, Senior Managers from Industry, Technical gurus from
Software Majors & representatives from regulatory organizations/forums.
se
O
nl
y
Technology heads of Aptech Ltd. meet on a monthly basis to share and evaluate the
technology trends. The group interfaces with the representatives of the TAG thrice a year
to review and validate the technology and academic directions and endeavors of Aptech
Ltd.
U
Aptech New Products Design Model
re
Key Aspects
C
Evaluation of
Instructional
Processes and
Material
h
Scanning the user
system and needs
assessment
en
t
1
ec
2
Need Analysis
and design of
curriculum
rA
pt
Assessment of
learning
Fo
3
Design and
development of
instructional
material
4
Strategies for
delivery of
instructions
5
6
nl
y
“
se
O
“
Fo
rA
pt
ec
h
C
en
t
re
U
A little learning is a dangerous thing,
but a lot of ignorance is just as bad
Preface
se
O
nl
y
The book ‘Developing Responsive Websites with Bootstrap and jQuery’ Trainer’s Guide serves
understanding on new features and functionalities of Bootstrap framework and jQuery. The
faculty/trainer should teach the concepts in the theory class using the slides. This Trainer’s Guide will
provide guidance on the flow of the session and also provide tips and additional examples wherever
necessary. The trainer can ask questions to make the session interactive and also to test the
understanding of the students.
This book is the result of a concentrated effort of the Design Team, which is continuously striving to bring
you the best and the latest in Information Technology. The process of design has been a part of the ISO
9001 Certification for Aptech-IT Division, Education Support Services. As part of Aptech’s quality drive,
this team does intensive research and curriculum enrichment to keep it in line with industry trends.
Fo
rA
pt
ec
h
C
en
t
re
U
We will be glad to receive your suggestions.
Design Team
y
nl
O
se
U
re
en
t
C
h
ec
pt
rA
Fo
“
“
Practice is the best of
all instructors.
Table of Contents
Sessions
Basics of Bootstrap
2.
Understanding Programming in Bootstrap
3.
Basics of jQuery
4.
Functions, Widgets, Plugins in jQuery
5.
Creating Bootstrap Responsive Layout
6.
Creating Responsive Webpages Using Bootstrap and jQuery
Fo
rA
pt
ec
h
C
en
t
re
U
se
O
nl
y
1.
y
nl
O
se
U
re
en
t
C
h
ec
pt
rA
Fo
“
“
The future depends on what
we do in the present.
Developing Responsive Websites with Bootstrap and jQuery
Session 01: Basics of Bootstrap
1.1 Pre-Class Activities
nl
y
Before you commence the session, you should familiarize yourself with the topics of this
session in-depth. Prepare a question or two that will be a key point to relate the current session
objectives.
O
1.1.1 Objectives
re
U
Describe Bootstrap
Explain the basic concepts of Bootstrap
Describe the process of setting up Bootstrap
Outline the file structure and the default source code in Bootstrap
Use Bootstrap with CSS and JS
Describe the significance of Bootstrap templates
en
t
se
At the end of this session, you will be able to:
1.1.2 Teaching Skills
C
To teach this session, you should be well versed with the concepts of Bootstrap. You should be
familiar with the Bootstrap in detail. You should also know how to get started with Bootstrap
and its benefits over JavaScript.
pt
e
ch
You should teach the concepts in the theory class using the images provided. For teaching in
the class, you are expected to use slides and LCD projectors.
rA
Tips:
It is recommended that you test the understanding of the students by asking questions in
between the class.
In-Class Activities
Fo
Follow the order given here during In-Class activities.
Overview of the Session
Give the students an overview of the current session in the form of session objectives. Read out
the objectives given on slide 2.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
re
U
se
O
nl
y
Slide 2
1.2 In-Class Explanations
Fo
rA
pt
e
ch
C
en
t
Slide 3
Let us introduce Bootstrap.
Explain Bootstrap. Bootstrap is used to make simple and quick front end development of Web
applications. Explain students that Bootstrap helps in saving time in designing the Webpages by
styling elements. It reduces the burden of writing custom CSS classes of the Webpages
elements by including Bootstrap files and predefined class names.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
re
U
se
O
nl
y
Slide 4
Let us understand about components of Bootstrap.
en
t
Elaborate each component of Bootstrap in detail using slide 4.
CSS Framework: CSS is used for applying styles to the elements of the Webpage. You can use
them by including the classes and thus, assigning classes to the elements.
ch
C
Templating System: Bootstrap is a templating system, which provides template for Websites.
This will help the Web developers or designers in reducing time in writing entire code for each
page. Bootstrap templates can be used directly.
Fo
rA
pt
e
JS Toolkit: JavaScript Toolkit helps in including js files that will reduce time in writing code. It is
just drag and drop facility.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
U
se
O
nl
y
Slides 5 to 8
Let us understand about benefits of Bootstrap.
Fo
rA
pt
e
ch
C
en
t
re
Tell the students benefits of Bootstrap point wise and explain each one using slide 5.
1. Easy and Flexible: Bootstrap is very easy to use and adaptable to different Web projects.
It is very quick and responsive. It reduces time by dragging and dropping the elements
instead of writing the code for each element.
2. 100% Responsive Designs: It should be responsive to each Internet enabled devices. For
example, it should fit to the screen of devices – smartphones, tablets, laptops, and
desktops. It should be easy adaptive to screens with smooth appearance and easy
navigation. This is achieved through Fluid container, which readjusts its width
dynamically to screen resolution.
3. Great Grid System: Bootstrap has 12 column and responsive grid. This grid system
supports offset and nested elements.
© APTECH LIMITED
Continue explaining benefits of Bootstrap using slide 6.
U
se
O
nl
y
Developing Responsive Websites with Bootstrap and jQuery
en
t
re
4. Better Development Speed: Bootstrap provides already written block of code to developers
for designing Webpages. Thus, this helps in reduce time in designing and making Bootstrap
even more efficient. Back-end developers can merge the readymade blocks with cross browser
compatibility and CSS-Less functionality will help in saving lot of time.
ch
C
5. Browser Compatibility: Bootstrap helps in resolving cross-browser compatibility issues. With
the help of containers the screen width readjusts itself with smooth navigation and no pixels
distortion. Web applications developed in Bootstrap will help in smooth running in many Web
browsers.
Fo
rA
pt
e
6. Customization: Bootstrap can be used as per distinct design requirements. Developers can
select and deselect the aspects as per requirements during customization. It is available on
custom page, including CSS components, JS components, and utilities.
© APTECH LIMITED
U
se
O
nl
y
Developing Responsive Websites with Bootstrap and jQuery
en
t
re
Continue explaining benefits of Bootstrap using slide 7.
7. Consistency: At first, the twitter team expanded framework to improve the consistency
across the internal tools. Later, the co-founder Mark Otto released first version of open source
Bootstrap framework.
ch
C
8. Big Support: Bootstrap provides a big supportive community that help Web developers with
any sort of help at any point of time. Apart from this, the makers of Bootstrap keep the
framework updated. Give students an idea about GitHub. GitHub is a Web based version
control repository and Internet hosting service. It provides all the distributed version control
and source code management functionality. Currently, it is being hosted on GitHub with 500
contributors.
pt
e
Note: Bootstrap is the free open source framework. You need not to pay anything, it is available
for free.
Fo
rA
9. Bundled JavaScript Components: This framework has a set of JS components that use for UI
components. Name a few examples to students such as – tooltips, alerts, and modal windows.
A tooltip is also known as infotip or as a hint. It is a user interface element which appears when
a user hovers the pointer or cursor on an item. An alert is a dialog box that gives warning
message to the users. Modal window is a pop up window that appears on the top of the current
page.
© APTECH LIMITED
Continue to explain benefits of Bootstrap using slide 8.
U
se
O
nl
y
Developing Responsive Websites with Bootstrap and jQuery
en
t
re
10. Simple Integration: Bootstrap has the added advantage of integrating with other
frameworks and platforms. It can also use existing CSS files.
11. Extensive Pre-styled components: Bootstrap has pre-styled components such as dropdowns, alerts, and navigation bars. Developers need not to write code for such components.
Fo
rA
pt
e
ch
C
Slide 9
Let us understand about setting up Bootstrap.
Explain students, how to set up BootStrap using slide 9.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
Bootstrap is very easy to download and available for free. Tell the students that there are two
ways to start using the framework on a Website:
1. Download from getbootstrap.com
y
2. Including it from Content Delivery Network
en
t
re
U
se
O
nl
Slide 10
Let us understand steps to download Bootstrap.
C
Explain students the steps for downloading Bootstrap from getbootstrap.com Website using
slide 10.
Fo
rA
pt
e
ch
1. Go to the site getbootstrap.com
2. Click the button ‘download Bootstrap’
3. Select an option from download page:
a) Download Bootstrap: It allows the precompiled, mini versions of CSS, fonts, and
JavaScript downloads excluding original files of source code or documentation. It
provides drag and drop facility rather than writing code for each element. It also
includes complied CSS, JS files, mini complied versions, Bootstrap theme, and
Glyphicon fonts.
b) Download Source: It is the source code version of Bootstrap. It provides
downloading latest documentation and JS source code from GitHub. It consists of
precompiled CSS and JS files, font files, and Bootstrap Less assets.
c) Download Sass: It is the latest Bootstrap version which is imported from LESS to
SASS. It is only for Sass projects.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
U
se
O
nl
y
Slide 11
Let us understand about Content Delivery Network (CDN).
re
Define CDN to students using slide 10.
en
t
Content Delivery Network is a system of network of distributed servers which delivers
Webpages and Web content to client locations. Basically, CDN is for the developers who do not
intend to host the framework by themselves. It focuses on quick delivery of Web content to
global sites and high traffic sites.
Fo
rA
pt
e
ch
C
Slide 12
Let us understand about file structure and source code.
Explain students the file structure and source code of Bootstrap framework using slide 12.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
After downloading the Bootstrap with precompiled version, there will be a zip file that will be
containing all the directories and files. Once the file is extracted, the content will be visible in
the form of structured css, js, and fonts directories. CSS is a cascading style sheet files. JS is java
script files. Font directories consist of all the fonts.
en
t
re
U
se
O
nl
y
Slide 13
Let us understand about the file structure of precompiled Bootstrap version.
C
Read out the list of file names of precompiled Bootstrap file structure using slide 13.
Fo
rA
pt
e
ch
Slide 14
Let us understand about the file structure of Bootstrap.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
pt
e
U
ch
C
en
t
re
Slide 15
Let us understand about default Bootstrap template.
se
O
nl
y
Tell students that there are few user interface elements that are offered by components and JS
plugins using slide 14. These are listed as follows:
1. Button groups and button drop-downs
2. Page headers and hero unit
3. Navbar
4. Navigational tabs, pills, and lists
5. Labels
6. Thumbnails
7. Badges
8. drop-down
9. Tooltips
10. Alerts
11. Modals
12. Progress bars
Fo
rA
Explain students about the default Bootstrap template code and describe few tags or attributes
of HTML code using slide 15.
1. tag: It ensures the depiction and touch zooming on the Internet-enabled mobile
gadgets.
2. Width: This ensures the screen resolution of the page of the device that fits
appropriately. You can set its value as ‘device-width’ that will fit into the screen of the
target device such as tablets, smartphone, desktops.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
U
se
O
nl
y
Slide 16
Let us understand MaxCDN Code.
en
t
re
Describe this code snippet to students using slide 16. First describe MaxCDN to students
mentioning that it is a CDN provider which provides desired JS and CSS files for working easily
with Bootstrap.
In this snippet, the links are referring to MaxCDN under the head tag of different versions.
Fo
rA
pt
e
ch
C
Slide 17
Let us understand about Bootstrap with CSS.
Explain students the difference of Bootstrap version 3 over version 2 using slide 17. Tell the
students that the zooming can be disabled on any mobile device.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
pt
e
U
ch
C
en
t
re
Slides 18 and 19
Let us understand about Bootstrap with JavaScript.
se
O
nl
y
In Bootstrap, containers are the containing elements that contain contents of Websites and a
grid system. These containers are non-nestable that is, no other container can include another
container. It is of two types: Fixed and Fluid.
Describe each container in detail with examples:
1. Fixed Container: It has a preset width of layout of Webpage which remains constant and
does not change across different screens and browsers. It does not vary with change in
resolution. For example, In a whole page’s layout, which is known as viewport, of width
960 pixels and each column has a preset width that does not change in fixed container.
When a user changes the browser’s window or shrinks it to, suppose, 959 pixels then
the container changes to a new layout on a media query.
2. Fluid Container: It does not have a preset width such as in fixed container. It changes its
width as there is a change in the size of browser or screen. For example, When a user
resizes the browser window then each column of the container adjusts its width
according to calculated relative size that is, 25% with 100% layout’s width.
Fo
rA
Explain students about Bootstrap with JavaScript using 18. Web developers can include JS
plugins by two ways – By using *.js files individually and by including bootstrap.js file or
bootstrap.min.js file all at once.
Then tell students that there are again two ways of using JS plugins. One is through data
attributes and other is via JavaScript.
Now, explain each method to the students by giving example or showing them code snippets:
1. Data Attributes – Developers can utilize all the Bootstrap plugins through Application
Programming Interface, short for APIs. In some cases, data attribute APIs need to be
disabled.
Explain the code snippet to students.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
pt
e
ch
C
en
t
re
U
se
O
nl
y
Code Snippet:
$('body').off('.data-api') – This will frees all the events on the body with the namespace ‘dataapi’.
$('body').off('.alert.data-api') – This will turn OFF the functionality for a specific plugin ‘alert’.
2. JavaScript API – This is another way to use Bootstrap plugins. API is chainable method
that returns a collection. This method should receive an object which is optional called
options. This object is of string type. When this object is null, this means that this
method is not receiving anything and hence, the method with a default behavior.
Explain the code snippet to students.
Code Snippet:
$("#newModal").modal('show') – In this method, ‘show’ is the string object to display the
modal dialog immediately.
$("#newModal").modal() – This is the default method initialization.
Fo
rA
Explain students about events and transitions in Bootstrap using slide 19.
Events: These are custom events and are used to handle different actions of plugins. These are
of two types of forms: Infinitive, and Past Participle. Infinitive form is invoked at the beginning
of the event.
Transitions: It is recommended for Web developers to use transition.js file to apply basic
transition effects. This file will not be required if developers are using compiled bootstrap.js file
already.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
U
se
O
nl
y
Slide 20
Let us understand about Bootstrap Templates.
Fo
rA
pt
e
ch
C
en
t
re
Explain students about Bootstrap templates using slide 20.
Bootstrap template is basically a mock Website used by the Web designers for designing using
Bootstrap framework. There are few components of Bootstrap template, they are:
1. JavaScript Code
2. CSS Code
3. HTML pages
4. Fonts
5. Design images
Now, explain the students with an example, this will give a good understanding.
For example, For an e-commerce Website, the template will have product category page, cart
page, contact us page, and customer testimonial page. All these pages are standard pages for
any e-commerce site.
There are different versions of Bootstrap templates. These have few characteristics:
1. Responsive
2. Easy customization
3. Ready to use
4. Reusable
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
Fo
rA
pt
e
ch
C
en
t
re
U
se
O
nl
y
Slides 21 to 23
Let us summarize the session.
© APTECH LIMITED
U
se
O
nl
y
Developing Responsive Websites with Bootstrap and jQuery
re
Using slides 21 to 23 summarize the important topics learnt at the end of this session. Use
these pointers to reinforce some essential concepts and provide a quick recap.
en
t
Next, let us check your understanding of the topics covered so far in this session.
1.3 Post Class Activities for Faculty
Fo
rA
pt
e
ch
C
You should familiarize yourself with the topics of the next session.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
Session 02: Understanding Programming
in Bootstrap
Pre-Class Activities
y
2.1
O
nl
Before you commence the session, you should familiarize yourself with the topics of this
session in-depth. Prepare a question or two that will be a key point to relate the current session
objectives.
se
2.1.1 Objectives
U
At the end of this session, you will be able to:
en
t
re
Use different Bootstrap components
Write programs in Bootstrap
Apply CSS and JavaScript to Bootstrap components
2.1.2 Teaching Skills
ch
C
To teach this session, you should be well versed with the programming in Bootstrap. You should
be familiar with the Bootstrap programming in detail. You should also know about CSS,
JavaScript, and how to write programs in Bootstrap.
pt
e
You should teach the concepts in the theory class using the images provided. For teaching in
the class, you are expected to use slides and LCD projectors.
rA
Tips:
It is recommended that you test the understanding of the students by asking questions in
between the class.
In-Class Activities
Fo
Follow the order given here during In-Class activities:
Overview of the Session
Give the students an overview of the current session in the form of session objectives. Read out
the objectives given on slide 2.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
U
se
O
nl
y
Slide 2
re
2.2 In-Class Explanations
Fo
rA
pt
e
ch
C
en
t
Slide 3
Let us understand about components of Bootstrap.
Describe the components of Bootstrap. Elaborate each point in detail using slide 3.
1. Bootstrap is a collection of Less stylesheets that basically utilize all the different
components.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
O
5.
nl
y
2.
3.
4.
Then, it compiles them into a bundle that is used in adding to Webpages where each
section can be removed or replaced. These stylesheets also provide standard style
definitions for HTML components.
There are group of configuration variables which regulates components’ visible features.
Each component consists – html structure, CSS code, and associated JS.
Bootstrap offers variety of JS components that are available as jQuery plugins. They
offer additional elements such as carousels, alerts, modals, popovers, tooltips, dialog
boxes, and drop-down.
All the latest versions of browsers are supported by Bootstrap 3. Some are mentioned –
Firefox, Opera, Chrome, IE, and Safari. The advantage of Bootstrap components is that
they are adaptive and hence, render themselves as per different browsers.
pt
e
ch
C
en
t
re
U
se
Slide 4
Let us understand about layout components.
Name the layout components of Bootstrap to the students using slide 4.
Glyphicons
Navbars
Input Groups
Pagination
Page Header
Badges
Panels
List Groups
Progress bars
Fo
rA
1.
2.
3.
4.
5.
6.
7.
8.
9.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
re
U
se
O
nl
y
Slide 5
Let us understand about Glyphicons.
Fo
rA
pt
e
ch
C
en
t
Explain to students about glyphicon component of Bootstrap using slide 5. Brief them:
1. There are more than 250 glyphs or fonts in Bootstrap
2. They are available in ‘Glyphicons Halfling’ of ‘font’ folder
3. They need a base as well as individual icon class
4. The syntax for using Glyphicon is mentioned on the slide. Explain each keyword in brief
to the students for better understanding.
a) Glyphicon: it is the base class
b) Glyphicon-name: it is an individual icon class. Basically, it uses unicode font
reference in glyphicons halfling.
c) Name: Here, we use the exact glyphicon name.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
U
se
O
nl
y
Slide 6
Let us understand about how to use glyphicons in programming.
en
t
re
Show the students the example of using glyphicons using slide 6.
In the first image, the sample code is written. To use a glyphicon, nested span tag is used as
shown in the sample code.
Envelope icon:
Now, check the second image on slide 6, in which the output of the code is shown.
Fo
rA
pt
e
ch
C
Note: 1. The aria-hidden attribute should be set to true to prevent any kind of unwanted or
confusing output by a screen reader.
2. .sr-only class for hiding the additional content on a Webpage but making it available for a
screen reader to read.
© APTECH LIMITED
Developing Responsive Websites with Bootstrap and jQuery
U
se
O
nl
y
Slide 7
Let us understand about Navbars.
Fo
rA
pt
e
ch
C
en
t
re
Explain to students about navbars which is short form for Navigation bars.
1. It is a responsive navigation header that is appearing on the top of the Webpage.
2. It is adaptive or collapsible – because it can adjust the as per the size of the targeted screen
in Bootstrap.
3. It can contain – links, drop-downs, buttons, icons, or may be combination of these elements.
4. It can be aligned left or right by the Web developers.
5. Basically, when the width of the viewport increases then the navbars are set horizontally.
Now, explain the syntax to the students.