WEB前端网页设计

目录

Bootstrap5 导航

导航对齐方式

垂直导航

选项卡

胶囊导航

导航等宽

胶囊下拉菜单

选项卡下拉菜单

动态选项卡

胶囊状动态选项卡

JavaScript 变量

就像代数那样

JavaScript 变量

JavaScript 数据类型

声明（创建） JavaScript 变量

一条语句，多个变量

Value = undefined

重新声明 JavaScript 变量

JavaScript 算数

使用 let 和 const (ES6)

如果你想创建一个简单的水平导航栏，可以在  元素上添加 .nav类，在每个  选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:

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

.flex-column 类用于创建垂直导航：

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

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

.nav-justified 类可以设置导航项齐行等宽显示。

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

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

胶囊状动态选项卡只需要将以上实例的代码中 data-bs-toggle 属性设置为 data-bs-toggle="pill":

变量是用于存储信息的"容器"。

x=5 y=6 z=x+y

在代数中，我们使用字母（比如 x）来保存值（比如 5）。

通过上面的表达式 z=x+y，我们能够计算出 z 的值为 11。

在 JavaScript 中，这些字母被称为变量。

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。

在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。

当您向变量分配文本值时，应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量：

var carname;

变量声明之后，该变量是空的（它没有值）。

如需向变量赋值，请使用等号：

carname="Volvo";

不过，您也可以在声明变量时对其赋值：

var carname="Volvo";

在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行：

var lastname="Doe", age=30, job="carpenter";

一条语句中声明的多个变量不可以同时赋同一个值:

var x,y,z=1;

x,y 为 undefined， z 为 1。

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

在执行过以下语句后，变量 carname 的值将是 undefined：

var carname;

如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo"; var carname;

您可以通过 JavaScript 变量来做算数，使用的是 = 和 + 这类运算符：

在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。

在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。

Safari 10 和 Edge 14 是第一批支持 ES6 所有特性的浏览器：