发表于： 2018-11-01 22:13:19

1 682

今天完成的事情：今天学习了bootstrap4里的导航：如果你想创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

导航对齐方式

.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

<p class="text-center">居中对齐导航:</p>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

<p class="text-right">右对齐导航:</p>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

垂直导航：

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

选项卡

使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li></ul>

胶囊导航

.nav-pills 类可以将导航项设置成胶囊形状。

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li></ul>

胶囊导航这里上面的代码显示，只有设置已选中才会出现效果，如果每个链接里加data-toggle=“pill”可以每个都有显示效果。

<a class="nav-link active" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul><br>

<p>Justified tabs:</p>

<a class="nav-link active" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

动态选项卡

如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。然后在每个选项对应的内容的上添加 .tab-pane 类。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

Bootstrap4 导航栏

导航栏一般放在页面的顶部。

我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link类:

<nav class="navbar navbar-expand-sm bg-light">  <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>

不加.navbar-expand-xl|lg|md|sm 类则是垂直导航栏。

不同颜色导航栏

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

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

颜色显示与按钮一样，不过多了.bg-dark深灰色和 .bg-light浅灰色。

.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>

然后开始写第一个页面，配置header就发现一个问题，bootstrap4的所有盒模型有一个box-sizing属性：

box-sizing只有三个属性：content-box 标准盒模型

border-box

‍‍‍‍‍‍为元素设定的宽度和高度决定了元素的边框盒。‍‍

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。‍‍‍‍‍‍

‍‍inhert 继承父级。

说到这里有涉及到另一个知识点ie盒模型和标准盒模型，

标准盒模型的组成部分有：margin + border + padding + content，content部分的width height不包含border和padding。

而在IE盒模型中，块级元素的width, height包含了border和padding。

content-box 计算宽度就是依照标准盒模型标准，

border-box 则是与ie盒模型标准一样。

css3 box-sizing属性只支持ie8以上浏览器，而ie5及以下浏览器，而ie6~ie8浏览器则是在混杂模式下是ie盒模型，标准模式下则是标准盒模型

(注意：ie6在混杂模式下一定是Ie盒模型，而ie7、ie8在混杂模式下不一定是ie盒模型)，这里又涉及另一个知识点，混杂模式和标准模式：

在多年以前（IE6诞生以前），各浏览器都处于各自比较封闭的发展中（基本没有兼容性可谈）。随着WEB的发展，兼容性问题的解决越来

越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准）工作的浏览器，比如IE6就是其中之一。但是考虑到以

前建设的网站并不支持标准模式，所以各浏览器在加入标准模式的同时也保留了混杂模式（即以前那种未按照统一标准工作的模式，也叫怪

异模式）。经过多年的发展，后来又出现了近似标准模式（在一种模式中同时融入标准模式和部分混杂模式的特性，也称为接近标准模式、

准标准模式、最有限混杂模式）和超级标准模式（近似标准模式、标准模式、超级标准模式三者也共同被称作标准模式）。因此，浏览器的

模式可以分为两类：标准模式和混杂模式，其中，标准模式又可更严格的分为近似标准模式、标准模式、超级标准模式。

混杂模式会让IE的行为与（包含非标准特性的）IE5相同，

而标准模式会让IE的行为贴近W3C标准。

1.<!DOCTYPE html> 2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

标准模式可以通过doctype 和严格型（strict）声明来开启。

而混杂模式可以通过过渡性（transitional）和框架集型（frameset）声明来开启

以上是扩展知识点，在bootstrap4里的盒模型都是box-sizing：border-box。也就是border和padding都包括在width和height中。

.caret类是下拉小三角，配合下拉条使用，没有也不影响下拉条属性。

明天计划的事情：完成任务第一页，学习audio，为投票页面添加音频播放功能，投票页面注意每个玩家的方块上，hover时会出现4个操作选择。
遇到的问题：问题写在了完成任务里，写盒子时计算宽度出现问题，已经用上面的知识点解决。
收获：了解了导航栏，学到了标准盒模型和ie盒模型。