Bootstrap/C2/Overview-of-Bootstrap/English

From Script | Spoken-Tutorial
Jump to: navigation, search
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.

Contributors and Content Editors

Nirmala Venkat