jumbotron (full screen background)
<header class="jumbotron jumbotron-fluid">
<div class="container">
<div class="display-2 mb-4">Our Mission</div>
<p class="lead">Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p>
</div>
</header>table
<!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, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Bootstrap</title>
</head>
<body>
<div class="container">
<h2 class="mt-4">Products & Services</h2>
<p class="lead">Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p>
<table class="table table-striped table-hover table-responsive">
<thead class="thead-light"><tr><th scope="col">Item #</th><th scope="col">Product or Service</th><th scope="col">Price (ea.)</th><th scope="col">Retail Price (Case)</th><th scope="col">Case Discount</th><th scope="col">Wholesale Price</th><th scope="col">Wholesale Discount</th></tr></thead>
<tbody>
<tr><th scope="row">100050</th><td>Advance Pet Oral Care Toothbrush and Toothpaste</td><td>$9.55 </td><td>$108.87</td><td>$5.73</td><td>$103.14</td><td>$11.46</td></tr>
<tr class="table-warning"><th scope="row">100043</th><td>Basic Teeth Cleaning and Exam</td><td>$100.00 </td><td>$1,140.00</td><td>$60.00</td><td>$1,080.00</td><td>$120.00</td></tr>
<tr class="bg-danger text-light"><th scope="row">100013</th><td>Calm Cat Anxiety Relief Spray</td><td>$9.49 </td><td>$108.19</td><td>$5.69</td><td>$102.49</td><td>$11.39</td></tr>
<tr><th scope="row">100041</th><td class="table-success">Cat Hairball Remedy Gel</td><td>$6.00 </td><td>$68.40</td><td>$3.60</td><td>$64.80</td><td>$7.20</td></tr>
<tr><th scope="row">100051</th><td>Cat Vaccination Package</td><td>$55.00 </td><td>$627.00</td><td>$33.00</td><td>$594.00</td><td>$66.00</td></tr>
<tr><th scope="row">100046</th><td>Dog Vaccination Package</td><td>$65.00 </td><td>$741.00</td><td>$39.00</td><td>$702.00</td><td>$78.00</td></tr>
</div><!-- content container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
card
<section class="card mb-5 bg-primary text-light" id="drwinthrop">
<div class="card-body">
<img class="card-img img-fluid" src="images/doctor-winthrop.jpg" alt="Doctor Winthrop Photo">
<h2 class="card-title">Dr. Stanley Winthrop</h2>
<h5 class="card-subtitle">Behaviorist</h5>
<p class="card-text">Dr. Winthrop is the guardian of Missy, a three-year old Llaso mix, who he adopted at the shelter. Dr. Winthrop is passionate about spay and neuter and pet adoption, and works tireless hours outside the clinic, performing free spay and neuter surgeries for the shelter.</p>
<a class="card-link" href="#">About Me</a>
<a class="card-link" href="#">My Pets</a>
<a class="card-link" href="#">Client Slideshow</a>
</div>
</section> <section class="card mb-5" id="drwinthrop">
<div class="card-header">
<h2 class="card-title">Dr. Stanley Winthrop</h2>
<h5 class="card-subtitle">Behaviorist</h5>
</div>
<div class="card-body">
<img class="card-img img-fluid" src="images/doctor-winthrop.jpg" alt="Doctor Winthrop Photo">
<p class="card-text">Dr. Winthrop is the guardian of Missy, a three-year old Llaso mix, who he adopted at the shelter. Dr. Winthrop is passionate about spay and neuter and pet adoption, and works tireless hours outside the clinic, performing free spay and neuter surgeries for the shelter.</p>
</div>
<div class="card-footer">
<a class="card-link" href="#">About Me</a>
<a class="card-link" href="#">My Pets</a>
<a class="card-link" href="#">Client Slideshow</a>
</div>
</section>
<section class="card mb-5 bg-primary text-light" id="drchase">
<div class="card-body">
<h2 class="card-title">Dr. Elizabeth Chase</h2>
<h5 class="card-subtitle">Dentistry</h5>
<p class="card-text">Dr. Chase spends much of her free time helping the local bunny rescue organization find homes for bunnies, such as Kibbles - a Dalmatian bunny who is part of the large Chase household, including two dogs, three cats, and a turtle.</p>
<a class="card-link text-light" href="#">About Me</a>
<a class="card-link text-light" href="#">My Pets</a>
<a class="card-link text-light" href="#">Client Slideshow</a>
</div>
<img class="card-img-bottom img-fluid" src="images/doctor-chase.jpg" alt="Doctor Chase Photo">
</section>
<section class="card mb-5 border-warning" id="drsanders">
<img class="card-img img-fluid" src="images/doctor-sanders.jpg" alt="Doctor Sanders Photo">
<div class="card-img-overlay">
<h2 class="card-title">Dr. Kenneth Sanders</h2>
<h5 class="card-subtitle">Nutritionist</h5>
<p class="card-text">Leroy walked into Dr. Sanders front door when she was moving into a new house. After searching for weeks for Leroy's guardians, she decided to make Leroy a part of her pet family, and now has three cats.</p>
<a class="card-link" href="#">About Me</a>
<a class="card-link" href="#">My Pets</a>
<a class="card-link" href="#">Client Slideshow</a>
</div>
</section><div class="container">
<!-- <div class="card-group"> -->
<!-- <div class="card-deck"> -->
<div class="card-columns">
<section class="card mb-5" id="drwinthrop">
<img class="card-img-top" src="images/doctor-winthrop.jpg" alt="Doctor Winthrop Photo">
<div class="card-body">
<h2 class="card-title">Dr. Stanley Winthrop</h2>
<h5 class="card-subtitle">Behaviorist</h5>
<p class="card-text">Dr. Winthrop is the guardian of Missy, a three-year old Llaso mix, who he adopted at the shelter. Dr. Winthrop is
passionate about spay and neuter and pet adoption, and works tireless hours outside the clinic, performing free
spay and neuter surgeries for the shelter.</p>
</div>
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">About Me</a>
<a class="list-group-item" href="#">My Pets</a>
<a class="list-group-item" href="#">Client Slideshow</a>
</div>
</section><!-- card -->
<section class="card mb-5" id="drchase">
<img class="card-img-top" src="images/doctor-chase.jpg" alt="Doctor Chase Photo">
<div class="card-body">
<h2 class="card-title">Dr. Elizabeth Chase</h2>
<h5 class="card-subtitle">Dentistry</h5>
<p class="card-text">Dr. Chase spends much of her free time helping the local bunny rescue organization find homes for bunnies, such as
Kibbles - a Dalmatian bunny who is part of the large Chase household, including two dogs, three cats, and a turtle.</p>
</div>
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">About Me</a>
<a class="list-group-item" href="#">My Pets</a>
<a class="list-group-item" href="#">Client Slideshow</a>
</div>
</section><!-- card -->
<section class="card mb-5" id="drsanders">
<img class="card-img-top" src="images/doctor-sanders.jpg" alt="Doctor Sanders Photo">
<div class="card-body">
<h2 class="card-title">Dr. Kenneth Sanders</h2>
<h5 class="card-subtitle">Nutritionist</h5>
<p class="card-text">Leroy walked into Dr. Sanders front door when she was moving into a new house. After searching for weeks for Leroy's
guardians, she decided to make Leroy a part of her pet family, and now has three cats.</p>
</div>
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">About Me</a>
<a class="list-group-item" href="#">My Pets</a>
<a class="list-group-item" href="#">Client Slideshow</a>
</div>
</section><!-- card -->
<section class="card mb-5" id="drgardner">
<img class="card-img-top" src="images/doctor-gardner.jpg" alt="Doctor Gardner Photo">
<div class="card-body">
<h2 class="card-title">Dr. Michael Gardner</h2>
<h5 class="card-subtitle">Practitioner</h5>
<p class="card-text">When Dr. Gardner was 8 his family moved to Colorado, where he spent most of his free time playing on his neighbors
farm. He came to love spending time with the horses, chickens, and goats. He still considers all of his family's
farm animals his own, but Frank, his Cattle dog is his nearest and dearest friend.</p>
</div>
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">About Me</a>
<a class="list-group-item" href="#">My Pets</a>
<a class="list-group-item" href="#">Client Slideshow</a>
</div>
</section><!-- card -->
<section class="card mb-5" id="drruiz">
<img class="card-img-top" src="images/doctor-ruiz.jpg" alt="Doctor Ruiz Photo">
<div class="card-body">
<h2 class="card-title">Dr. Brook Ruiz</h2>
<h5 class="card-subtitle">Radiology</h5>
<p class="card-text">Dr. Brook has spent countless hours helping the local animal shelter with injured animals ,that find their way into
their doors. She recently adopted a new feline friend, Trish, that she helped rescue from a flooded area. Trish
loves playing with her new sister, Else.</p>
</div><!-- card-body -->
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">About Me</a>
<a class="list-group-item" href="#">My Pets</a>
<a class="list-group-item" href="#">Client Slideshow</a>
</div>
</section><!-- card -->
<section class="card mb-5" id="drwong">
<img class="card-img-top" src="images/doctor-wong.jpg" alt="Doctor Wong Photo">
<div class="card-body">
<h2 class="card-title">Dr. Olivia Wong</h2>
<h5 class="card-subtitle">Preventive Care</h5>
<p class="card-text">Dr. Wong is a cancer survivor who was fortunate enough to get to spend time with a therapy dog during her recovery.
She became passionate about therapy animals, and has started her own foundation to train and provide education
to patients in recovery. Now she gets her own dose of daily therapy from her husky, Lilla.</p>
</div><!-- card-body -->
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">About Me</a>
<a class="list-group-item" href="#">My Pets</a>
<a class="list-group-item" href="#">Client Slideshow</a>
</div>
</section><!-- card -->
</div>
</div><!-- content container -->
2852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
