2018.7.4
今天完成的事情:
1.开始任务十完成了一半
2.小课堂
明天计划的事情:
1.完成任务十
2.完成任务九的审核
遇到的问题:
收获:
1.通过任务十加深了对导航栏的理解
1.1首先使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用 <ul> 元素并添加navbar-nav类，然后在<li>元素上添加.nav-item类，<a>使用.nav-link类。如下：
<nav class="navbar navbar-expand-sm justify-content-end">
<ul class="navbar-nav">
<!--导航栏 导航栏里面的导航 -->
<li class="nav-item">
<a class="nav-link" href="#homepage">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#online-customization">在线定制</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#standardizing-box">标准箱</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#quality assurance">品质保障</a>
</li>
</ul>
</div>
</nav>
1.2折叠导航栏
要创建折叠导航栏，首先要有一个button,在这个button上面添加class="navbar-toggle", data-toggle="collapsa",data-target="要折叠的对象"。
要折叠的对象给他一个class="collapse navbar-collapse"并赋予一个id，是的button能够找得到这个要折叠的对象，这个id会填入上面data-target中。
如下图红色部分：
<nav class="navbar navbar-expand-sm justify-content-end">
<button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#fold-domain">
<!--导航栏开关 开关的是折叠 折叠的对象-->
<span class="navbar-toggler-icon"></span>
<!--制作三条扛作为按钮-->
</button>
<div class="collapse navbar-collapse justify-content-end" id="fold-domain">
<!--确定要折叠的区域_ 折叠 导航栏中的折叠 自己定义一个类名-->
<ul class="navbar-nav">
<!--导航栏 导航栏里面的导航 -->
<li class="nav-item">
<a class="nav-link" href="#homepage">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#online-customization">在线定制</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#standardizing-box">标准箱</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#quality assurance">品质保障</a>
</li>
</ul>
</div>
</nav>
2.对媒体查询的理解
当对导航栏已经支持在小屏幕折叠，通过点击来显示导航选项。
但是这时候的下拉菜单格式还是按照之前的排版在排列，这时候需要加入媒体查询来控制其小屏幕的样式
使其更加美观
@media(max-width:576px){
.navbar-nav{
display: inline-block !important;
width: 100%;
}
.nav-link{
margin-left: 0;
text-align: center;
background-color: #F9F9F9;
}
}
返回列表
评论