頁籤的寫法
・輸入群組（input-group）：prepend+input+append
・卡片(card)：header+body+footer
・頁籤：nav（nav-tabs/card-header-tabs）>li.nav-item>a.nav-link
・列表：list-group>list-group-item
・checkbox：div.form-check>input.form-check-input+span.form-check-label
・checkbox：div.form-check>input.form-check-input+span.form-check-label
<body>
<div class="container">
<h1 class="text-muted mt-4">代辦事項</h1>
<div class="alert alert-secondary">
<span>輸入你的待辦清單吧！</span>
</div>
<!-- 輸入 --> 輸入群組：prepend+input+append
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">代辦事項</span>
</div>
<input class="form-control" placeholder="輸入任務">
<div class="nput-group-append">
<button class="btn btn-primary">送出</button>
</div>
</div>
<!-- 輸入 -->
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item ">
<a href="" class="nav-link active ">功課</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">任務</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">雜事</a>
</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="d-flex">
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label for="" class="form-check-label">數學</label>
</div>
<button class="close ml-auto">
<span aria-hidden="true">×</span>
</button>
</div>
</li>
<li class="list-group-item">
<div class="d-flex">
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label for="" class="form-check-label">國文</label>
</div>
<button class="close ml-auto">
<span aria-hidden="true">×</span>
</button>
</div>
</li>
<li class="list-group-item">
<div class="d-flex">
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label for="" class="form-check-label">嗨</label>
</div>
<button class="close ml-auto">
<span aria-hidden="true">×</span>
</button>
</div>
</li>
</ul>
<div class="card-footer">表尾</div>
</div>
</div>
</body>
沒有留言:
張貼留言