Difference between revisions of "Bootstrap/C3/Dropdowns-in-Bootstrap/English"
(Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- || Slide: Title || Welcome to the Spoken Tutorial on '''“Dropdowns in Bootstrap”.''' |- || Slide 2: Learning...") |
|||
| (One intermediate revision by the same user not shown) | |||
| Line 135: | Line 135: | ||
And we have made this''' anchor element '''as a '''dropdown trigger element.''' | 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''' | * Then, we have added all the '''links '''as '''dropdown menu items''' wrapped by '''.dropdown-menu class''' | ||
| Line 154: | Line 154: | ||
Click on it. | Click on it. | ||
| − | All the '''dropdown menu items''' are visible. | + | All the '''dropdown menu items''' are now visible. |
Again click on the “'''Products'''” | Again click on the “'''Products'''” | ||
| Line 232: | Line 232: | ||
|| With this we have come to the end of this tutorial. | || With this we have come to the end of this tutorial. | ||
| − | Let us | + | Let us summarize. |
|- | |- | ||
|| Slide 6: Summary | || Slide 6: Summary | ||
Latest revision as of 15:32, 7 September 2021
| 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:
|
| Slide 3:
System Requirements |
This tutorial is recorded using,
|
| Slide 4: Prerequisite |
|
| [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 |
|
| 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:
</a> |
In the 3rd row, delete the links as shown here. |
| [gedit - Mypage.html]
Delete: <a href="#" class="nav-item nav-link">Products</a> Update: |
In the navbar, replace the 2nd nav item “Products” with the code as shown here.
And we have made this anchor element as a dropdown trigger element. For this, we have added .dropdown-toggle class along with the attribute data-toggle="dropdown".
|
| 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 now 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: |
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 summarize. |
| Slide 6: Summary | In this tutorial, we have learnt about:
|
| Slide 8: Assignment | As an assignment-
|
| 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. |
