Nirmala Venkat at 10:02, 7 September 2021

2021-09-07T10:02:45Z

Nirmala Venkat at 09:53, 7 September 2021

2021-09-07T09:53:56Z

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

2021-08-30T13:12:01Z

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

New page

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

Learning Objectives
|| In this tutorial, we will learn about:
* '''Dropdowns'''
* '''Dropdown classes'''
* '''Dropdown divider'''
* '''Dropdown position'''

|-
|| Slide 3:
System Requirements
|| This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

|-
|| Slide 4: Prerequisite
https://spoken-tutorial.org
||
* To follow this tutorial, you should be familiar with '''HTML''', '''CSS, JavaScript '''and''' JQuery.'''
* If not, please go through the relevant''' '''tutorials on this '''website'''.
|-
|| [Firefox- Mypage.html]
|| In this tutorial, we will create a '''dropdown''' using '''Bootstrap classes'''.

We will create a '''dropdown''' on the '''“Products”''' link.

On clicking it, these '''dropdown menu items''' will become visible.

Let’s see how to create this.
|-
|| Slide: Dropdowns
|| '''Dropdowns''' can be expanded and collapsed i.e they open and close, on a '''click'''.

They are generally used for displaying lists of '''options''' and '''links'''.

They can be created on '''anchor''' or '''button''' elements.
|-
|| Point to Mypage.html in My-bootstrap folder
|| Locate the file '''Mypage.html '''in the '''My-bootstrap''' folder.

We will use the '''Mypage.html file '''which we saved earlier''' '''for this demonstration.
|-
|| Slide: Code Files
||
* The file used in this tutorial is available in the '''Code Files''' link on this tutorial page.
* Please download and extract it.
* Make a copy and then use it while practising.
|-
|| Open Mypage.html in Firefox
|| Open the file '''Mypage.html''' in a '''web browser'''.
|-
|| [Firefox]
|| We will create a '''dropdown toggle''' on the '''link''' of '''nav item''' “'''Products'''”.

On the right side, we see a list of '''product item links '''which we had created earlier.

Now, we will remove them from here and will set them as '''dropdown''' '''items''' for '''“Products”.'''

So here, the''' link “Products” '''will become a '''dropdown trigger element.'''

Let’s start to implement this.
|-
|| Open Mypage.html in gedit
|| Open the file '''Mypage.html''' in any '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
|| [gedit - Mypage.html]

Delete:

<ul>
<a href="#" class="text-decoration-none text-danger"><li> Fruits & Vegetables </li></a>

<a href="#" class="text-decoration-none text-danger"><li> Foodgrain </li></a>

<a href="#" class="text-decoration-none text-danger"><li> Beverages </li></a>

<a href="#" class="text-decoration-none text-danger"><li> Personal care </li></a>

<a href="#" class="text-decoration-none text-danger"><li> Snacks & Branded Foods </li>

</a>

</ul>
|| In the '''3rd row''', delete the '''links''' as shown here.
|-
|| [gedit - Mypage.html]

'''Delete:'''
<a href="#" class="nav-item nav-link">Products</a>

'''Update:'''

<div class="nav-item dropdown">

<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Products</a>

<div class="dropdown-menu">

<a href="#" class="dropdown-item">Fruits & Vegetables</a>

<a href="#" class="dropdown-item">Foodgrain</a>

<a href="#" class="dropdown-item">Beverages</a>

<a href="#" class="dropdown-item">Personal care</a>

<a href="#" class="dropdown-item">Snacks & Branded Foods

</a>

</div>

</div>
|| In the '''navbar''', replace the '''2nd nav item “Products” '''with the code as shown here'''.'''

* Using the '''<anchor> tag''' we have created a '''link '''for''' “Products”.'''

And we have made this''' anchor element '''as a '''dropdown trigger element.'''

For this, we have added '''.dropdown-toggle class''' along with '''attribute''' '''data-toggle="dropdown"'''.

* Then, we have added all the '''links '''as '''dropdown menu items''' wrapped by '''.dropdown-menu class'''

* This '''class''' is used for proper '''spacing''' and '''styling elements'''.

* We’ve wrapped them''' '''with '''.nav-item '''and''' .dropdown classes'''.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]
|| Notice the '''nav item''' '''“Products”''' with a '''dropdown''' symbol.

Click on it.

All the '''dropdown menu items''' are visible.

Again click on the “'''Products'''”

Now the '''dropdown menu items''' are not visible.

So we have successfully created '''dropdowns'''.
|-
||
|| We can also separate groups of related '''menu items''' in the '''dropdown'''.

Let’s do this.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file in the '''text editor'''.
|-
|| [gedit - Mypage.html]

Update:
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Fruits & Vegetables</a>

<a href="#" class="dropdown-item">Foodgrain</a>

<a href="#" class="dropdown-item">Beverages</a>

<a href="#" class="dropdown-item">Personal care</a>

<div class="dropdown-divider"></div>

<a href="#" class="dropdown-item">Snacks & Branded Foods</a>

</div>
|| Before the last '''dropdown menu item''', type the code as shown.

'''.dropdown-divider class '''is used to separate groups of related '''menu items.'''

Here we have separated the '''“Snacks & Branded Foods” item.'''
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]
|| Click on '''“Products”.'''

Notice that the '''dropdown''' is now separated into two parts.

By default, the '''dropdown''' is '''triggered''' to the bottom.

But we can change the position of it.

We can '''trigger''' the '''dropdown menus''' to the top, left or right of the '''element'''.
|-
|| Slide: Dropup

Dropup.png
|| '''.dropup class''' is used to '''trigger''' the '''dropdown menus''' to the top.
|-
|| Slide: Dropleft

Dropleft.png
|| '''.dropleft class''' is used to '''trigger''' the '''dropdown menus''' to the left.
|-
|| Slide: Dropright

Dropright.png
|| '''.dropright class''' is used to '''trigger''' the '''dropdown menus''' to the right.

You can try these '''classes''' on your own later on for your own understanding.

In this way, we can create different types of '''dropdowns''' using '''Bootstrap.'''
|-
|| Only narration
|| With this we have come to the end of this tutorial.

Let us now summarize.
|-
|| Slide 6: Summary
|| In this tutorial, we have learnt about:

* '''Dropdowns'''
* '''Dropdown classes'''
* '''Dropdown divider '''and
* '''Dropdown position'''
|-
|| Slide 8: Assignment
|| As an assignment-

* Open '''Mypage.html''' in the '''web browser'''.
* Change the '''screen size''' suitable for '''tablet''' and '''Mobile devices'''
* Observe the '''dropdown'''.
* '''Hint : '''
** Enable the '''responsive design mode.'''
** Decrease the''' screen size'''

|-
|| Slide: About Spoken Tutorial project
|| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.
|-
|| Slide: Spoken Tutorial Workshops
||The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
|| Slide: Forum
|| Please post your timed queries in this forum.
|-
|| Slide: Acknowledgement
|| Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India.
|-
|| Slide: Thanks
|| The script and video for this tutorial was contributed by Neha Solanki.

This is Nancy Varkey from Spoken Tutorial project team, IIT Bombay signing off.

Thanks for watching.
|-
|}

@@ Line 135: / Line 135: @@
 And we have made this''' anchor element '''as a '''dropdown trigger element.'''
-For this, we have added '''.dropdown-toggle class''' along with '''attribute''' '''data-toggle="dropdown"'''.
+For this, we have added '''.dropdown-toggle class''' along with the '''attribute''' '''data-toggle="dropdown"'''.
 * Then, we have added all the '''links '''as '''dropdown menu items''' wrapped by '''.dropdown-menu class'''
@@ Line 154: / Line 154: @@
 Click on it.
-All the '''dropdown menu items''' are visible.
+All the '''dropdown menu items''' are now visible.
 Again click on the “'''Products'''”

@@ Line 232: / Line 232: @@
 || With this we have come to the end of this tutorial.
-Let us now summarize.
+Let us summarize.
 |-
 || Slide 6: Summary

Bootstrap/C3/Dropdowns-in-Bootstrap/English - Revision history

Nirmala Venkat at 10:02, 7 September 2021

Nirmala Venkat at 09:53, 7 September 2021

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