【设计+切版30天实作】｜Day26 - Reviews区块 - 卡片可以因应不同用途而千变万化

前面完成了「Carousel」区块，今天来完成「Reviews」的区块。

数据收集

card 标题的样式

• Font-weight：Regular
• Font-size：16px
• Text-color：$Secondary

card 内文的样式

• Font-weight：Normal
• Font-size：16px
• Text-color：$Secondary

card img的大小：96px*96px

卡片之间的margin : 24px

card的padding : 24px 24px

card img的margin-bottom : 16px

card 标题的margin-bottom : 8px

card 的background-color（渐层） : linear-gradient(deg143,#9B3C05,#4E1E03)

步骤

先开一个新区块 ，加入container、row以及col

1. 一样先新增section
2. Reviews这个区块是在container里面，所以一样要新增container
3. 由卡每个卡片各占4栏，所以这边就会是col-4
4. 这边有6个卡片，所以新增6个col-4
5. 因为margin-top为96px，所以在section加入mt-10

<section class="mt-10">
		<div class="container">
	    <div class="row">
		      <div class="col-4"></div>
		      <div class="col-4"></div>
		      <div class="col-4"></div>
		      <div class="col-4"></div>
		      <div class="col-4"></div>
		      <div class="col-4"></div>
	    </div>
	  </div>
</section>

去Bootstrap官网复制卡片的code

<div class="card" style="width: 18rem;">
	  <img src="..." class="card-img-top" alt="...">
	  <div class="card-body">
	    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
	  </div>
</div>

（＊ 这边可以删掉card的style="width: 18rem;"，因为会这样设定宽度，只是因为它要在bootstrap官网上呈现上图18rem的宽度XDD）

修改卡片的内容

1. 插入img
2. 新增标题
3. 新增内文

<section class="mt-10">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="card">
          <img src="style/PHOTO/review-1.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h6>Rose Chang / 2021.01.15</h6>
            <p>之前在健身房当教练，即便有不少学生，但公司会抽成，所以收入没有很理想；而GYMATE并不会抽成，觉得很有良心！</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

客制化的部分

1. 设定card的padding为24px → p-6
2. 把card预设的border去掉 → border-0
3. 设定card的背景色为渐层色 → bg-gradient
4. 设定card里的文字为text-secondary
5. 把card-body预设的padding去掉 → p-0
6. 设定文字的样式与各部分的间距

<div class="card p-6 border-0 bg-gradient text-secondary">
  <img src="style/PHOTO/review-1.png" class="card-img-top mb-5" style="width: 96px;" alt="...">
  <div class="card-body p-0">
      <h6 class="mb-2">Rose Chang / 2021.01.15</h6>
      <p class="card-text fw-light">之前在健身房当教练，即便有不少学生，但公司会抽成，所以收入没有很理想；而GYMATE并不会抽成，觉得很有良心！</p>
  </div>
</div>

把剩下5个卡片内容也新增上去後，就会发现「咦！忘了加margin-bottom！」XDXD

加上後就完成啦XD

登登登登，Revews的区块就完成啦！明天继续来切下一个区块吧 (๑´ㅂ`๑)