今天用 bootstrap 來套版我們的 TodoList 吧

List

使用 List Group

html 中的 ul 改成

<ul class="list-group " id="todo-list">
  ...
</ul>

將 template 的 li.class 加上

• list-group-item
• list-group-item-action

view = '<li class="list-group-item list-group-item-action {{check}}" data-i="{{i}}"><span class="todo-content">{{content}}</span><span class="close">x</span></li>';

很明顯看到樣式改變了

接下來在 render 中把 {{check}} 得值改成 list-group-item-dark 讓他來做完成的樣式

checkValue = item.check ? 'list-group-item-dark' : '';

使用 Form

使用官網的 Form 和 Button

<form class="form-inline mt-3 mb-3">
    <div class="form-group">
        <label for="inputPassword2" class="sr-only">Todo</label>
        <input class="form-control" type="text" id="todo-input" placeholder="待辦事項">
    </div>
    <button class="btn btn-primary ml-3" id="addTodo">新增</button>
</form>

因為這邊加了 form 所以 button 會有 submit 的動作，使用者按下新增後會重新整理，但這不是我們要的所以要把它關掉

在 main.js 中 加上

event.preventDefault()

Spacing

Bootstrap 有提供用 class 就可以調整 margin, padding 的距離方法

這邊使用了 mt-3 md-3

m 的意思是採用 margin

第二個參數

t 代表是 top

而 d 代表 down

3 代表預設的 $spacer

可以參考

Where property is one of:

m - for classes that set margin
p - for classes that set padding
Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

todoButton.addEventListener('click', function (e) {
  e.preventDefault();
  ...
}

加上 Header

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">待辦清單</a>
</nav>

這邊使用了黑色的 theme
而 navbar 有著 bootstrap 的 RWD 功能如果有使用選單的話可以照著文件啟用 toggle 功能

附上今天的成果code