Nancyvarkey at 13:50, 19 August 2021

2021-08-19T13:50:36Z

Nirmala Venkat at 10:03, 18 August 2021

2021-08-18T10:03:30Z

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

2021-08-18T10:02:45Z

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

New page

{| border="1"
|-
|| '''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:

* '''Navigation'''
* '''Navigation - methods'''
* '''Horizontal alignment'''
* '''Tabs '''and''' pills '''and
* '''Fill '''and''' justify'''
|-
| | 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''' and '''CSS.'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.
|-
|| [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
||
* Using '''Bootstrap''', we can create '''navigation''' components easily and quickly.
* By using '''.nav class, '''all '''navigation '''components will have the same '''style'''.

|-
|| Slide: Nav - Methods
|| Basically, there are two methods for creating a '''navigation.'''

* Using ''' ul ''' and ''' ol tags'''
* Using ''' <nav> tag'''

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
||
* 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 gedit
|| Open the file '''Mypage.html''' in a '''text editor.'''

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

<div class="row">
<div class="col">
<ul class="nav">

<li class="nav-item">
<a class="nav-link active" href="Mypage.html">Home</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>

<li class="nav-item">
<a class="nav-link disabled" href="#">Feedback</a>
</li>

</ul>
</div>
</div>
|| 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:

<div class="row">
<div class="col">
<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>
</div>
</div>
||
Below this '''navigation '''row, type the code as shown here.
Here, we have used '''<nav> tag '''instead of '''u> 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:
<div class="row">
<div class="col">
<ul class="nav">

<li class="nav-item">
<a class="nav-link active" href="Mypage.html">Home</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>

<li class="nav-item">
<a class="nav-link disabled" href="#">Feedback</a>
</li>

</ul>
</div>
</div>

|| 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
||
* In '''Bootstrap''', by default, the '''navigation''' is '''left-aligned.'''
* '''.justify-content-center class''' is used to '''center-align''' the '''navigation'''.
* '''.justify-content-end''' '''class''' is used to '''right-align''' the '''navigation'''

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

Update:
<div class="row">
<div class="col">
<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>
</div>
</div>
|| 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
||
* '''.nav-tabs class''' is used to generate a '''tabbed navigation'''.
* '''.nav-pills class''' is used to generate '''pill-shaped navigation'''

Let’s try these.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file in the '''editor'''.
|-
|| [gedit - Mypage.html]
Update:
<div class="row">
<div class="col">
<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>
</div>
</div>
|| 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
||
* '''.nav-fill class:'''
**It''' '''is used to extend the '''navigation items''' and fill all available width.
**Every '''navigation item''' doesn't have the same width
|-
||
||
* '''.nav-justified class''':
**It''' '''is also used to extend the '''navigation items''' and fill all available width.
**Every '''navigation item''' has the same width

Let’s try these.
|-
|| Switch to Mypage.html
|| Switch to the''' editor.'''
|-
|| [gedit - Mypage.html]

Update:

<div class="row">
<div class="col">
<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>
</div>
</div>
|| 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:

* '''Navigation'''
* '''Navigation - methods'''
* '''Horizontal alignment'''
* '''Tabs and pills '''and
* '''Fill and justify'''
|-
|| Slide 8: Assignment
|| As an assignment-

* Open the '''Mypage.html''' file.
* Add '''.nav-fill class '''to the''' navigation.'''
* Save the file.
* Observe the output on the '''web browser.'''
|-
|| 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.
|-
|}

@@ Line 160: / Line 160: @@
 ||
 Below this '''navigation '''row, type the code as shown here.
-Here, we have used '''<nav> tag '''instead of '''u> tag'''
+Here, we have used '''<nav> tag '''instead of '''<nowiki><ul> </nowiki> tag'''.
 Notice that we have not used the '''.nav-item class.'''

@@ Line 315: / Line 315: @@
 Highlight the output
-|| Notice that the active item '''Home,'''is displayed in the shape of a pill.
+|| Notice that the active item '''Home,''' is displayed in the shape of a pill.
 Let’s do some more designing.

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

Nancyvarkey at 13:50, 19 August 2021

Nirmala Venkat at 10:03, 18 August 2021

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