[上海|结业弟子]JS-赵朋|2019年10月07日的日报-技能树.IT修真院

发表于： 2019-10-07 19:07:28

1 847

不同颜色导航栏

可以使用以下类来创建不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。

总结:这些是用于导航栏的背景颜色

于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。

激活和禁用状态: 可以在 <a> 元素上添加 .active 类来高亮显示选中的选项。 .disabled 类用于设置该链接是不可点击的。

品牌/Logo

.navbar-brand 类用于高亮显示品牌/Logo:

如果使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏。

折叠导航栏

小屏幕上都会折叠导航栏，通过点击来显示导航选项。

要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget" 类。

然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id

<a class="navbar-brand" href="#">Navbar</a>

</button>

</li>

</li>

</li>

</ul>

</div>

</nav>

导航栏的表单与按钮

导航栏的表单 <form> 元素使用 class="form-inline" 类来排版输入框与按钮：

<button class="btn btn-success" type="button">Search</button>

</form>

</nav>

固定导航栏

导航栏可以固定在头部或者底部。

.fixed-top 类来实现导航栏的固定：

.fixed-bottom 类用于设置导航栏固定在底部：

总结:

导航基础语法:

<ul class="navbar-nav">/*链接组(导航组)*/

<a class="nav-link" href="#">link 1</a>/*链接1*/

</li>

<li>

<a>... ...</a>/*链接2*/

</li>

</ul>

</nav>

根据需求往里面添加样式

制作任务8导航栏

把链接文本添加到基础语法

为导航栏添加响适应<ul class="navbar-nav navbar-expand-sm">

ps:

1.导航栏默认垂直导航,添加响适应后,成一行排练,根据添加的属性,随着视口改变而改变宽度或堆叠

2.左对齐或者右对齐之类的属性,

一定是有宽度的单位,作用于其中的内容

如图,因为头部logo用的网格布局,与导航链接无法对其,需要用到bootstrap框架的弹性布局应用

Bootstrap 4 Flex（弹性）布局

d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：

</div>

创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:

</div>

总结:没有默认宽度,由其中的子元素撑开

水平方向

.flex-row 可以设置弹性子元素水平显示，这是默认的。

(也就是说不需要添加这个属性,只要添加d-flex弹性盒子声明就可以了)

使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。

<div class="d-flex flex-row-reverse bg-secondary">... ...

垂直方向

.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素：

</div>

总结:.flex-column-reverse 用于翻转子元素的意思就是,其包裹的子元素,按输入相反的顺序排列

内容排列

.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:

等宽

.flex-fill 类强制设置各个弹性子元素的宽度是一样的:

</div>

</div>

思考:

1,根据显示,flex-fill的等宽效果,是充满整个父元素,平分整个父元素的宽度吗?

操作:为弹性盒子设置col-6效果显示:

结论:它的等宽效果是子元素平分父元素的宽度

2.同一行,不全设置这个属性,有什么效果?

操作:去掉一个子元素的.flex-fill属性, 显示:

结论:抛除不设置这个属性的子元素所占用的宽度,设置这个属性的子元素,平分剩下的宽度,且按照输入顺序排列

总结:这个属性不能设置在父元素里面,而是要具体设置在每个产生等宽效果的子元素里

扩展

.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。 :

</div>

总结:它会计算抛除同一行其它子元素占用的宽度,设置flex-grow-1的子元素占用剩下的宽度

思考:同一行的子元素设置多个,会有什么效果?

结论:会产生类似.flex-fill类的属性效果

排序

.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前) :

结论:用于多个子元素,用于排序

外边距

.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;，.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;

bootstrap4提供了margin和padding的简写class名，

名称分别以m-开头和p-开头的类

一、影响距离大小的值有

0,1,2,3,4,5,auto

(1)、margin值有

class名等价的style

m-0 等价于{margin:0 !important}

m-1 等价于{margin:0.25rem !important}

m-2 等价于{margin:0.5rem !important}

m-3 等价于{margin:1rem !important}

m-4 等价于{margin:1.5rem !important}

m-5 等价于{margin:3rem !important}

m-auto 等价于{margin:auto !important}

(2)、padding值有

class名等价的style

p-0 等价于{padding:0 !important}

... ...

(同margin)

二、调整某一侧的边距

有几个缩写,t,b,l,r,x,y含义分别是top,bottom,left,right,left和right,top和bottom

（1）、margin，距离大小可以0-5与auto,这里只用期中一个值来说明含义

class名等价的style

mt-2 {margin-top: 0.5rem !important}

mb-2 {margin-bottom: 0.5rem !important}

... ...

mx-2 {margin-right: 0.5rem !important;margin-left: 0.5rem !important}

my-2 {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important}

(2)padding

同margin

包裹

弹性容器中包裹子元素可以使用以下三个类：

.flex-nowrap (默认),(自动换行,按输入元素顺序排列)

.flex-wrap (自动换行,按输入元素倒序排列)

.flex-wrap-reverse (强制一行,顺序排列)

设置 flex 容器是单行或者多行。

内容对齐

align-content-* 来控制在垂直方向上如何去堆叠子元素，

包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。

这些类在只有一行的弹性子元素中是无效的。

子元素对齐

如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，

包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。

指定子元素对齐

如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，

包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)

ps:设置在具体的子元素中

根据bootstrap4网格和bootstrap4 flex设置header和导航对齐,并于事例相同

遇到问题;

与自己设置不符

原因:弹性布局默认水平排列是从左往右1,2,3,(1,2,3代码中子元素的输入顺序)

设置.flex-row-reverse 类右对齐显示,排列顺序是从右往左1,2,3.

我自己理解的只是改变方向,并不改变排序的从右往左3,2,1.导致显示错误,边距设置对象错误

解决:从新设置盒子输入顺序,和边距设置

<li class="nav-item">

<a class="nav-link active nav-a" data-toggle="tab" href="#">首页</a>

<!--链接-->

</li>

<li class="nav-item">

<a class="nav-link nav-a" data-toggle="tab"href="#">职业</a>

<!--链接-->

</li>

<li class="nav-item">

<a class="nav-link nav-a" data-toggle="tab" href="#">推荐</a>

<!--链接-->

</li>

<li class="nav-item ">为导航栏添加切换选项卡,添加样式

.nav-ul{

padding:1rem 0;

}

.nav-a{

color:white;

margin-right:2rem;

}

.nav-a-1{

color:white;

}

<a class="nav-link nav-a-1" data-toggle="tab" href="#">关于</a>

<!--链接-->

</li>

在为当行添加,浮动下划线,不更改颜色

收获:导航栏组和bootstrap4弹性布局

遇到问题:网格布局有默认边距,导致没有对齐

明日计划:看下轮播,把首页做完

返回列表

【任务7】 [上海|结业弟子]JS-赵朋 | 2019年10月07日 的日报 中品

评论

分享到

【任务7】 [上海|结业弟子]JS-赵朋 | 2019年10月07日的日报中品