[Day 13] SCSS 结合 Bootstrap 网页制作

前言

非常感谢六角学院在今年疫情最严重的5、6月份，提供了一系列的线上体验学习课程，能够从课程中，再度复习了CSS、SCSS还有 Bootstrap 5 的使用技巧，观摩不少同学的笔记和语法。

之前的学习一直都是个别练习，像是 Sass 学完就没有再多加应用於其他作品上，而Bootstrap 也是很快速地看了几个线上课程就没再使用，刚好趁着六角学院提供募资平台的设计稿，教学影片也分别有 SCSS 和 Bootstrap 5，就着手尝试制作。

课程影片：
六角学院 - Bootstrap 5 新手教学实战营 - 最终版型讲解 (上)
六角学院 - 第四堂 SCSS 切版任务 - 上半部

募资平台网站介绍

• 此为募资网站，有登入视窗
• 产品的募资金额、进度
• 中间主要为以页签来显示：产品内容介绍、留言区、专案进度...等详细资料
• 在画面右侧，会有各个募资的选项，可以依据需求来选取赞助专案

成品

制作要点

1. 隔线系统的规划

• BS5为手机版优先，所以可以直接设定 lg 或 md
• 下图的划分为左7(col-md-7)、右5(col-md-5)
  左方：放入产品主要照片
  右方：募资金额、icon、赞助、分享等按钮
• 在 Bootstrap 5 新手教学实战营 - 最终版型讲解 (下) 7:40 左右，老师也走提到，哪些地方可以不用特意使用隔线系统

2. 善用Bootstrap 官方文件查询

使用 Bootstrap 5 来制作，最长需要的就是文件参考，并复制网站的语法啦。
所以像是导览列(Navbar)、进度条(Progress)、工具提示框(Tooltips)，都可以用关键字在官方文件搜寻。

进度条的制作

• 使用BS5的progress
  • progress为外层的div,progress-bar为内层有颜色区块
  • 颜色的修改可以到scss_variables.scss去修改，或是

<div class="progress mb-3">
<div class="progress-bar bg-primary" role="progressbar" style="width: 45%;" aria-valuenow="25"
              aria-valuemin="0" aria-valuemax="100">45%</div>
 </div>

icon小标签

• 使用BS5的Tooltips
  • 要先加入JS语法
  • 在要显示的图示加入data-bs-toggle="tooltip" 与JS语法呼应，data-bs-placement="top" title="品质保证"标签要显示的位置与显示的文字

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

 <li>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="品质保证"><img src="https://hexschool.github.io/boootstrap5WebLayout/assets/icon_good02.svg" alt="品质保证">
  </a>
  </li>

补充SCSS档案编制

• 在第四堂 SCSS 切版任务 - 下半部 老师透过讲解学员切版架构的档案，来讲解SCSS的分档。
  • 分档的方式主要视自己专案上的区分来编制
• 几个档案名称整理
  • vendor:外部套件，放置bootstrap或其他frameworks、liberaries、hover.css
  • utils(helpers):工具类的class，放置字的大小、margin、border颜色设置、hover效果
  • partials:放置一些部分区域的css，如：nav、footer
  • layout: （共通的布局）如表头、表尾，就是每页都会出现
    而这几个档案，放在main.scss要有顺序
    
  • base: p段落、h1..等的全站设定(css reset)
  • components ：元件，如按钮、卡片的设定
• 在档案的分配以及里面的设定，还有很多需要学习，一开始尝试着拆分SCSS档案结构总是不知道如何下手，回头来看此专案也发现有需多可以加强的地方。