1. 普通輸入框

<div class="form-group row">
    <label for="studentId" class="col-sm-2 col-form-label">學號</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="studentId" placeholder="學號">
    </div>
</div>

 

2. 單選按鈕

<fieldset class="form-group">
    <div class="row">
        <legend class="col-form-label col-sm-2 pt-0">性別</legend>
        <div class="col-sm-10">
            <div class="form-check">
                <input class="form-check-input" type="radio" name="gridRadios" id="male"
                       value="male" checked>
                <label class="form-check-label" for="gridRadios1">
                    男
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="gridRadios" id="female"
                       value="female">
                <label class="form-check-label" for="gridRadios2">
                    女
                </label>
            </div>
        </div>
    </div>
</fieldset>

表單組

https://getbootstrap.net/docs/components/forms/#form-groups

水平排列

https://getbootstrap.net/docs/components/forms/#inline

 

3.  日期選擇

Tempus Dominus，一款 Bootstrap 4 的時間選擇器

官網：https://getdatepicker.com/5-4/Usage/

簡單用法可以參考部落格：https://blog.csdn.net/qq_39291919/article/details/111659094

<div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <div class="form-group">
            <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                <input data-provide="datepicker" type="text"
                       class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
                <div class="input-group-append" data-target="#datetimepicker1"
                     data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
</div>