Introduction
Hi.. Friends,
Today I explain that how to use glyphicons with bootstrap in asp.net. In the bootstrap, bootstrap provides many glyphicons with own pre-define class. now i explain it with the help of code with step by step.
Step:1 The designing code goes here.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Asp.Net Modules</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.theme.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/custom_HomePage.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!--feture content-->
<div class="row">
<div class="col-sm-4 fbox">
<span class="glyphicon glyphicon-heart"></span>
<h3>Easy to use</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
<a href="#" class="btn btn-default ">Read more..</a>
</div>
<div class="col-sm-4 fbox">
<span class="glyphicon glyphicon-comment"></span>
<h3>Contant with friend</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
<a href="#" class="btn btn-default ">Read more..</a>
</div>
<div class="col-sm-4 fbox">
<span class="glyphicon glyphicon-eye-open"></span>
<h3>Real Magic</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
<a href="#" class="btn btn-default ">Read more..</a>
</div>
</div> <!--feture content-->
<hr />
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
Here some js and css are already given by bootstrap you can easily download css from (getbootstrap.com) and js from (https://jquery.com/download/) .
DEMO :-
0 comments:
Post a Comment