Scribd
Upload
3 views

Bootstrap Lab3 2

Uploaded by

Naye Nah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Bootstrap Lab3 2

Uploaded by

Naye Nah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Bootstrap – Lab III

Open the CV.html page


Apply the following:
1. Add link to bootstrap 3 library (https://www.w3schools.com/bootstrap/bootstrap_get_started.asp)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
2. Bootstrap classes reference list (https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp).
3. Grid system (https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp).
4. Use class hidden-xx in a div to show or hide the image “photo” based on the screen size. Example: Only show
the img element in medium and large resolutions:
<div class='hidden-sm hidden-xs-lg'>
<figure>
……….
<figure>
</div>
5. Using Glyphicons (https://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp).
6. Replace the email image with a Glyphicon using an envelope icon and add a print icon as a link:
<p><span class="glyphicon glyphicon-envelope"></span> Email: [email protected] </p>
<a href="#"> <span class="glyphicon glyphicon-print"></span></a>
7. Put the nav tag inside a new div with container class. And then add container class to profile, experience,
education, achievement, interest and Courses Taken divisions. The container class provides a responsive fixed
width container
<div class="container">
…..
</div>
8. Put all the content under the education inside a new div with container-fluid class.
<h2> EDUCATION </h2>
<div class="container-fluid">
…..
</div>
9. Bootstrap Navigation Bar – Menu (https://www.w3schools.com/bootstrap/bootstrap_navbar.asp).
10. Add the "navbar navbar-default" class to <nav> tag to create a standard navigation bar:
<nav class="navbar navbar-default">
…
</nav>
11. Put the <a> tag of the home link inside a new div with "navbar-header" class. Change the text of the link to My
Website and add a home icon to it:
<div class="navbar-header">
<a href="Home.html" tabindex="2" accesskey="H" title="Home Page">
<span class="glyphicon glyphicon-home"></span>
My Website
</a>
</div>
12. Add the "navbar-brand" class to the <a>.
<a href="Home.html" tabindex="2" accesskey="H" title="Home Page" class="navbar-brand">
My Website </a>
13. Put the <a> tags of the CV and Contact Me links inside a new list using <ul> <li> tags with "nav nav-pills"
class. Then try to change the class to "nav nav-tabs" or to "nav navbar-nav navbar-right" to move links to the
right of the navigation bar. Then add "active" class to the 1st <li> tag to make it active.
<ul class="nav nav-pills">
<li class="active"><a href="CV.html" tabindex="3" accesskey="V" title="My CV"> CV </a></li>
<li><a href="contact page.html" tabindex="1" accesskey="C"> Contact Me </a></li>
</ul>
14. Add the following scripts for Dropdown Links Menu inside the <head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
15. Create Dropdown Links Menu. Add new list item <li> tag for page 4 link, add the "dropdown" class to <li> tag.
Then add a <span> tag with "caret" class to add the dropdown icon
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 4
<span class="caret"></span></a>
</li>
• The dropdown class indicates a dropdown menu.
• To open the dropdown menu, use a button or a link with a class of dropdown-toggle and the data-
toggle="dropdown" attribute.
• The caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
16. Add a nested list under page 4. To create toggleable menu that allows the user to choose one value from a
predefined list. Add the “dropdown-menu class” to a <ul> element to actually build the dropdown menu.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 4
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 4-1</a></li>
<li><a href="#">Page 4-2</a></li>
<li><a href="#">Page 4-3</a></li>
</ul>
</li>
17. Create a row with two equal columns using (<div class="row">) and (<div class="col-*-*">. To organize the
education content:
<div class="row">
<div class="col-md-6">
<h3>07/2013 </h3>
……..
</div>
<div class="col-md-6">
<h3>08/2016 </h3>
………
</div>
</div>
18. Create a row with two equal columns using (<div class="row">) and (<div class="col-*-*">. To organize the
interest content.
<div class="row">
<ol>
<div class="col-sm-3 col-md-4">
<li>Technology </li>
<li>Sciences </li>
<li>Literature</li>
</div>
<div class="col-sm-6 col-md-4">
<li>FilmCamping</li>
<li>Hiking</li>
</div>
<div class="col-sm-3 col-md-4">
<li>Tennis</li>
<li>Woodworking</li>
</div>
</ol>
</div>
19. Create a row with two columns using (<div class="row">) and (<div class="col-*-*">) and (<div class="col-
md-*5 and offset-*". To organize the course taken content and quote content:
<div class="row">
<div class="col-md-6 col1">
<table> …. </table>
</div>
<div class="col-md-5 col-md-offset-1">
<blockquote> …… </blockquote>
</div>
</div>
Move columns to the right using col-md-offset-* classes. These classes increase the left margin of a column by *
columns

You might also like