Cycle View and Bootsrp applicate on Handlebars (๑•́ ₃ •̀๑) 🇹🇼

在這個單元，我們就要來學習如何用樣板引擎所提供的「迴圈」功能，讓我們快速產生多筆相同結構但不同內容的 HTML

Hey ~~ so complicate ~~~~~~~I hate cycle la .

…………………………………………….….. (╥﹏╥)

Step 1 . Set Variables on app.js

設定變數及編輯將要回圈的數字 [ 1–8 ]

open your “ app. js “ written code ….

//past the number of app.js for index.handlebars partial template //
const = numberList = [ 1 ,2 ,3 ,4 ,5,6,7,8] //<===written here 
<-----------res. render ------------------------------->
//add Object paramas on res.render {} , let tell Handlebars what you wann to do // 

res.render ( ' index ', { numbers : numbersList } )   

Step2 : Set cycle / 設定迴圈 :

May be you have asking Why Html could be set Cycle ??

It’s pre-processing through Handlebars , and than become Html .

{{#each}} …….{{/each }}

Ｔhat is will be iterate over a inside block

inside contetn could be reference app.js of Variables

Set cycle on index.handlebars. {{ #each }} …{{/each}}

e.g :  {{#each numbers }} <p> ....insideblock .......</P> {{/each}}
inside block = <P>  {{this}}  </P>   still iterate ....  

insideblock ➡ {{this}}

{{ this }} will be reference app.js of Variables …

⬇

Reference app.js variables :

Reference app.js varibles as like below  ----> 
const Barry = [ bala , barry , Rober is gonds]

{{this }} print to Html :

<p> bala ba la </P>
<p> barry is handsame </P>
<p> Rober is gones </P>

What about {{This }} on cycle ?

Cycle finily to finshed …..It’s Savage ! du

Step 3 : Set Handlebars of Bootstrap

Bootstrap 應用 ：

d-flex

如 native css （原始CSS)，要使用 flexbox, 要在 container 上宣告 class=”d-flex” 或是 class=”d-inline-flex”.

<div class = "d-flex .......   "

d-inline-flex

e.g : 
<div class="d-inline-flex justify-content-center">........</div>
1. 看清楚要先宣告 d-flex  
2. 決定d-flex 的 container inline (符合貼齊邊線） 於是 d-inline-flex
2. 後面可以直接 justify-content-center , 中間皆不需要任何分隔號. 

copy form w3schools

align-items-XXXX / 上下(y軸) row —

對齊Flex item

参数有： start、end、 center、baseline、 stretch (Default)。

https://getbootstrap.com/docs/4.4/utilities/flex/

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

justify-content-XXXX. //(x軸) col —

bg-XXXX / 背景顏色

bg is mean Background Colors , refrence .. that「 colors name 」 is awesome and stupid .

Text-XXX / 字行顏色

round-circle

About Space / 空間間距

Native CSS → box model

don’t ask me , waht is CSS of Box model . — ( •́_ゝ•̀ ) 🐢

e.g :  my- 1 , my-2 , my-3 , my -4 , my -5