Bootstrap Images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMAGES</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap images</h3>
<img src="H:\PHOTO\photo collection\Animal\LION1.jpg" alt="LION1">
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
ouput:
Adjust image(corner sharp)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMAGES</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap images</h3>
<img class="img-responsive"src="H:\PHOTO\photo collection\Animal\LION1.jpg" alt="LION1">
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Corner Rounded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMAGES</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap images</h3>
<img class="img-responsive img-rounded"src="H:\PHOTO\photo collection\Animal\LION1.jpg" alt="LION1">
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Corner Circle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMAGES</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap images</h3>
<img class="img-responsive img-circle"src="H:\PHOTO\photo collection\Animal\LION1.jpg" alt="LION1">
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Photo Frames
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMAGES</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap images</h3>
<img class="img-responsive img-thumbnail"src="H:\PHOTO\photo collection\Animal\LION1.jpg" alt="LION1">
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Bootstrap Buttons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button</h3>
<div class="row">
<div class="col-md-6">
<button type="button">HOME</button>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button</h3>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn">HOME</button>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Default button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button</h3>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-default">DEFAULT</button>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Button Color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button</h3>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary">PRIMARY</button>
<button type="button" class="btn btn-success">SUCCESS</button>
<button type="button" class="btn btn-info">INFO</button>
<button type="button" class="btn btn-warning">WARNING</button>
<button type="button" class="btn btn-danger">DANGER</button>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
ouput:
Button size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button</h3>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary btn-xs">EXTRA SMALL</button>
<button type="button" class="btn btn-success btn-sm">SMALL</button>
<button type="button" class="btn btn-info btn-lg">LARGE</button>
<button type="button" class="btn btn-warning">NORMAL</button>
<button type="button" class="btn btn-danger btn-block">NORMAL</button>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
OUTPUT:
Active&Disable button
Anchor tag button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button</h3>
<div class="row">
<div class="col-md-6">
<a href="#" class="btn btn-danger">Anchorbutton</a>
<button type="button" class="btn btn-success">BUTTON</button>
<input type="submit" class="btn btn-danger" value="submit">
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
No comments:
Post a Comment