发表于： 2020-06-15 09:46:19
1 1189
今天完成的事情：
学习了bootstrap导航栏下拉卡的制作
- <ul class="nav nav-pills" role="tablist"><li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a></li><li class="nav-item"><a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a></li></ul>
active可以使该元素激活默认样式
学习了进度条，流程图的做法
通过请教师兄得知bootstrap
导航栏收缩样式，并查看资料：https://getbootstrap.com/docs/4.0/components/navbar/#supported-content，学习使用
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="width: 100%;">
<a class="navbar-brand" href="#"><img src="./images/src/战略合作企业_01.jpg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="mr-auto"></div>
<form class="form-inline my-2 my-lg-0">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#">职业</a>
</li>
<li class="nav-item active" style="margin: 0 20px;">
<a class="nav-link" href="#">推荐</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">关于</a>
</li>
</ul>
</form>
</div>
</nav>
可以在缩小时，变成变成图片，放大时，图片消失显示文字
明天的计划：
完成任务10
返回列表
评论