2018年7月23日 星期一

【Bootstrap】nav tabs頁籤的寫法


頁籤的寫法

・輸入群組（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
 <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">&times;</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">&times;</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">&times;</span>
                        </button>
                    </div>
                </li>

            </ul>
            <div class="card-footer">表尾</div>
        </div>

    </div>

</body>
​
於

沒有留言:

張貼留言