旅馆预约服务练习纪录-订房确认页面练习

这次要写的练习纪录是选定房间后会弹跳出来的视窗，但因为小弟 JS 还在学习中，还不会写弹跳出来的互动行为，所以先把静态页面做练习，这次的练习使用到 BS4 框架还有一点手刻完成的，画面如上方所示。

左半边表单写法

这里面有使用到 BS4 的框架，因为有点懒惰用手刻表格，但经过前几次的练习现在回头再看 BS4 的官方文件的确是马上就看懂了，真是开心。

HTML

使用了 input group 的元件，可以透过框架学习到整体的架构该怎么写。在 input 的 type 中可以选择所需要的属性：

名字就用 text。电话可以使用 tel ，可能在 PC 上看不出来，但手机会显示电话号码的按键，比较方便。日期可以直些使用 date 就可以直接选择日期，很方便呢!按钮的的属性记得使用 button ，后续再使用 JS 产生 click 事件，会比较好，有些人会用 a 连结，但为了不让电脑搞错，建议 a 还是连结网页功能就好。

 <div class="inputLeft">      <form>        <div class="form-group">          <label for="exampleInputtext1">姓名</label>          <input type="text" class="form-control" id="exampleInputtext1" aria-describedby="textHelp"            placeholder="请输入大名">          <label for="exampleInputnumber1">电话</label>          <input type="tel" class="form-control" id="exampleInputnumber1" aria-describedby="textHelp"            placeholder="请输入电话">          <label for="checkIn">入住时间</label>          <input type="date" class="form-control" id="checkIn" aria-describedby="textHelp">          <label for="checkOut">退房时间</label>          <input type="date" class="form-control" id="checkOut" aria-describedby="textHelp">          <p class="info">2 天，1 晚平日</p>          <!-- 这里之后要用 JS 显示正确的几天几晚的数字 -->        </div>      </form>      <div class="bill">        <p class="billText">总计</p>        <p class="billPrice">$1,380</p>      </div>      <button type="button" class="btn">确认送出</button>      <p class="btnInfo">此预约系统仅预约功能，并不会对您进行收费</p>    </div>    <!-- inputLeft end -->

再来右半部区块

重複的东西很多，就看旅馆预约服务练习纪录-订房页面练习所记录的，这篇着重在于新内容，就是下面三块表格。

HTML

写了几页之后，就会了解到只要像这种一块一块的，就是看有几块就分几个 div ，这边也使用到 OOCSS 跟 BEM 的命名方式来撰写，尽量让 class 有语意化，回来维护时比较方便也直觉。

<div class="roomOrderProcess">        <div class="box box1">          <div class="boxTitle">            <img src="img/icon/order.svg" alt="">          </div>          <div class="boxContent">            <p>送出线上预约单</p>          </div>        </div>        <!-- box1 end -->        <div class="box box2">          <div class="boxTitle">            <img src="img/icon/icons8-search_chat.svg" alt="">          </div>          <div class="boxContent">            <p>系统立即回覆是否预订成功</p>            <p>并以简讯发送订房通知</p>            <p>(若未收到简讯请来电确认)</p>          </div>        </div>        <!-- box2 end -->        <div class="box box3">          <div class="boxTitle">            <img src="img/icon/credit_card.svg" alt="">          </div>          <div class="boxContent">            <p>入住当日凭订房通知</p>            <p>以现金或刷卡付款即可</p>            <p>(仅接受VISA、JCB、银联卡)</p>          </div>        </div>        <!-- box3 end -->      </div>

SCSS

这边使用很多 flex 的特性，让其横向排列，几乎不再用 float 了。
表格这边大量的使用以下三个语法：

    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;

可见许多表格或是图示这样的呈现是很常见的，像这种就可以变成一个 @mixin

.roomOrderProcess {    display: flex;    margin-top: 3%;    .box {      width: 100%;      height: auto;      border: 1px solid #949C7C;      border-radius: 0 0 10px 10px;    }    .box1,    .box2,    .box3 {      width: 33.33333%;      margin: 0 3%;    }    .boxTitle {      width: 100%;      height: auto;      background-color: #949C7C;      display: flex;      flex-direction: column;      justify-content: center;      align-items: center;      //使用 flex 特性让 img 在框框里水平与垂直对齐      img {        padding: 10px 0 10px 0;      }    }    .boxContent {      display: flex;      flex-direction: column;      justify-content: center;      align-items: center;      //使用 flex 特性让文字在框框里水平与垂直对齐      p {        font-size: 12px;        color: #949C7C;        padding: 2% 0;      }    }  }

Codepen https://codepen.io/hnzxewqw/pen/mddZexE
GitHub https://hsuchihting.github.io/hotel1103/hotel_price_info.html