Nirmala Venkat: Created page with "{| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- || Slide1: Title || Welcome to the Spoken Tutorial on '''“Overview of Bootstrap”.''' |- ||Slide 2: Learning Ob..."

2021-12-02T10:03:38Z

Created page with "{| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- || Slide1: Title || Welcome to the Spoken Tutorial on '''“Overview of Bootstrap”.''' |- ||Slide 2: Learning Ob..."

New page

{| border="1"
|-
|| '''VISUAL CUE'''
|| '''NARRATION'''
|-
|| Slide1: Title
|| Welcome to the Spoken Tutorial on '''“Overview of Bootstrap”.'''
|-
||Slide 2:

Learning Objectives
|| In this tutorial we will learn about,
*'''Bootstrap'''
* Features of '''Bootstrap'''
* The content available in various tutorials under this series
|-
||Slide 3:

System Requirements
|| This tutorial is recorded using,
* '''Ubuntu Linux OS v 18.04 '''
|-
||Slide 4: Prerequisite

https://spoken-tutorial.org
|| To follow this tutorial, you should have basic knowledge of
* '''HTML'''
* '''CSS'''
If not, please go through the relevant''' '''spoken''' '''tutorials on this website.
|-
||Slide 5: About Bootstrap

|| '''About Bootstrap''':
* '''Bootstrap''' is an open-source and front-end framework.
* It includes '''CSS''' and '''HTML '''based designs.
* It is useful for easy and fast '''web development'''.
* It creates responsive '''web pages''' which automatically adjust as per screen size.

|-
||Slide 6: Features of Bootstrap

|| Features of '''Bootstrap:'''
* '''Time saving''': It has predefined design templates and '''classes''' which help save time.
* '''Responsive property''': It easily creates responsive '''web pages'''.
* '''Easy to use''': Basic knowledge of '''HTML '''and''' CSS '''are required.
* '''Open-source''': It is freely available.
* '''Browser compatibility''': It is compatible with all modern '''web browsers'''.
* '''Javascript Plugins:'''There are numerous '''JavaScript plugins''' bundled in the '''Bootstrap package'''.

|-
|| Slide 7: Note
|| Note:
* '''Bootstrap 4''' does not support '''Internet Explorer 9''' and lower versions.
* '''Bootstrap 3''' is used for them.
* In this course, we will use '''Bootstrap 4.'''

|-
||Slide 8:

Who can use Bootstrap?
|| '''Bootstrap''' can be used by
*'''Web designers'''
* '''Web developers '''and
*'''Software developers'''
|-
||
|| Now, we will briefly go through the individual tutorials in this series.
|-
||Slide 9:
“Introduction to Bootstrap”.
|| The first tutorial in this series is “'''Introduction to Bootstrap”.'''

In this tutorial, we will learn to
* Download and use '''Bootstrap''' version '''4.6.0 '''and
* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN link'''

|-
|| Show '''“Introduction to Bootstrap”'''
||Here is a glimpse of the tutorial.
|-
|| Slide 10:

Containers in Bootstrap
|| The next tutorial is “'''Containers in Bootstrap”.'''
It explains about
*'''Containers'''
* '''Breakpoints''' and
* Types of '''container classes''' such as

*'''.container'''
*'''.container-fluid'''
*'''.container-breakpoint'''
|-
|| Show “'''Containers in Bootstrap”'''
|Let’s have a brief look at this tutorial.
|-
|| Slide 11:

'''Grid System in Bootstrap'''

|| The next tutorial is “'''Grid System in Bootstrap”'''

Here, we will learn about:
*'''Row class'''
*'''Column class'''
*'''Column class with breakpoints'''
*'''12 Column class'''
*'''12 Column class with breakpoints'''

|-
|| Show “'''Grid System in Bootstrap”'''
|| Here is a glimpse of the tutorial.
|-
|| Slide 12:
'''Order and Offset classes in Bootstrap'''
|| The next tutorial is “'''Order and Offset classes in Bootstrap”.'''

In this tutorial, we will learn about:
* '''Order classes '''and
*'''Offset classes'''

while designing a '''layout'''.
|-
|| Show “'''Order and Offset classes in Bootstrap”.'''
|| Here is a glimpse of the tutorial.
|-
|| Slide 13:

'''Margin and Padding Classes in Bootstrap'''
||The next tutorial will explain “'''Margin and Padding Classes in Bootstrap”.'''

In this tutorial, we will learn about
* '''Margin classes''' and
*'''Padding classes'''

while designing a '''layout'''.
|-
|| Show “'''Margin and Padding Classes in Bootstrap”.'''

|| Let's have a look at this tutorial.
|-
|| '''Slide 14:'''
'''“Horizontal and Vertical Alignment Classes in Bootstrap”'''
|| The next tutorial is “'''Horizontal and Vertical Alignment Classes in Bootstrap”'''

Here, we will learn how to use:
* '''Horizontal alignment classes '''and
*'''Vertical alignment classes'''

for aligning columns in a row.
|-
|| '''Show “Horizontal and Vertical Alignment Classes in Bootstrap”'''
|| Here is a glimpse of the tutorial.
|-
|| '''Slide 15:'''

'''Typography in Bootstrap'''
|| The next tutorial is “'''Typography in Bootstrap”.'''
In this tutorial, we will learn how to use:
*'''Text Alignment'''
*'''Text Transform'''
*'''Font Weight and Italic'''
*'''Text Decoration'''
* '''Reset Color '''and
*'''Display headings'''

for styling and formatting text in '''Bootstrap'''.
|-
|| Show “'''Typography in Bootstrap”.'''
|| Here is a glimpse of the tutorial.
|-
|| Slide 16: “'''Color Classes in Bootstrap”.'''

|| The next tutorial is “'''Color Classes in Bootstrap”.'''

Here, we will learn about '''color''' '''classes''' for:
*'''Borders'''
*'''Text'''
* '''Links '''and
*'''Background'''

|-
|| Show “'''Color Classes in Bootstrap”'''
|| Let’s have a brief look at this tutorial.
|-
||
|| All the above topics are covered under the '''Basic level'''.

Next comes the '''Intermediate level''' tutorials.
|-
|| Slide 17:“'''Forms in Bootstrap”.'''

|| The first tutorial in the '''Intermediate level''' is “'''Forms in Bootstrap”.'''
In this tutorial, we will learn about:
*'''Form controls'''
*'''Help text'''
*'''Sizing'''
*'''Read-only plain text'''
* '''Checkboxes '''and''' radio buttons '''and
*'''File inputs'''
|-
|| Show “'''Forms in Bootstrap”.'''
|| Here is a glimpse of the tutorial.
|-
|| Slide: 18:

'''Input Group '''and '''Button''' '''in Bootstrap'''
|| Next tutorial is “'''Input Group '''and '''Button''' '''in Bootstrap”.'''
* '''Input group'''
*'''Input group sizing'''
*'''Button'''
*'''Button classes'''
*'''Outline button classes'''
* '''Disabled state button '''and
*'''Button sizes'''
|-
|| Show '''Input Group '''and '''Button''' '''in Bootstrap”.'''
|| Let’s have a brief look at this tutorial.
|-
|| Slide 19: “'''Inline Forms in Bootstrap”.'''

|| The next tutorial is “'''Inline Forms in Bootstrap”.'''
In this tutorial, we will learn about:
* '''Block level buttons '''and
*'''Inline forms'''

|-
|| Show “'''Inline Forms in Bootstrap”.'''
|| Here is a glimpse of the tutorial.
|-
|| Slide 20: “'''Nav and Navbar in Bootstrap”.'''

|| The next two tutorials are “'''Nav and Navbar in Bootstrap”.'''
Here, we will learn about:
*'''Navigation'''
*'''Navigation - methods'''
*'''Horizontal alignment'''
* '''Tabs '''and '''pills '''
* '''Fill '''and''' justify '''and''' '''
*Collapsible''' navbar '''

|-
|| Show “ '''Nav and Navbar in Bootstrap”.'''
|| Here is a glimpse of the tutorial.
|-
|| Slide 21: '''Dropdowns in Bootstrap”'''
|| The next tutorial is “'''Dropdowns in Bootstrap”.'''
In this tutorial, we will learn about:
*'''Dropdowns'''
*'''Dropdown classes'''
*'''Dropdown divider'''
*'''Dropdown position'''
|-
|| Show “'''Dropdowns in Bootstrap”'''
|| Let’s have a brief look at this tutorial.
|-
|| Slide 22:'''List Group in Bootstrap”.'''
|| The next tutorial is “'''List Group in Bootstrap”.'''
Here, we will learn about:
*'''List group'''
* '''Active '''and''' disabled item'''
* '''List group '''with''' links '''and''' buttons '''and
*'''Contextual classes'''
|-
|| Show '''List Group in Bootstrap”.'''
|| Here is a glimpse of the tutorial.
|-
|| Slide 23: '''Alert and Badge in Bootstrap”.'''

|| The next tutorial is “'''Alert and Badge in Bootstrap”.'''
In this tutorial, we will learn about:
* '''Alert '''and its '''classes'''
* '''Badge '''and its '''classes'''
* '''Badge '''as '''label'''
* '''Badge '''as '''counter '''and
*'''Badge pill'''

|-
|| Show '''Alert and Badge in Bootstrap”.'''
|| Let’s have a brief look at this tutorial.
|-
|| Slide 24: '''Jumbotron and''' '''Breadcrumb in Bootstrap”.'''

|| The last tutorial in this series is '''Jumbotron and''' '''Breadcrumb in Bootstrap”.'''

In this tutorial, we will learn about:
* '''Jumbotron '''and
*'''Breadcrumb'''

Here, we will display the contents such as '''heading, paragraph''', etc. using '''Jumbotron.'''In the '''Login''' page, we will add '''breadcrumb''' such as '''Home/Login'''.
|-
|| Show '''Jumbotron and''' '''Breadcrumb in Bootstrap”.'''
|| Here is a glimpse of the tutorial.
|-
||
||With this we have come to the end of this tutorial.

Let us now summarize.
|-
|| Slide 25:

Summary
|| In this tutorial, we have learnt:
* '''Bootstrap'''
* Features of '''Bootstrap '''and
* The content available in various tutorials under this series

|-
|| Slide 26:

About Spoken Tutorial project
||The video at the following link summarizes the Spoken Tutorial project.

Please download and watch it
|-
|| Slide 27: Spoken Tutorial Workshops
|| The '''Spoken Tutorial Project''' team:
*conducts workshops using spoken tutorials and
*gives certificates on passing online tests.

For more details, please write to us.
|-
|| Slide 28:

Answers for THIS Spoken Tutorial
||
*Do you have questions in THIS Spoken Tutorial?
*Please visit this site.
*Choose the minute and second where you have the question
*Explain your question briefly
*The Spoken Tutorial project will ensure an answer
*You will have to register to ask questions
|-
|| Slide 29 :

Forum for specific questions:

||
*The Spoken Tutorial forum is for specific questions on this tutorial.
*Please do not post unrelated and general questions on them.
*This will help reduce the clutter.
*With less clutter, we can use these discussions as instructional material.

|-
|| Slide 30:Acknowledgement
|| Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India.
|-
|| Slide 31 : Thanks
|| This is Nirmala Venkat from spoken tutorial project signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Overview-of-Bootstrap/English - Revision history

Nirmala Venkat: Created page with "{| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- || Slide1: Title || Welcome to the Spoken Tutorial on '''“Overview of Bootstrap”.''' |- ||Slide 2: Learning Ob..."