项目详细

# 导航

1.是可以点击跳转到某个页面,a标签存在

2.导航的标签可以使用div>div>a 也可以使用 ul>li>a

3.nav类标志该元素内所有内容使用导航样式 nav写给最外层

4.在每一个导航中都存在多个导航项nax-item每一项可以横向排列，因为父元素(nav)时flex布局

5.在导航中需要超链接进行跳转 因为在导航中所以所有a标签应该存在于每个列表项中使用nav-link渲染样式,如鼠标移入，去掉下划线 及基本颜色等

# 面包屑导航

1.一种递进层级的指向,最左侧级别最高,如：首页>家电>洗衣机>西门子

2.最外层元素是面包屑的包裹元素，它可以使用div 或ul 或ol 等

3.面包屑导航无需跳转

4.最外层元素类.breadcrumb

5.面包屑项目 breadcrumb-item

6.可以更改连接符号, 使用伪元素

.breadcrumb-item + .breadcrumb-item::before {

      content: ">";

}

# 折叠

1.折叠是由两个元素组成,一个负责用户交互点击。另一个需要现实和隐藏，通过点击完成折叠效果

2.负责点击(交互元素)的元素，如按钮a标签等 需要通过js关联，被自己管理的元素,需要用到被管理元素的id使用data-target="#id"被管理元素的id选择器

3.需要折叠效果时,交互元素(btn或a等),要是用js控制被管理元素的显示和消失 data-toggle="collapse"控制折叠

4.被控制元素最开始需要消失 因此需要class='collapse'类让自身消失,通过点击按钮给被控制元素加show类,让元素显示

# 卡片

1.卡片的应用场景多用于商品的图文介绍,最外层的元素 card,边框线,圆角,flex布局

2.图片,主要是顶部的圆角card-img-top ,底部圆角card-img-bottom

3.卡的主体部分card-body,有内边距

4.card-title卡片标题格式

5.card-text 卡片的文字描述格式

# 分页

最外层可以使用div或者ul等标签自动将元素变成flex布局使用,同时去掉ul的内边距及标识符,但存在16px的下外边距

2.分页内层也是分项目page-item

3.分页项内有链接page-link

4.被激活的分页项需要加active类

5.需要禁用的分页项,如上一页或者下一页,加disabled

6.因分页最外层是弹性布局 因此可以适应弹性布局的容器属,如主轴对齐方式等

# 导航条

1.作用，响应式页面的导航部分内容比较多 在页面缩小是，导致宽度不够不足以容纳内容，所以在某个响应式的范围内出现内容消失但还会出现一个小菜单 显示的内容会再次出现在小菜单内，保证菜单的完整性

2.最外层，要有最基础的类

navbar navbar-expand -*,  *代表响应式sm md lg xl

3.navbar-expand-*他决定小菜单显示的页面宽度

4.navbar 的主题色和背景色加上之后,小菜单才可以显示样式

5.主题色navbar-light(浅色背景)搭配浅色背景bg-light navbar-dark(深色主题),搭配深色背景bg-dark.

6.小菜单样式,navbar-toggler 负责缩小时展示，放大时消失.小菜单需要折叠的js效果data-toggle="collapse"控制大菜单。通过id属性data-target="#大菜单id"

7.小菜单中有一个span元素，可以当作三条小横线的icon使用navbar-toggler-icon类

8.大菜单必须有id属性,折叠消失类collapse 把大菜单当作flex布局的navbar-collapse

# 轮播图

1.最外层基础类carousel 只有相对定位，意味着它内部一定有绝对定位的元素

2.图片展示区 里面有多张图片 所以最外层限制大小范围carousel-inner

3.图片展示区内有多张图片，每张图片都是一个图片展示项

规范了一些样式 主要是让当前元素不显示，他需要激活时才显示，只有active的类(激活)才可以显示

其他不出现

4.最外层轮播图可受js控制，利用属性让轮播图定时移动效果data-ride="carousel"使用了定时器，让图片自动轮播

5.左右切换按钮

carousel-control-prev(上一个左)定位在轮播的左侧中心位置

carousel-control-next(下一个左)定位在轮播的右侧中心位置

6.通过js控制轮播图，左右移动

data-slide="prev"(向左移动上一张图)

data-slide="next"(向右移动下一张图)

7.向左向右小图标，使用span 标签即可

carousel-control-prev-icon

carousel-control-next-icon