4 화면이 예쁘지 않으니 부트스트랩 CSS 코드로 이 부분에 디자인을 적용해 보겠습니다. new.mustache 파일의 <form>…</form> 태그 부분을 다음과 같이 수정합니다. 이 코드는 <input> 태그와 <textarea> 태그에 디자인 요소만 바꾼 것입니다. 여기서는 폼 데이터를 전송하는 실습이 목적이므로 CSS 코드에 관한 자세한 설명은 생략합니다.
templates/articles/new.mustache
{{>layouts/header}}
<form class="container"> --- 부트스트랩 CSS 코드 적용
<div class="mb-3">
<label class="form-label">제목</label>
<input type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">내용</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{{>layouts/footer}}