Bootstrap Framework Hands-on Solution | TCS Fresco Play

0

Bootstrap Framework Fresco Play Hands-On Solutions

Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.

Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).


Important: Total Hands-On Questions - 9 out of which you have to solve only 6 Question rest 3 are for practice purpose.

3 Practicing Problems are

1. Practice Tooltip Plug-in
2. Practice Popover Plugin
3. Practice Ordered Lists

Please follow the below steps before Run Tests to run your code successfully otherwise you will face some server issues even Hands-On code is correct.

Step 1: Run->Install
Step 2: Run->Run
Step 3: Run Tests


1.Bootstrap-Typography(20 min)


File Name: index.html


<!DOCTYPE html>

<html>

<head>

<title>typography</title>

<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">

<link href="./css/mystyle.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

//write your code here


<div>

<h1>Notes Bureau</h1>

<h2>Notes Bureau</h2>

<h3>Notes Bureau</h3>

<h4>Notes Bureau</h4>

<h5>Notes Bureau</h5>

<h6>Notes Bureau</h6>

</div>

</body>

</html>


2.Bootstrap - Button Groups


File Name: index.html


<!DOCTYPE html>

<html>

<head>

<title>Grab it!!!!</title>

<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">

<link href="./css/mystyle.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

//write your code here


<div class="btn-group btn-group-lg">

<Button>Notes Bureau 1</Button>

<Button>Notes Bureau 2</Button>

<Button>Notes Bureau 3</Button>

</div>

<div class="btn-group btn-group-sm">

<Button>Notes Bureau 1</Button>

<Button>Notes Bureau 2</Button>

<Button>Notes Bureau 3</Button>

</div>

<div class="btn-group btn-group-xs">

<Button>Notes Bureau 1</Button>

<Button>Notes Bureau 2</Button>

<Button>Notes Bureau 3</Button>

</div>


</body>

</html>


3.Bootstrap - Navbar(40 min)


File Name: index.html


<!DOCTYPE html>

<html>

<head>

<title>Grab it!!!!</title>

<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">

<link href="./css/mystyle.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<nav>

<a class="navbar-brand">Navbar</a>

<button data-target="#navbarCollapse"></button>

<ul class="nav navbar-nav navbar-right"></ul>

<div id="navbarCollapse">

<form action="" class="navbar-form navbar-right">

<span class="glyphicon glyphicon-search"></span>

</form>

</div>

</nav>

</body>

</html>


4.Bootstrap - Panel(25 min)


File Name: index.html


<!DOCTYPE html>

<html>

<head>

<title>Grab it!!!!</title>

<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">

<link href="./css/mystyle.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

//write your code here


<div class="panel panel-default">

<div class="panel-heading">Notes Bureau</div>

<div class="panel-body">Notes Bureau</div>

<div class="panel-footer">Notes Bureau</div>

</div>


</body>

</html>


5.Bootstrap - Images(25 min)



File Name: index.html


<!DOCTYPE html>

<html>

<head>

<title>Grab it!!!!</title>

<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">

<link href="./css/mystyle.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<img class="img-responsive">

<img class="img-circle">

<img class="img-thumbnail">

</body>

</html>


6.Bootstrap - Carousel



File Name: index.html


<!DOCTYPE html>

<html>

<head>

<title>Grab it!!!!</title>

<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">

<link href="./css/mystyle.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

// write your code


<div class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators"> </ol>

<img><img><img>

<div class="carousel-inner">

<div class="item active"></div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left">Previous</span>

</a>

<a class="right carousel-control" href="#myCarousel" data-slide="next">

<span class="glyphicon glyphicon-chevron-right">Next</span>

</a>

</div>

</body>

</html>



If you have any queries, please feel free to ask on the comment section.

If you want MCQs and Hands-On solutions for any courses, Please feel free to ask on the comment section too.

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !

Join Telegram Channel

Join MNCAnswers To Get Instant Updates

Join Telegram Channel