Bootstrap小案例
Bootstrap小案例
案例基于Bootstrap 4.x。
导航栏中搜索和导航分别在两端
代码
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./moudle/bootstrap-4.3.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./moudle/fontawesome-free-5.11.2-web/css/all.css">
<script src="./moudle/jquery-3.4.1.min.js"></script>
<script src="./moudle/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
</head>
<body style="background-color: gray;">
<header>
<!-- 导航条 -->
<nav class="navbar navbar-expand-sm app-navbar-no-padding">
<div class="navbar-nav mr-auto">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control app-input-search" placeholder="Search...">
<button class="btn main-color text-white app-btn-search">Search</button>
</div>
</form>
</div>
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3 mt-2">
<a href="#" class="nav-link"><i class="fas fa-cog text-secondary"></i></a>
</li>
<li class="nav-item dropdown mt-2 ml-3">
<a href="#" class="nav-link text-secondary dropdown-toggle" data-toggle="dropdown">English</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Chinese</a>
<a href="#" class="dropdown-item">German</a>
<a href="#" class="dropdown-item">Italian</a>
</div>
</li>
<li class="nav-item ml-3 mt-2 dropdown ">
<a href="#" class="nav-link dropdown-toggle app-drowdown-no-icon" data-toggle="dropdown"><i class="fas fa-bell text-secondary"></i><span class="badge badge-pill badge-sm badge-danger app-msg-notification" >1</span></a>
<div class="dropdown-menu dropdown-menu-right" style="min-width: 500%;">
<span class="dropdown-header">Notification</span>
<div class="media">
<img src="./images/tx.jpeg" class="profile rounded-circle align-self-center ml-3" alt="头像">
<div class="media-body ml-2">
<span>
New user registed
</span>
<br>
<small>5 hours ago</small>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown text-secondary border-left border-right app-user-info">
<div class="media pl-3 pr-3 dropdown-toggle app-drowdown-no-icon m-2" data-toggle="dropdown">
<img src="./images/tx.jpeg" class="profile rounded-circle align-self-center" alt="头像">
<div class="media-body ml-2">
<span>
Domina Keller
</span>
<br>
<small>Founder</small>
</div>
</div>
<div class="dropdown-menu" style="min-width: 100%;">
<div class="dropdown-header">Wellcome!</div>
<a href="#" class="dropdown-item"><i class="fa fa-user mr-2"></i>My Account</a>
<a href="#" class="dropdown-item"><i class="fa fa-user-edit mr-1"></i>Setting</a>
<a href="#" class="dropdown-item"><i class="fa fa-life-ring mr-2"></i>Support</a>
<a href="#" class="dropdown-item"><i class="fa fa-lock mr-2"></i>Lock Screen</a>
<a href="#" class="dropdown-item"><i class="fa fa-sign-out-alt mr-2"></i>Logout</a>
</div>
</li>
</ul>
</nav>
</header>
</body>
</html>
CSS
.main-color {
background-color: #86b7b2;
}
.navbar {
background-color: #fff;
}
.main-color-dark {
background-color: #57919d;
}
/* 取消搜索按钮弧度 */
.app-btn-search {
border-top-left-radius: 0%;
border-bottom-left-radius: 0%;
}
/* 取消input focus后的效果 */
.form-control:focus {
box-shadow: none;
outline: none;
border-color: #ced4da;
}
.app-input-search {
background-color: #f1f3fa;
}
.app-btn-search:hover, .app-btn-search:active {
background-color: #57919d;
}
.profile {
max-width: 36px;
}
/** 清除dropdown 的箭头 **/
.app-drowdown-no-icon::after {
content: '' !important;
border: none !important;
}
.app-user-info {
/* 变小手 */
cursor: pointer;
/* 不可选中 */
user-select: none;
background-color: #fafbfd;
}
.app-navbar-no-padding {
padding: 0 1rem !important;
}
/* 右上角显示徽标 */
.app-msg-notification {
vertical-align: super;
}
