Bootstrap/C2/Overview-of-Bootstrap/English
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,
|
Slide 3:
System Requirements |
This tutorial is recorded using,
|
Slide 4: Prerequisite | To follow this tutorial, you should have basic knowledge of
If not, please go through the relevant spoken tutorials on this website. |
Slide 5: About Bootstrap | About Bootstrap:
|
Slide 6: Features of Bootstrap | Features of Bootstrap:
|
Slide 7: Note | Note:
|
Slide 8:
Who can use Bootstrap? |
Bootstrap can be used by
|
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
|
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
|
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:
|
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:
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
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:
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:
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:
|
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:
|
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”.
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
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:
|
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:
For more details, please write to us. |
Slide 28:
Answers for THIS Spoken Tutorial |
|
Slide 29 :
Forum for specific questions: |
|
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. |