Bootstrap Tutorial For Beginners 10 - Adding Thumbnail and Image to Boot...
<!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">
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come
*after* these tags -->
<title>ProgrammingKnowledge</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="www.EasyOnlineConverter.com">ProgrammingKnowledge</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#" > Home </a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Learn <b
class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Examples</li>
<li><a href="#">C++</a></li>
<li><a href="#">Java</a></li>
<li class="divider"></li>
<li class="dropdown-header">Tutorials</li>
<li><a href="#">C++</a></li>
<li><a href="#">Java</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron text-center">
<h1>Hello World !!!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc suscipit convallis nisl, eget rutrum lectus commodo at.
Pellentesque mattis justo vel augue pretium euismod. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Fusce eu
turpis eros.</p>
<button type=button class="btn btn-primary">Click me</button>
<button type=button class="btn btn-success"> thank you</button>
</div>
<div class="row">
<div class="col-sm-4">
<a href="#" class="thumbnail" >
<img src="img/cpp.jpg" alt="C++ tutorial">
</a>
<h3>C++</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc suscipit convallis nisl, eget rutrum lectus commodo at.
Pellentesque mattis justo vel augue pretium euismod. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Fusce eu
turpis eros.</p>
<button type=button class="btn btn-danger"> thank you</button>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail" >
<img src="img/java.jpg" alt="Java tutorial">
</a>
<h3>Java</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc suscipit convallis nisl, eget rutrum lectus commodo at.
Pellentesque mattis justo vel augue pretium euismod. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Fusce eu
turpis eros.</p>
<button type=button class="btn btn-danger"> thank you</button>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail" >
<img src="img/python.jpg" alt="Python tutorial">
</a>
<h3>Python</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc suscipit convallis nisl, eget rutrum lectus commodo at.
Pellentesque mattis justo vel augue pretium euismod. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Fusce eu
turpis eros.</p>
<button type=button class="btn btn-danger"> thank you</button>
</div>
</div>
</div>
<!-- Fixed footer -->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-text pull-left">
<p>copyright ProgrammingKnowledge 2015</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript
plugins) -->
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery
.min.js"></script>
<!-- Include all compiled plugins (below), or include
individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Searches related to bootstrap thumbnail and images
bootstrap thumbnail image size
bootstrap thumbnail image gallery
bootstrap thumbnail image slider
bootstrap thumbnail carousel
bootstrap thumbnail grid
bootstrap thumbnail example
bootstrap thumbnail gallery with caption
bootstrap thumbnail border
Bootstrap Tutorial For Beginners 10 - Adding Thumbnail and Image to Boot...
Reviewed by Mursal Zheker
on
Rabu, Juli 29, 2015
Rating:
Reviewed by Mursal Zheker
on
Rabu, Juli 29, 2015
Rating:
Tidak ada komentar: