【Bootstrap】nav tabs頁籤的寫法

https://codepen.io/NishanYeah/pen/WKpgOZ

頁籤的寫法

・輸入群組（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>

​

【Bootstrap】格線、spacing、flex

格線

• 結構：・container>row>col>內容（內容不要放在col上）

如果什麼都不寫，從xs～到最大，都是一樣
col是從最小的xs為主（行動優先），至於其他尺寸需要在自己設定。

col-sm 倒下的手機
col-md 平板
col-lg 大螢幕
col-xl 大大螢幕

spacing

m/p方向-0~5

例如：
ml-4
ml-auto

flex

都是寫在外層

<div class="d-flex flex-row justify-content-end">  
//d-flex表示啟動flex排版,flex-row可以不用寫,justify-content-end可以排到右邊
           <div>1</div>
           <div>2</div>
           <div>3</div>
 </div>

• 啟用flex

在外層寫d-flex

• flex-direction:row 簡寫成以下

flex-row
flex-row-reverse
flex-column
flex-column-reverse

• justify-content:flex-start 簡寫成以下

justify-content-start
justify-content-end
justify-content-center
justify-content-between
justify-content-around

• align-items:flex-start 簡寫成以下

align-items-start
align-items-end
align-items-center
align-items-baseline
align-items-stretch

​

【Bootstrap】表格

表格基本結構

https://codepen.io/NishanYeah/pen/JBEXZO

div.container>table>thead>th*n+tbody>tr>td*n

• table記得要加 class=”table”
• table記得要加 class=” table-striped “ 上樣式
• thead可以加table-dark換顏色

 <div class="container">
            <table class="table table-striped  mt-5">
                <thead class="table-dark">
                    <th>物品</th>
                    <th>價格</th>
                    <th>價值</th>
                </thead>

                <tbody>
                    <tr>
                        <td>冷泡茶</td>
                        <td>100</td>
                        <td>很棒</td>
                    </tr>
                    <tr>
                        <td>毛巾</td>
                        <td>400</td>
                        <td>很棒</td>
                    </tr>
                    <tr>
                        <td>西瓜</td>
                        <td>700</td>
                        <td>還好</td>
                    </tr>
                </tbody>
            </table>
        </div>

​