9. B3、B4、B5整合寫法

同時支援BootStrap3~BootStrap5的寫法

表單

<form action="main.php" method="post" id="myForm" enctype="multipart/form-data" class="form-horizontal">
    <div class="form-group row mb-3">
        <label class="col-sm-2 control-label col-form-label text-md-right text-md-end">
            真實姓名
        </label>
        <div class="col-sm-4">
            <input type="text" name="name" id="name" class="form-control validate[required]" value="<{$name}>" placeholder="">
        </div>

        <label class="col-sm-2 control-label col-form-label text-md-right text-md-end">
            密碼
        </label>
        <div class="col-sm-4">
            <input type="text" name="pass" id="pass" class="form-control " placeholder="要改密碼才需填寫">
        </div>
    </div>
</form>

單選

<div class="form-check-inline radio-inline">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="enable" value="1">
        顯示
    </label>
</div>
<div class="form-check-inline radio-inline">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="enable" value="0">
        關閉
    </label>
</div>

表單群組

<div class="input-group">
    <div class="input-group-prepend input-group-addon">
        <span class="input-group-text">真實姓名：</span>
    </div>
    <input type="text" name="name" class="form-control" placeholder="真實姓名">
    <div class="input-group-append input-group-btn">
        <button type="submit" class="btn btn-primary">搜尋</button>
    </div>
</div>

緊密表格

<table class="table table-sm table-condensed">
    <tr>
        <th>XXX</th>
        <th>XXX</th>
        <th>XXX</th>
    </tr>    
    <tr>
        <td>OOO</td>
        <td>OOO</td>
        <td>OOO</td>
    </tr>
</table>

小型按鈕（順序要對）

<a href="#" class="btn btn-warning btn-sm btn-xs">編輯</a>

靠左對齊

class="text-left text-start"

靠右對齊

class="text-right text-end"

靠左文繞圖

class="pull-left float-left float-start"

靠右文繞圖

class="pull-right float-right float-end"