Difference between revisions of "Bootstrap/C3/Nav-in-Bootstrap/English"
Nancyvarkey (Talk | contribs) |
|||
Line 160: | Line 160: | ||
|| | || | ||
Below this '''navigation '''row, type the code as shown here. | Below this '''navigation '''row, type the code as shown here. | ||
− | Here, we have used '''<nav> tag '''instead of ''' | + | Here, we have used '''<nav> tag '''instead of '''<nowiki><ul> </nowiki> tag'''. |
Notice that we have not used the '''.nav-item class.''' | Notice that we have not used the '''.nav-item class.''' |
Latest revision as of 19:20, 19 August 2021
VISUAL CUE | NARRATION |
Slide: Title | Welcome to the Spoken Tutorial on “Nav 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 navigation as shown here, using Bootstrap classes.
This navigation will have four items: Home, Products, Offers and Feedback. Let’s learn how to create them. |
Slide: Nav |
|
Slide: Nav - Methods | Basically, there are two methods for creating a navigation.
Let’s create a navigation with the first method. |
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 File |
|
Open Mypage.html in gedit | Open the file Mypage.html in a text editor.
I have opened it in the gedit Text Editor. |
[gedit - Mypage.html]
|
After the first row, type the code as shown here.
We have added a new row with a column, for adding navigation. Then we have used ul tag with .nav class. In our navigation, we are creating four items. So for each item, .nav-item class is used. And for each link, .nav-link class is used. These classes are used for proper styling, like text color, margin, padding, etc. Notice that for the first item, I have used the active class here. It is used to show the current active page, which is Mypage.html I have used the disabled class for the last item. So this navigation item will be disabled. |
Press Ctrl + S | Save the file. |
Open Mypage.html in Firefox | Open the file Mypage.html in a web browser. |
[Firefox] | We have successfully created a navigation with 4 items - Home, Products, Offers and Feedback.
Notice that all the four items have the same styling and the last item is disabled. |
Now let’s create this navigation by using the second method i.e <nav> tag. | |
Switch to Mypage.html | Switch to the Mypage.html file in the text editor. |
[gedit - Mypage.html]
Update: <nav class="nav"> <a class="nav-link active" href="Mypage.html">Home</a> <a class="nav-link" href="#">Products</a> <a class="nav-link" href="#">Offers</a> <a class="nav-link disabled">Feedback</a> </nav> |
Below this navigation row, type the code as shown here. Here, we have used <nav> tag instead of <ul> tag. Notice that we have not used the .nav-item class. Only the.nav-link class is required for styling link elements. |
Press Ctrl + S | Save the file. |
Switch to Firefox | Now switch to the browser and refresh the page. |
[Firefox] | We have successfully created the second navigation now.
Notice that there is no change in both the navigations. So, we can create navigation using either of the methods. |
By default, navigation is left-aligned.
For the rest of this tutorial, we will use the 2nd method of navigation. i.e <nav> tag. | |
Switch to Mypage.html | Switch to the Mypage.html file in the editor. |
[gedit - Mypage.html]
Delete: |
And delete the navigation created by using ul tag. |
Press Ctrl + S | Save the file. |
Let’s see how to change the horizontal alignment of navigation. | |
Slide: Horizontal Alignment |
Let’s try this. |
Switch to Mypage.html | Switch to the Mypage.html file in the editor. |
[gedit - Mypage.html]
Update: <nav class="nav justify-content-center"> <a class="nav-link active" href="Mypage.html">Home</a> <a class="nav-link" href="#">Products</a> <a class="nav-link" href="#">Offers</a> <a class="nav-link disabled">Feedback</a> </nav> |
Add .justify-content-center class as shown here. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox] | Notice that now the navigation is center-aligned.
Let’s see some more designs of the navigation. |
Slide: Tabs and Pills
tab-pill.png |
Using Bootstrap classes, we can create tab and pill-based navigation.
In tab-based navigation, items get displayed like tabs as shown here. While in pill-based navigation, they are displayed in the shape of pills, having rounded corners. |
Slide: Tabs and Pills Classes |
Let’s try these. |
Switch to Mypage.html | Switch to the Mypage.html file in the editor. |
[gedit - Mypage.html]
Update: <nav class="nav justify-content-center nav-pills"> <a class="nav-link active" href="Mypage.html">Home</a> <a class="nav-link" href="#">Products</a> <a class="nav-link" href="#">Offers</a> <a class="nav-link disabled">Feedback</a> </nav> |
Add .nav-pills class as shown here. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Highlight the output |
Notice that the active item Home, is displayed in the shape of a pill.
Let’s do some more designing. |
Slide: Fill and Justify |
|
Let’s try these. | |
Switch to Mypage.html | Switch to the editor. |
[gedit - Mypage.html]
Update: <nav class="nav justify-content-center nav-pills nav-justified"> <a class="nav-link active" href="Mypage.html">Home</a> <a class="nav-link" href="#">Products</a> <a class="nav-link" href="#">Offers</a> <a class="nav-link disabled">Feedback</a> </nav> |
Add .nav-justified class as shown here. |
Press Ctrl + S | Then save the file. |
Switch to firefox | And switch to the browser and refresh the page. |
[Firefox]
Highlight the output |
Notice that the navigation items are extended to fill all available width.
And every navigation item has the same width. |
[Firefox]
Right click >> Inspect Element Click on Responsive Design Mode |
Now let’s see how this page will look with different screen sizes.
The present form layout is used for laptop and desktop devices. Enable the responsive design mode. After that, I will decrease the screen size. Notice that the size of the navigation is adjusted according to the screen size. This layout is used for tablets and mobile devices. |
In this way we can create customised navigation using Bootstrap classes. | |
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:
|
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 the Spoken Tutorial project team, IIT Bombay signing off. Thanks for watching. |