# 哒哒哒哒哒哒

**Repository Path**: yang-linjie-0815/dada-dada

## Basic Information

- **Project Name**: 哒哒哒哒哒哒
- **Description**: 自己的仓库，练习做新项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-04-27
- **Last Updated**: 2022-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# day20

### 9.导航和选项卡【10:41】

https://v5.bootcss.com/docs/components/navs-tabs/

#### （1）导航

```html
 <ul class="nav">
        <li class="nav-item">
          <a href="#" class="nav-link">首页</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">学习用品</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">私人定制</a>
        </li>
      </ul>
```



####  （2）tab面板

* `.nav`控制区外层
* `.nav-tabs`控制区的样式
* `.nav-link`触发按钮每一个的样式
* js属性：`data-bs-toggle="tab"`tab的切换
* js属性：`data-bs-target="#对应关联展示区的id"`
* `.tab-content`展示区的最外层
* `.tab-pane`消失，对应显示应具有`.active`显示
* `.fade`过渡，过渡的样式`.show`

```html
  <div class="container">
      <!-- 触发区按钮区 -->
      <div class="nav nav-tabs">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#one">商品详情</button>
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#two">商品评价</button>
      </div>
      <!-- 展示区 -->
      <div class="tab-content">
        <div class="tab-pane fade show active" id="one">默认打开的对应第一个按钮的</div>
        <div class="tab-pane fade" id="two">第二块点击商品评价展示的内容</div>
      </div>
    </div>
```

#### （3）面包屑导航

* `.breadcrumb`外层列表基础类
* `.breadcrumb-item`面包屑导航项
* 改变面包屑的分隔符`style="--bs-breadcrumb-divider:'>';"`

```html
    <ol class="breadcrumb" style="--bs-breadcrumb-divider:'>';">
      <li class="breadcrumb-item">
        <a href="#" class="text-decoration-none text-dark">首页</a>
      </li>
      <li class="breadcrumb-item">
        <a href="#" class="text-decoration-none text-dark">学习用品</a>
      </li>
      <li class="breadcrumb-item">
        <a href="#" class="text-decoration-none text-dark">笔记本电脑</a>
      </li>
    </ol>
```



### 10.分页【11:48】

https://v5.bootcss.com/docs/components/pagination/

* `.pagination`最外层列表基础类
* `.page-item`分页项
  * `.disabled`禁用状态
  * `.active`激活状态
* `.page-link`分页链接样式，有间距和字体样式

```html
    <ul class="pagination">
      <li class="page-item disabled">
        <span class="page-link">上一页</span>
      </li>
      <li class="page-item active"><a href="#" class="page-link">1</a></li>
      <li class="page-item"><a href="#" class="page-link">2</a></li>
      <li class="page-item"><a href="#" class="page-link">3</a></li>
      <li class="page-item"><a href="#" class="page-link">4</a></li>
      <li class="page-item">
        <span class="page-link">下一页</span>
      </li>
    </ul>
```



### 11.卡片【14:00】

https://v5.bootcss.com/docs/components/card/

* `.card`卡片的外层父级基础类，有边框有圆角
* 图片`.card-img-top`顶部图片，`.card-img-bottom`底部图片

* `.card-body`卡片的文字部分外包裹标签，有间距
* 卡片的 内容区域可以加`.card-title`和`.card-text`文字描述等



### 12.轮播图【16:16】

https://v5.bootcss.com/docs/components/carousel/

* `.carousel`最外层基础类
* `.slide`自动轮播了，平滑过渡样式
* js属性：`data-bs-ride="carousel"`自动轮播定时器
* `data-bs-interval="2000"`轮播图定时器的时间
* 图片区`.carousel-inner`最外层
  * `.carousel-item`图片组，都是消失状态
  * `.active`只有一个能显示，js切换这个类

```html
     <div class="carousel slide" data-bs-ride="carousel">
        <!-- 图片区 -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./img/xz-img/index/banner1.png" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="./img/xz-img/index/banner2.png" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="./img/xz-img/index/banner3.png" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="./img/xz-img/index/banner4.png" class="d-block w-100">
          </div>
        </div>
        <!-- 向左区 -->
        <!-- 向右区 -->
        <!-- 控制区 -->
      </div>
```



#### 左右控制

* `.carousel-control-prev`后退区域
* `.carousel-control-prev-icon`后退符号
* `data-bs-slide="prev"`后退按钮js控制轮播图倒退
* `.carousel-control-next`向前区域
* `.carousel-control-next-icon`向前符号
* `data-bs-slide="next"`前进按钮js控制轮播图前进
* 控制前进和后退必须有目标，是整个轮播图的`id`,`data-bs-target="#lbt"`左右控制符的目标都是轮播图本身

```html
        <!-- 向左区 -->
        <button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#lbt">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <!-- 向右区 -->
        <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#lbt">
          <span class="carousel-control-next-icon"></span>
        </button>
```

#### 控制符号

* `.carousel-indicators`控制符号的最外层
* `.active`当前激活项
* js属性：`data-bs-target="#lbt"`关联轮播图id
* js属性：`data-bs-slide-to="0"`控制图片的索引

```html
<!-- 控制区 -->
        <ul class="carousel-indicators">
          <li class="active" data-bs-target="#lbt" data-bs-slide-to="0"></li>
          <li data-bs-target="#lbt" data-bs-slide-to="1"></li>
          <li data-bs-target="#lbt" data-bs-slide-to="2"></li>
          <li data-bs-target="#lbt" data-bs-slide-to="3"></li>
        </ul>
```





### 作业

1. 一定要完成学子商城首页主体布局内容（老师会给完整版）
2. sass安装说明，看了，提前在自己电脑上安装sass

#### sass的安装说明

##### 一定按照老师的方法做，一定要做！不要等到周一再安装

在安装之前先检查是否已经安装成功，在cmd中输入 `sass -v` 或 `sass --version` 有版本号就不需要以下操作了。两个都试试，有一个出现版本号的就可以了。

如果以上版本号都没有出来进行以下步骤：请大家先认真阅读之后再操作！！！

1. 在cmd中输入ruby -v ，查看是否有版本号

2. 如果有版本号，如ruby 2.5.1等，就是用 `gem install sass` 安装。如果是mac系统一般情况下自带ruby，使用`sudo gem install sass`  ，安装过程因为版本不同可能需要选择，有的话可以选1。安装完成在cmd中 `sass -v` 出现版本号就是安装成功了。

3. 在cmd中输入`ruby -v` ，没有ruby版本号，则使用npm安装。先检查是否有`npm -v `，有版本号出现，执行以下命令： `npm install -g sass `安装过程因为版本不同可能需要选择，有的话可以选1

4. 安装完sass之后，在cmd中输入 `sass --version`检查是否有版本号，有就是安装成功
5. 如果 `npm install -g sass`安装失败，可以尝试先安装ruby，下载地址：链接: https://pan.baidu.com/s/16o_rf1RSd4VG9ifA6psp9g 提取码: 49pc
6. 使用ruby软件安装完成后，在cmd中输入 `ruby -v` 查看版本号，有的话ruby就安装成功了。
7. 安装ruby后，在cmd输入： `gem install sass` 安装sass