navbar
<!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>
<nav class="navbar bg-dark navbar-dark navbar-expand-sm">
<div class="container">
<a href="#" class="navbar-brand d-none d-sm-inline-block">
<img src="images/wisdompetlogo.svg" width="40px">
</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Mission</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Staff</a>
<a class="nav-item nav-link" href="#">Testimonials</a>
</div>
<span class="navbar-text d-none d-xl-inline-block">
We sell gold! All over the world ~ We sell gold! All over the world ~
</span>
</div>
</nav>
<nav class="navbar bg-warning navbar-light navbar-expand-sm">
<div class="container">
<h2 class="navbar-brand m-0">Wisdom Pet Company</h2>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Mission</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Staff</a>
<a class="nav-item nav-link" href="#">Testimonials</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<section class="col-12">
<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>
</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>
dropdown menu
<nav id="navbar-site" class="navbar navbar-dark bg-dark navbar-expand-sm">
<div class="container">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#mission">Mission</a>
<div class="dropdown">
<a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="serivcesDropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="servicesDropdown">
<div class="dropdown-item">Apple</div>
<div class="dropdown-item">Boy</div>
<div class="dropdown-item">Code</div>
<div class="dropdown-item">Doge Doge</div>
<div class="dropdown-item">Earth</div>
</div>
</div>
<a class="nav-item nav-link" href="#staff">Staff</a>
<a class="nav-item nav-link" href="#testimonials">Testimonials</a>
</div><!-- navbar-nav -->
</div><!-- container -->
</nav>split button
<div class="container">
<h2>Split Buttons</h2>
<span class="caret"></span>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
form / search bar
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<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>
</ul><!-- navbar-nav -->
<form class="form-inline">
<input class="form-control mr-2" type="text" placeholder="search">
<button class="btn btn-outline-light" type="submit">Go</button>
</form>
</div><!-- container -->
</nav>
collapse nav
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<div class="container">
<button type="button" class="navbar-toggler"
data-toggle="collapse" data-target="#myToggleNav"
aria-controls="myToggleNav"
aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">Wisdom Pet Medicine</a>
<div class="collapse navbar-collapse" id="myToggleNav">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Mission</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Staff</a>
<a class="nav-item nav-link" href="#">Testimonials</a>
</div><!-- navbar -->
</div>
</div><!-- container -->
</nav><!-- nav -->
btn-group
<div class="btn-toolbar">
<div class="btn-group mb-2 mr-2 btn-group-lg" aria-label="Common Pets">
<button type="button" class="btn btn-primary">Cat</button>
<button type="button" class="btn btn-primary">Dog</button>
<button type="button" class="btn btn-primary">Fish</button>
<button type="button" class="btn btn-primary">Bird</button>
</div>
<div class="btn-group mb-2 btn-group-sm" aria-label="Exotic Pets">
<button type="button" class="btn btn-primary">Amphibian</button>
<button type="button" class="btn btn-primary">Reptile</button>
<button type="button" class="btn btn-primary">Lions</button>
<button type="button" class="btn btn-primary">Other</button>
</div>
</div>
<div class="btn-group-vertical mb-2" aria-label="Exotic Pets">
<button type="button" class="btn btn-primary">Amphibian</button>
<button type="button" class="btn btn-primary">Reptile</button>
<button type="button" class="btn btn-primary">Other</button>
</div>button with badge
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
progress-bar
<div class="progress" style="height:50px">
<div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" style="width:23%">23%</div>
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:23%">23%</div>
</div>
list-group
<ul class="mb-3 list-group">
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">Grooming
<span class="badge badge-primary">4</span>
</li>
<li class="list-group-item list-group-item-action">General Health</li>
<li class="list-group-item list-group-item-action">Nutrition</li>
<li class="list-group-item list-group-item-action">Pest Control</li>
<li class="list-group-item list-group-item-action">Vaccinations</li>
</ul>
<div class="mb-3 list-group">
<a class="list-group-item list-group-item-action active" href="#">Grooming</a>
<a class="list-group-item list-group-item-action list-group-item-success" href="#">General Health</a>
<a class="list-group-item list-group-item-action list-group-item-warning" href="#">Nutrition</a>
<a class="list-group-item list-group-item-action list-group-item-info" href="#">Pest Control</a>
<a class="list-group-item list-group-item-action list-group-item-danger" href="#">Vaccinations</a>
</div>
breadcrumb
<!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>
.breadcrumb-item + .breadcrumb-item::before {
content: " | ";
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<section class="col-12">
<h3>Exotic Pets</h3>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Exotic Pets</a></li>
<li class="breadcrumb-item">Nutrition</li>
</ol>
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Exotic Pets</a>
<span class="breadcrumb-item">Nutrition</span>
</nav>
</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>
861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
