---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/23(一) 每日任務

## 題目
Bootstrap 都是使用 「-」的方式做命名，將此命名方式修改成 BEM 的命名方式

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/gOwaPqw?editors=0100) 若答案有爭議可以提出-->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/MWpVRNY
-->

<!-- 1. 肉鬆
Codepen: https://codepen.io/klrkicog/pen/gORYqVE?editors=1100
-->

<!--2. Cheng Pei-hsuan
Codepen: https://codepen.io/PaCheng/pen/powzYoy
-->

<!-- 3.Lina Chen
codepen: https://codepen.io/LinaChen/pen/xxrKMNX
-->

<!--4.陳sam
codepen:https://codepen.io/euldpliv/pen/QWgLopE
-->

<!-- 5. kevinhes
codepen:　https://codepen.io/kevinhes/pen/xxrKBLz
-->

<!-- 6. 雷古娜
codepen：https://codepen.io/tinahopo/pen/bGRbZEN -->

<!-- 7. lumei
codepen：https://codepen.io/l_umei/pen/eYROXye
-->

<!-- 8. Cate Chang
codepen：https://codepen.io/tutz/pen/OJgLqwy
-->

<!-- 9. 大衛
codepen:https://codepen.io/exnsrpjc/pen/eYROXjV?editors=0100
-->

<!-- 10.WilsonHan
https://codepen.io/wi0821/pen/WNOeWpd
-->

<!-- 11.curry
https://codepen.io/Ted19851223/pen/BaZBevE
-->
<!-- 12.群嘉
condepen:https://codepen.io/efzdamnp-the-lessful/pen/qBjWzVM
-->

<!-- 13. Gui
https://codepen.io/guitimliu/pen/dyRbBKr -->

<!-- 14. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/NWgKQZB
-->

<!-- 15. Joe Kuo
Codepen: https://codepen.io/alertislow/pen/XWgWJXx
-->

<!-- 16.黃士桓
codepen: https://codepen.io/shr-huan-huang/pen/WNONvpP?editors=1000
-->

<!-- 17.沈依蓉
https://codepen.io/lily-oa/pen/gOROpZQ?editors=1010
-->

<!-- 18.Jean
https://codepen.io/jean-liu/pen/YzQKgGd?editors=1000
-->

<!-- 19. Tori
codepen: https://codepen.io/hayen/pen/VwWYaYj?editors=1100
-->

<!-- 20.Jun Chan
codepen:https://codepen.io/chujunchan/pen/vYZEKVb
-->

<!-- 21.Erin Huang
https://codepen.io/ErinHuang/pen/xxrbWdL
-->

<!-- 22. Sihle Huang
code : https://codepen.io/bugbug777/pen/KKqwExV?editors=1100
-->

<!-- 23. ZOE WU
https://codepen.io/Zoechiueh/pen/abwOBNg?editors=1000
-->

<!-- 24. AKI
https://codepen.io/akichen27/pen/WNOxpqe
-->

<!--25. Joy Cheng
https://codepen.io/joycheng5432/pen/PojGPKz?editors=1000
-->

<!--26. Tina Yen
codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/XWgjprZ
-->
<!--27. 袁祥恩
codepen: https://codepen.io/ovfxsavp-the-bashful/pen/wvegJKg?editors=1000
-->

<!--28. jimmyFang
codepen: https://codepen.io/pohxiqqo/pen/BaZpYQV?editors=1000
-->