bootstrap - interactive component
沈开畅
tooltip
<!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 mt-4">
<section class="content" id="mission">
<h1>Our Commitment <small>to you</small></h1>
<p><a href="#" data-placement="top" data-toggle="tooltip" title="<u>Ultrasound</u>, <strong>X-ray</strong> and more " data-html="true" data-trigger="hover">Wisdom Pet Medicine</a> 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>
<p>We strive to be your pet's medical staff 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. We want to give your pet a long and healthy life.</p>
</section>
</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>
<script>
$(function() {
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>
</html>
popover
<!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 mt-4">
<h1>Our Commitment <small>to you</small></h1>
<p>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>
<p>We strive to be your pet's medical staff 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. We want to give your pet a long and healthy life.</p>
<button type="button" class="btn btn-info"
data-toggle="popover" data-placement="right"
title="Standard checkups" data-trigger="click"
data-content="Our standard checkups include ultrasound, x-ray, exams and more !!!">
Checkup Info
</button>
</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>
<script>
$(function () {
$('[data-toggle="popover"]').popover();
})
</script>
</body>
</html>
alert
<!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 mt-4">
<h1>Our Commitment <small>to you</small></h1>
<p>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 class="alert alert-info alert-dismissible fade show">
<button type="button" data-dismiss="alert" class="close" aria-label="Close">
<span aria-label="">×</span>
</button>
<h4 class="alert-heading">Standard Checkups</h4>
<p class="mb-2">Our standard checkups offer ultrasounds, x-rays and dental cleanings.</p>
<a href="#" class="alert-link">More Info</a>
</div>
<p>We strive to be your pet's medical staff 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. We want to give your pet a long and healthy life.</p>
</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>
dropdown-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, 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 mt-4">
<h1>Our Commitment <small>to you</small></h1>
<p>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 class="dropup">
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">Grooming</a>
<a class="dropdown-item" href="#">General Health</a>
<a class="dropdown-item" href="#">Nutrition</a>
</div>
</div>
<div class="btn-group mb-5">
<button type="button" class="btn btn-primary">Services</button>
<button type="button" data-toggle="dropdown"
class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuButton"
aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-header">Service Options</div>
<a class="dropdown-item" href="#">Grooming</a>
<a class="dropdown-item" href="#">General Health</a>
<a class="dropdown-item" href="#">Nutrition</a>
<a class="dropdown-item" href="#">Pest Control</a>
<a class="dropdown-item" href="#">Vaccinations</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Other</a>
</div>
</div>
<p>We strive to be your pet's medical staff 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. We want to give your pet a long and healthy life.</p>
</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>
If dropup is too long, it will automatically become dropdown.
collapse and accordion
== removing data-parent in the collapsed item can open multiple tabs in accordion at the same time.
<!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">
<div class="row">
<section class="col-12">
<h2>Services</h2>
<button type="button" class="btn btn-primary mb-3"
data-toggle="collapse" data-target="#pestcontrol"
aria-expanded="false" aria-label="Pest control">Pest Control</button>
<div id="pestcontrol" class="collapse mb-3">
We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.
</div>
<div class="mb-3">
<a href="#pestkill" data-toggle="collapse"
aria-label="Pest Kill" aria-expanded="false">Pest Control</a>
<div id="pestkill" class="collapse">
We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.
</div>
</div>
<div id="servicesaccordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0">
<a href="#grooming" data-toggle="collapse"
aria-expanded="false" aria-controls="grooming">Grooming</a>
</h5>
</div><!-- card header -->
<div id="grooming" class="collapse" data-parent="#servicesaccordion">
<div class="card-block">
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="generalhealthheading" role="tab">
<h5 class="mb-0">
<a href="#generalhealth" data-toggle="collapse"
aria-expanded="true" aria-controls="generalhealth">General Health</a>
</h5>
</div><!-- card header -->
<div id="generalhealth" class="collapse show" data-parent="#servicesaccordion">
<div class="card-block">
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>
</div>
</div><!-- card collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" role="tab" id="nutritionheading" role="tab">
<h5 class="mb-0">
<a href="#nutrition" data-toggle="collapse"
aria-expanded="false" aria-controls="nutrition">Nutrition</a>
</h5>
</div><!-- card header -->
<div id="nutrition" class="collapse" data-parent="#servicesaccordion">
<div class="card-block">
<p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
</div>
</section>
</div><!-- row -->
</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>
modal
<!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">
<div class="row">
<section class="col-12">
<button class="btn btn-primary mt-5" type="button"
data-toggle="modal" data-target="#moreinfo">
More Info
</button>
<div class="modal" id="moreinfo">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Pest Control</h5>
<button class="close" type="button" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites..</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">Back</button>
</div>
</div>
</div>
</div>
</section>
</div><!-- row -->
</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>
carousel
In carousel-indicators(<ol> - <li>), use data-target = "#featured"
In carousel-control-prev or carousel-control-next (<a>), use href = "#featured"
<!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">
<div class="row">
<section class="col-12">
<div class="content container">
<div class="row">
<section class="col-sm-12">
<div class="carousel slide" data-ride="carousel" id="featured">
<ol class="carousel-indicators">
<li data-target="#featured" data-slide-to="0"></li>
<li data-target="#featured" data-slide-to="1" class="active"></li>
<li data-target="#featured" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="img-fluid" src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo">
</div>
<div class="carousel-item active">
<img class="img-fluid" src="images/carousel-fish.jpg" alt="Mission">
<div class="carousel-caption" d-none d-md-block>
<h3>Pete, <small>owner of McAllister</small></h3>
<p>"Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments."</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="images/carousel-vaccinations.jpg" alt="Vaccinations">
</div>
<a class="carousel-control-prev" href="#featured"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span>
</a>
<a class="carousel-control-next" href="#featured"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span>
</a>
</div>
</div>
<h2>Our Mission</h2>
<p>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>
<p>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. We want to give your pet a long and healthy life.</p>
</section>
</div><!-- row -->
</div><!-- content container -->
</section>
</div><!-- row -->
</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>
<script>
$(function() {
$('.carousel').carousel({
interval: 3000
})
});
</script>
</body>
</html>
scrollspy
Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body>element).
Then add the data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar's list items (<div id="section1">matches <a href="#section1">).
The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. This is useful when you feel that the links inside the navbar changes the active state too soon or too early when jumping to the scrollable elements. Default is 10 pixels.
Requires relative positioning: The element with data-spy="scroll" requires the CSS position property, with a value of "relative" to work properly.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
</script>
</body>
</html>from lynda.com:
<!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>
<style>
body {
position: relative;
}
div[id] {
padding-top: 60px;
border-bottom: 1px grey solid;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbar-site" data-offset="40">
<nav id="navbar-site" class="navbar navbar-dark bg-dark navbar-expand-sm fixed-top">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#mission">Mission</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#staff">Staff</a></li>
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
</div><!-- navbar-nav -->
</ul><!-- container -->
</nav>
<div class="container">
<div class="content" id="mission">
<h2>Our Mission</h2>
<p>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>
<p>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. We want to give your pet a long and healthy life.</p>
</div>
<div class="content" id="services">
<h2>Services</h2>
<section>
<h3>Exotic Pets</h3>
<p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p>
</section>
<section>
<h3>Grooming</h3>
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</section>
<section>
<h3>General Health</h3>
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>
</section>
<section>
<h3>Nutrition</h3>
<p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>
</section>
<section>
<h3>Pest Control</h3>
<p>We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.</p>
</section>
<section>
<h3>Vaccinations</h3>
<p>Our veterinarians are experienced in modern vaccination protocols that prevent many of the deadliest diseases in pets.</p>
</section>
</div>
<div class="content" id="staff">
<h2>Our Staff</h2>
<h3>Dr. Winthrop</h3>
<p>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>
<h3>Dr. Chase</h3>
<p>Dr. Chase spends much of her free time helping the local rescue organization find homes for animals, such as Kibbles - a Maine Coon Cat who is part of the large Chase household, including two dogs, three cats, and a turtle.</p>
<h3>Dr Sanders</h3>
<p>Leroy walked into Dr. Sanders front door when he was moving into a new house. After searching for weeks for Leroy's guardians, he decided to make Leroy a part of his pet family, and now has three cats.</p>
</div>
<div class="content" id="testimonials">
<h2>Testimonials</h2>
<blockquote class="blockquote">
<p>During the summer, our rabbit, Tonto, began to have severe redness and itching on his belly and feet. Through diagnostic testing, we learned that Tonto is severely allergic to over a dozens kinds of grass pollens. We've now been doing allergy injections for several months, and his itching and redness have nearly gone away.</p>
<footer class="blockquote-footer">Jane H.</footer>
</blockquote>
<blockquote class="blockquote">
<p>When Samantha, our Siamese cat, began sleeping all the time and urinating excessively, we brought her to see the specialists at Wisdom. After running a blood test, Dr. Winthrop confirmed what we all feared - Samantha was showing signs of diabetes. The doctor put us on a daily routine to provide Samantha insulin injections, and showed us how to administer the shots.</p>
<footer class="blockquote-footer">The McPhersons</footer>
</blockquote>
<blockquote class="blockquote">
<p>The staff at Wisdom worked tirelessly to determine why our three-year old Golden Retriever, Roxie, started going into sudden kidney failure. They stabilized her and provided fluids until her kidneys were again functioning normally. We learned just how toxic grapes and raisins are to pets, and Roxie is no longer allowed to roam unattended in the orchard.</p>
<footer class="blockquote-footer">John B</footer>
</blockquote>
<blockquote class="blockquote">
<p>Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments. When our 13-year old Comet goldfish, McAllister, turned from silvery white to an angry red, we called around, urgently trying to find a veterinarian who could help. Wisdom not only got us in the same day, but also was able to diagnose McAllister as having a severe case of septicemia.</p>
<footer class="blockquote-footer">Lorraine S</footer>
</blockquote>
</div>
</div><!-- content container -->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
类似资料：