发表于: 2018-07-04 22:04:59

1 801


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;
}
}




返回列表 返回列表
评论

    分享到