Scribd
Upload
1K views

Bootstrap Hands - On

The document contains code examples for implementing various Bootstrap components such as typography, images, buttons, navbars, carousels, and panels. It provides step-by-step instructions to first install and run Bootstrap before pasting the code examples to ensure proper rendering and functionality. The code snippets demonstrate how to use different Bootstrap classes to style headings, images, buttons, navigation bars, carousels, and panels.

Uploaded by

Stark
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1K views

Bootstrap Hands - On

The document contains code examples for implementing various Bootstrap components such as typography, images, buttons, navbars, carousels, and panels. It provides step-by-step instructions to first install and run Bootstrap before pasting the code examples to ensure proper rendering and functionality. The code snippets demonstrate how to use different Bootstrap classes to style headings, images, buttons, navigation bars, carousels, and panels.

Uploaded by

Stark
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

https://www.notesbureau.com/2021/07/bootstrap-framework-fresco-play-mcqs_11.

html

NOTE:-
You need to follow these steps otherwise you will face some server issues even hands-On code is right.

Step 1: Run --- Install

Step 2: Run ---- Run

Step 3: Run Tests

Do this steps before pasting code after Run Tests to check the test cases passed

###################################

1. Bootstrap - Typography

####################################

<!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>

<div>

<h1> FrescoPlay </h1>

<h2> FrescoPlay </h2>

<h3> FrescoPlay </h3>

<h4> FrescoPlay </h4>


<h5> FrescoPlay </h5>

<h6> FrescoPlay </h6>

</div>

</body>

</html>

###################################

2. BootStrap - Images

####################################

<!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" src="https://upload.wikimedia.org/wikimedia/commons/8/85/Gfp-


missourl-st-louis-clubhouse-pond-and-scenery.jpg">

<img class="img-circle" src="https://upload.wikimedia.org/wikimedia/commons/8/85/Gfp-missourl-st-


louis-clubhouse-pond-and-scenery.jpg">

<img class="img-thumbnail" src="https://upload.wikimedia.org/wikimedia/commons/8/85/Gfp-


missourl-st-louis-clubhouse-pond-and-scenery.jpg">

</body>

</html>

###################################
3.Bootstrap - Button Groups

####################################

<!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>

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

<button type="button" class="btn btn-default"> Button1</button>

<button type="button" class="btn btn-default"> Button2</button>

<button type="button" class="btn btn-default"> Button3</button>

</div>

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

<button type="button" class="btn btn-default"> Button1</button>

<button type="button" class="btn btn-default"> Button2</button>

<button type="button" class="btn btn-default"> Button3</button>

</div>

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

<button type="button" class="btn btn-default"> Button1</button>

<button type="button" class="btn btn-default"> Button2</button>

<button type="button" class="btn btn-default"> Button3</button>

</div>

</body>
</html>

###################################

4.Bootstrap - Navbar

####################################

<!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 class="navbar navbar-default">

<div class="navbar-head">

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

</div>

<button class="navbar-toggler" data-toggle="collapse" data-target = "#navbarCollapse">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarCollapse">

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

<li class="active"><a href="#"> Home </a> </li>

<li ><a href="#"> Contact us </a> </li>

<li ><a href="#"> About us </a> </li>

</ul>
</div>

<form class="navbar-form navbar-right" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder = "Search">

</div>

<button type="button" class="btn btn-default" aria-label = "Left Align">

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

</button>

</form>

</nav>

</body>

</html>

###################################

5. Bootstrap - carousel

####################################

<!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>

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


<ol class="carousel-indicators ">

<li data-target = "#myCarousel" data-slide-to="0" class="active"></li>

<li data-target = "#myCarousel" data-slide-to="1" ></li>

<li data-target = "#myCarousel" data-slide-to="2" ></li>

</ol>

<div class="carousel-inner">

<div class="item active">

<img
src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NTEwOTMxMV5BMI5BanXkFtZTg
wMjMyODgxMzE@._V1_SX1500_CR0,0,1500,999_AL_.jpg" alt = "Los Angeles" style = "width:100px;">

</div>

<div class="item ">

<img
src="https://images-na.ssl-images-amazon.com/images/M/MV5BNDc1MGUyNzltNWRkOC00MjM1LWJj
NjMtZTZlYWlxMGRmYzVlXkEyXkFqcGdeQXVyMzU3MDEyNjk@._V1_SX1777_CR0,0,1777,999_AL_.jpg"
alt = "Chicago" style = "width:100px;">

</div>

<div class="item ">

<img
src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTExMDk1MDE4NzVeQTJeQWpwZ15
BbWU5MDM4NDM0ODAx._V1_SX1500_CR0,0,1500,999_AL_.jpg" alt = "New York" style =
"width:100px;">

</div>

</div>

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


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

<span class="sr-only">Previous</span>

</a>

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

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

<span class="sr-only">Next</span>

</a>

</div>

</body>

</html>

###################################

6. Bootstrap - Panels

####################################

<!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>

<div class="panel panel-default">

<div class="panel-heading"> Title </div>

<div class= "panel-body"> FrescoPlay </div>

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


</div>

</body>

</html>

You might also like