Bootstrap4 卡片+下拉菜单+折叠+导航+导航栏
程序员文章站
2022-06-22 08:02:54
Bootstrap4 卡片 卡片头部，内容，底部
卡片
卡片头部
bootstrap4 卡片
<div class="card">
<div class="card-body">卡片</div>
</div>
卡片头部，内容，底部
<div class="card">
<div class="card-header">卡片头部</div>
<div class="card-body">卡片内容</div>
<div class="card-footer">卡片底部</div>
</div>
多种颜色的卡片，背景bg-，文字颜色text-
<div class="card bg-primary text-white">
<div class="card-header">卡片头部</div>
<div class="card-body">卡片内容</div>
<div class="card-footer">卡片底部</div>
</div>
卡片的标题、文本和链接 card-title card-text card-link
<div class="card">
<div class="card-body">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">卡片文字部分</p>
<a href="#" class="card-link">卡片链接</a>
</div>
</div>
图片卡片 card-img-top card-img-bottom card-img-overlay
<div class="card" style="width:200px;">
<div class="card-body">
<img src="img/img_avatar.png" class="card-img-top">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">卡片文字部分</p>
<a href="#" class="card-link">卡片链接</a>
<img src="img/img_avatar.png" class="card-img-bottom">
</div>
</div>
<div class="card" style="width:200px;">
<div class="card-body">
<img src="img/img_avatar.png" class="card-img-top">
<div class="card-img-overlay">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">卡片文字部分</p>
<a href="#" class="card-link">卡片链接</a>
</div>
</div>
</div>
bootstrap4 下拉菜单
bootstrap4 下拉菜单依赖于 popper.min.js。
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。
<div class="dropdown">
<button class="btn btn-primary dorpdown-toggle" data-toggle="dropdown">button</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">item1</a>
<a href="#" class="dropdown-item">item2</a>
<a href="#" class="dropdown-item">item3</a>
</div>
</div>
也可以给a链接添加下拉效果
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownmenulink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownmenulink">
<a class="dropdown-item" href="#">action</a>
<a class="dropdown-item" href="#">another action</a>
<a class="dropdown-item" href="#">something else here</a>
</div>
</div>
下拉菜单中的分割线
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">link 1</a>
<a class="dropdown-item" href="#">link 2</a>
<a class="dropdown-item" href="#">link 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">another link</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
dropdown button
</button>
<div class="dropdown-menu">
<h4 class="dropdown-header">dropdown-header</h4>
<a class="dropdown-item" href="#">link 1</a>
<a class="dropdown-item" href="#">link 2</a>
<a class="dropdown-item" href="#">link 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">another link</a>
</div>
</div>
下拉菜单的激活项和禁用项
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
dropdown button
</button>
<div class="dropdown-menu">
<h4 class="dropdown-header">dropdown-header</h4>
<a class="dropdown-item" href="#">link 1</a>
<a class="dropdown-item active" href="#">link 2</a>
<a class="dropdown-item disabled" href="#">link 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">another link</a>
</div>
</div>
下拉菜单右对齐 dropdown-menu-right
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
dropdown button
</button>
<div class="dropdown-menu dropdown-menu-right">
<h4 class="dropdown-header">dropdown-header</h4>
<a class="dropdown-item" href="#">link 1</a>
<a class="dropdown-item active" href="#">link 2</a>
<a class="dropdown-item disabled" href="#">link 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">another link</a>
</div>
</div>
改变下拉菜单弹出方向
<!-- 向右弹出 -->
<div class="dropdown dropright">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">link 1</a>
<a class="dropdown-item active" href="#">link 2</a>
</div>
</div>
<div class="container">
<br><br><br><br><br><br><br>
<!-- 向上弹出 -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">link 1</a>
<a class="dropdown-item active" href="#">link 2</a>
</div>
</div>
</div>
我为啥加了这么多换行符呢，因为不加它还是会向下弹出
<div class="container" style="text-align:center;">
<!-- 向左弹出 -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">link 1</a>
<a class="dropdown-item active" href="#">link 2</a>
</div>
</div>
</div>
必须在左边留有空间才能生效
在按钮中添加下拉菜单
<div class="btn-group">
<button class="btn btn-primary">button</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">toggle</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
</div>
</div>
bootstrap4 折叠
<button data-toggle="collapse" data-target="#demo" type="button" class="btn btn-primary">折叠</button>
<div id="demo" class="collapse">
lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<a> 元素上你可以使用 href 属性来代替 data-target 属性:
<a href="#demo" data-toggle="collapse" >折叠</a>
<div id="demo" class="collapse">
lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
默认是隐藏的，也可以改为默认显示
<a href="#demo" data-toggle="collapse" >折叠</a>
<div id="demo" class="collapse show">
lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
简单的手风琴效果
<div id="accordion">
<div class="card">
<div class="card-header">
<a href="#one" class="card-link" data-toggle="collapse">item1</a>
</div>
<div id="one" class="collapse">
<div class="card-body">
lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a href="#two" class="card-link" data-toggle="collapse">item2</a>
</div>
<div id="two" class="collapse">
<div class="card-body">
lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a href="#three" class="card-link" data-toggle="collapse">item3</a>
</div>
<div id="three" class="collapse">
<div class="card-body">
lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
bootstrap4 导航
简单水平导航
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item3</a>
</li>
</ul>
设置导航居中或者靠右
<ul class="nav justify-content-center">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item3</a>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item3</a>
</li>
</ul>
垂直导航
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item3</a>
</li>
</ul>
tab选项卡导航
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">item2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item3</a>
</li>
</ul>
胶囊导航
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">item2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item3</a>
</li>
</ul>
导航等宽
<ul class="nav nav-justified">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">item2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item3</a>
</li>
</ul>
动态tab选项卡
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#one" class="nav-link active" data-toggle="tab">item1</a>
</li>
<li class="nav-item">
<a href="#two" class="nav-link" data-toggle="tab">item2</a>
</li>
<li class="nav-item">
<a href="#three" class="nav-link" data-toggle="tab">item3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane container active" id="one">
<h3>one</h3>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane container" id="two">
<h3>two</h3>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane container" id="three">
<h3>three</h3>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
胶囊状态tab选项卡
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#one" class="nav-link active" data-toggle="pill">item1</a>
</li>
<li class="nav-item">
<a href="#two" class="nav-link" data-toggle="pill">item2</a>
</li>
<li class="nav-item">
<a href="#three" class="nav-link" data-toggle="pill">item3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane container active" id="one">
<h3>one</h3>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane container" id="two">
<h3>two</h3>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane container" id="three">
<h3>three</h3>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
bootstrap4 导航栏
小屏时垂直显示，其余屏幕水平显示
<nav class="navbar navbar-expand-sm">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item3</a>
</li>
</ul>
</nav>
默认就是垂直导航栏
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item3</a>
</li>
</ul>
</nav>
不同颜色的导航栏
<nav class="navbar bg-info navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
</ul>
</nav>
<nav class="navbar bg-warning navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
</ul>
</nav>
<nav class="navbar bg-success navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
</ul>
</nav>
<nav class="navbar bg-danger navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
</ul>
</nav>
<nav class="navbar bg-dark navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
</ul>
</nav>
高亮显示品牌/logo
<nav class="navbar bg-info navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand">logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
</ul>
</nav>
<nav class="navbar bg-warning navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand">logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
</ul>
</nav>
图片logo
<nav class="navbar bg-info navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
</ul>
</nav>
<nav class="navbar bg-warning navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand"><img src="img/boot.jpg" style="width:100px;"></a>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
</ul>
</nav>
折叠导航栏
<nav class="navbar bg-info navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mytoggle">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">item2</a>
</li>
</ul>
</div>
</nav>
导航栏上可以设置下拉菜单
<nav class="navbar bg-info navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mytoggle">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
</div>
</li>
</ul>
</div>
</nav>
导航栏的表单与按钮
<nav class="navbar bg-info navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mytoggle">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
</div>
</li>
</ul>
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="请输入产品型号">
<button type="submit" class="btn btn-warning">搜索</button>
</form>
</div>
</nav>
.input-group-addon 类用于在输入框前添加小标签
<nav class="navbar bg-info navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mytoggle">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
</div>
</li>
</ul>
<form action="" class="form-inline">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="请输入邮箱账号">
<button type="submit" class="btn btn-warning">发送</button>
</form>
</div>
</nav>
导航栏文本（非链接）
<nav class="navbar bg-info navbar-expand-sm navbar-light">
<a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mytoggle">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
</div>
</li>
</ul>
<span class="navbar-text">普通文本</span>
</div>
</nav>
固定导航
<nav class="navbar bg-info navbar-expand-sm navbar-light fixed-top">
<a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mytoggle">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
</div>
</li>
</ul>
<span class="navbar-text">普通文本</span>
</div>
</nav>
<nav class="navbar bg-info navbar-expand-sm navbar-light fixed-bottom">
<a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mytoggle">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">item1</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
<a href="#" class="dropdown-item">item</a>
</div>
</li>
</ul>
<span class="navbar-text">普通文本</span>
</div>
</nav>
上一篇： 【Golang进阶】指针的详细讲解
下一篇： 机器人产业规划瞄准“高精尖”
推荐阅读
-
JavaScript实现HTML导航栏下拉菜单[悬浮显示]
-
vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
-
Bootstrap4 卡片+下拉菜单+折叠+导航+导航栏
-
求助。。。怎么完整显示导航栏的折叠菜单_html/css_WEB-ITnose
-
又一个漂亮的导航栏的下拉菜单_导航菜单
-
咨询一个问题：用ul li 写的导航栏，下拉菜单怎么不显示？ 谢谢各位_html/css_WEB-ITnose
-
php和jQuery如何实现三级导航栏下拉菜单显示效果的实例
-
又一个漂亮的导航栏的下拉菜单_导航菜单
-
咨询一个问题：用ul li 写的导航栏，下拉菜单怎么不显示？ 谢谢各位_html/css_WEB-ITnose
-
网站导航栏有下拉菜单，但是下拉菜单出现后会把下面的内容顶下去，这个怎么办？求大神_html/css_WEB-ITnose