XOOPS輕鬆架 - 線上書籍

:::

點下資訊社聚會教材範例
===========

同時支援BootStrap3~BootStrap5的寫法

### 表單

```markup
<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="row two-col"><div class="col-sm-6 span6 coln-1">![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/36/火狐截图_2020-08-07T02-52-59.836Z.png)

</div><div class="col-sm-6 span6 coln-2">![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/36/火狐截图_2020-08-07T02-53-39.663Z.png)

</div> </div>### 單選

```markup
<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="row two-col"><div class="col-sm-6 span6 coln-1">![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/36/b3.png)

</div><div class="col-sm-6 span6 coln-2">![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/36/b4.png)

</div> </div>### 表單群組

```markup
<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>
```

<div class="row two-col"><div class="col-sm-6 span6 coln-1">![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/36/火狐截图_2020-08-07T01-06-37.715Z.png)

</div><div class="col-sm-6 span6 coln-2">![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/36/火狐截图_2020-08-07T01-08-22.063Z.png)

</div> </div>### 緊密表格

```markup
<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>
```

<div class="row two-col"><div class="col-sm-6 span6 coln-1">![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/36/火狐截图_2020-08-07T01-23-18.606Z.png)

</div><div class="col-sm-6 span6 coln-2">![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/36/火狐截图_2020-08-07T01-24-02.501Z.png)

</div> </div>### 小型按鈕（順序要對）

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

<div class="row two-col"><div class="col-sm-6 span6 coln-1">![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/36/火狐截图_2020-08-07T02-30-13.955Z.png)

</div><div class="col-sm-6 span6 coln-2">![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/36/火狐截图_2020-08-07T02-30-44.719Z.png)

</div> </div>### 靠左對齊

```markup
class="text-left text-start"
```

### 靠右對齊

```markup
class="text-right text-end"
```

### 靠左文繞圖

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

### 靠右文繞圖

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

:::