Bootstrap表單版面有哪幾種方式？ Bootstrap表單佈局的建立方法（附程式碼）-html教學-PHP中文網

Bootstrap是什麼?Bootstrap是一個用於快速開發 Web 應用程式和網站的前端框架，那麼，Bootstrap如何來建立一個表單？ Bootstrap 透過一些簡單的 HTML 標籤和擴充的類別來建立出不同樣式的表單，下面我們就來看看Bootstrap建立表單的方法。

Bootstrap表單佈局

【相關影片推薦：Bootstrap教學】

Bootstrap提供了下列類型的表單佈局：垂直表單（預設）、內聯表單、水平表單、垂直或基本表單

基本的表單結構是Bootstrap自帶的，個別的表單控制項會自動接收一些全域樣式。以下列出了建立基本表單的步驟：

為父

元素新增 role="form"。

把標籤和控制項放在一個有 class .form-group 的

中。這是獲取最佳間距所必需的。

在所有的文字元素、和 <select> 加入 class ="form-control" 。 </select>

範例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 基本表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
        <p class="help-block">这里是块级帮助文本的实例。</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 选择打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
    
</body>
</html>

登入後複製

運行結果如下：

Bootstrap表單版面有哪幾種方式？ Bootstrap表單佈局的建立方法（附程式碼）

內聯表單

如果需要建立一個表單，它的所有元素是內聯的，向左對齊的，標籤是並排的，請向標籤新增class .form-inline。

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 内联表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label class="sr-only" for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 请打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

登入後複製

運行結果如下：

Bootstrap表單版面有哪幾種方式？ Bootstrap表單佈局的建立方法（附程式碼）

#預設情況下，Bootstrap 中的input 、select 和textarea 有100% 寬度。使用內聯表單時，您需要在表單控制項上設定一個寬度。

使用 class .sr-only，您可以隱藏內聯表單的標籤。

水平表單

水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同。如需建立一個水平佈局的表單，請按下面的幾個步驟進行：

為父元素新增 class .form-horizontal。

把標籤和控制項放在一個有 class .form-group 的

中。

新增 class .control-label到標籤。

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 水平表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="firstname" 
                   placeholder="请输入名字">
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">姓</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="lastname" 
                   placeholder="请输入姓">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 是否记住
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

</body>
</html>

登入後複製

結果如下所示

支援的表單控制項

Bootstrap 支援最常見的表單控制項，主要是input、textarea、checkbox、radio 和select。

輸入框（Input）

最常見的表單文字欄位是輸入框 input。使用者可以在其中輸入大多數必要的表單資料。 Bootstrap 提供了所有原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。適當的 type 聲明是必要的，以便讓 input 獲得完整的樣式。

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 输入框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">标签</label>
        <input type="text" class="form-control" placeholder="文本输入">
    </div>
 </form>

</body>
</html>

登入後複製

運行結果如下：

Bootstrap表單版面有哪幾種方式？ Bootstrap表單佈局的建立方法（附程式碼）

#文字方塊（Textarea）

當您需要進行多行輸入的時，則可以使用文字方塊textarea。必要時可以改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）。

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 文本框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">文本框</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</form>

</body>
</html>

登入後複製

結果如下圖：

Bootstrap表單版面有哪幾種方式？ Bootstrap表單佈局的建立方法（附程式碼）

#複選框（Checkbox）和單選方塊（Radio）

複選框和單選按鈕用於讓使用者從一系列預先設定的選項中進行選擇。

當建立表單時，如果您想要讓使用者從清單中選擇若干個選項時，請使用 checkbox。如果您限制使用者只能選擇一個選項，請使用 radio。

對一系列複選框和單選框使用 .checkbox-inline 或.radio-inline class，控制它們顯示在同一行上。

下面的範例示範了這兩種類型（預設和內聯）：

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 复选框和单选按钮</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
    </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
    </label>
</div>

</body>
</html>

登入後複製

運行結果如下：

Bootstrap表單版面有哪幾種方式？ Bootstrap表單佈局的建立方法（附程式碼）

選擇方塊（Select）

#當您想要讓使用者從多個選項中進行選擇，但預設情況下只能選擇一個選項時，則使用選擇框。

使用后使用 .help-block。下面的实例演示了这点：

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 表单帮助文本</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <span>帮助文本实例</span>
    <input class="form-control" type="text" placeholder="">
    <span class="help-block">一个较长的帮助文本块，超过一行，
        需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

</body>
</html>

登入後複製

运行结果如下：

Bootstrap表單版面有哪幾種方式？ Bootstrap表單佈局的建立方法（附程式碼）