In bootstrap web page can be suppose as a table. As every table has rows and columns the web page also will has rows and columns. For more information please refer to Official docs here
Requirements:
- Download bootstrap files from here
- Place them into your html templates folder or where you want to use.
- Basic knowledge of HTML, CSS and JAVASCRIPT.
*****Source Code*****
<!doctype html>
<html>
<!-- head starts here -->
<head>
<meta charset="utf-8">
<title>My Website</title>
<!-- bootstrap use this meta to make our web page responsive by calculating the device size --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap linking to our html page -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
</head><!-- head ends here -->
<body>
<div class="container">
<!-- row 1 starts with header-->
<header class="row">
<!-- column 1 of row 1 --> <div class="col-lg-6 col-sm-5"> <a href="index.html"><img src="img/logo.png" alt="Wisdom Pets. click for home."></a> </div><!-- column 1 ends here -->
<!-- column 2 of row 1 --> <div class="col-lg-6 col-sm-7"> <img src="img/animals.jpg" alt=""> </div><!-- column 2 ends here -->
</header><!-- header ends here -->
<!-- row 2 starts-->
<div class="row">
<!-- column 1 of row 2 starts--> <aside class="col-lg-3 col-sm-4">
<h3>Keeping your pet's chompers clean and healthy</h3> <p>You know the importance of brushing your own teeth, but did you know that dogs and cats also need regular attention to their pearly whites? Poor dental hygiene in pets can lead to periodontal disease, a bacterial infection which causes bad breath, drooling, tooth decay, and tooth loss.</p>
<p>As always, if you have questions about your pet’s dental or health care, please <a href="#">contact Wisdom Pet Medicine</a> for advice.</p>
</aside><!-- column 1 ends here -->
<!-- Offset always applys on left of the markup Here we have offset of 1 grid-->
<!-- column 2 of row 2 --> <article class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1"> <h1>Services</h1>
<p><img src="img/cockatiel.jpg" class="pull-right">Wisdom Pet Medicine is a state-of-the-art veterinary hospital, featuring the latest in diagnostic and surgical equipment, and a staff of seasoned veterinary specialists in the areas of general veterinary medicine and surgery, oncology, dermatology, orthopedics, radiology, ultrasound, and much more. We also have a 24-hour emergency clinic in the event your pet needs urgent medical care after regular business hours.</p>
<p>At Wisdom, we strive to be your pet’s medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones in his or her life. Our overarching goal is to give your pet the best shot possible at a long and healthy life, by practicing simple preventative care. We even provide an online Pet Portal where you can view all your pet’s diagnostic results, treatment plans, vaccination and diagnostic schedules, prescriptions, and any other health records.</p>
</article><!-- column 2 ends here -->
</div><!-- row 2 ends here -->
<!-- row 3 starts with footer-->
<footer class="row">
<p>This not a real veterinary medicine site, and is not meant to diagnose or offer treatment. Please see your veterinarian for all matters related to your pet's health.</p>
<p>Wisdom Pet Medicine is a training brand owned by lynda.com.</p>
</footer><!-- footer ends here -->
</div> <!-- end container -->
<!-- javascript file of bootstrap-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/bootstrap.min.js"></script> </body>
</html>
No comments:
Post a Comment