Bootstrap4 自定義表單

    Bootstrap4 可以自定義一些表單的樣式來替換瀏覽器默認的樣式。

自定義復(fù)選框

如果要自定義一個復(fù)選框，可以設(shè)置 <div> 為父元素，類為 .custom-control 和 .custom-checkbox，復(fù)選框作為子元素放在該 <div> 里頭，然后復(fù)選框設(shè)置為 type="checkbox"，類為 .custom-control-input。

復(fù)選框的文本使用 label 標(biāo)簽，標(biāo)簽使用 .custom-control-label 類，label 的 for 屬性值需要匹配復(fù)選框的 id。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>自定義復(fù)選框</h2>
  <p>如果要自定義一個復(fù)選框，可以設(shè)置 &lt;div&gt; 為父元素，類為 .custom-control 和 .custom-checkbox，復(fù)選框作為子元素放在該 &lt;div&gt; 里頭，然后復(fù)選框設(shè)置為 type="checkbox"，類為 .custom-control-input。</p>
  <p>復(fù)選框的文本使用 label 標(biāo)簽，標(biāo)簽使用 .custom-control-label 類，label 的 for 屬性值需要匹配復(fù)選框的 id。</p>
  <form action="/action_page.php">
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
      <label class="custom-control-label" for="customCheck">自定義復(fù)選框</label>
    </div>
    <input type="checkbox" id="defaultCheck" name="example2">
    <label for="defaultCheck">默認復(fù)選框</label>
    <br>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
</body>
</html>
測試看看 ?/?

運行后效果如下:

圖片.png

自定義單選框

如果要自定義一個單選框，可以設(shè)置 <div> 為父元素，類為 .custom-control 和 .custom-radio，單選框作為子元素放在該 <div> 里頭，然后單選框設(shè)置為 type="radio"，類為 .custom-control-input。

單選框的文本使用 label 標(biāo)簽，標(biāo)簽使用 .custom-control-label 類，label 的 for 屬性值需要匹配單選框的 id。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>自定義單選框</h2>
  <p>如果要自定義一個單選框，可以設(shè)置 div 為父元素，類為 .custom-control 和 .custom-radio，復(fù)選框作為子元素放在該 div 里頭，然后單選框設(shè)置為 type="radio"，類為 .custom-control-input。</p>
  <p>單選框的文本使用 label 標(biāo)簽，標(biāo)簽使用 .custom-control-label 類，label 的 for 屬性值需要匹配單選框的 id。</p>
  <form action="/action_page.php">
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="customRadio" name="example1">
      <label class="custom-control-label" for="customRadio">自定義單選框</label>
    </div>    
    <input type="radio" id="defaultRadio" name="example2">
    <label for="defaultRadio">默認單選框</label>
    <br>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
</body>
</html>
測試看看 ?/?

運行后效果如下:

圖片.png

自定義控件顯示在同一行

我們可以在外部元素上使用 .custom-control-inline 類來包裹自定義表單控件，這樣自定義表單控件就能顯示在同一行：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>自定義控件顯示在同一行</h2>
  <p>我們可以在外部元素上使用 .custom-control-inline 類來包裹自定義表單控件，這樣自定義表單控件就能顯示在同一行：</p>
  <form action="/action_page.php">
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="customRadio1" name="example1">
      <label class="custom-control-label" for="customRadio1">自定義單選框 1</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="customRadio2" name="example2">
      <label class="custom-control-label" for="customRadio2">自定義單選框 2</label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
</body>
</html>
測試看看 ?/?

運行后效果如下:

圖片.png

自定義選擇菜單

創(chuàng)建自定義選擇菜單可以在 <select> 元素上添加 .custom-select 類:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>自定義選擇菜單</h2>
  <p>創(chuàng)建自定義選擇菜單可以在 select 元素上添加 .custom-select 類:</p>
  <form>
  <select name="cars" class="custom-select-sm">
    <option selected>自定義選擇菜單</option>
    <option value="Google">Google</option>
    <option value="Nhooo">Nhooo</option>
    <option value="Taobao">Taobao</option>
  </select>
 </form>
</div>
</body>
</html>
測試看看 ?/?

運行后效果如下:

圖片.png

如果我們要設(shè)置自定義選擇菜單大小，可以使用 .custom-select-sm、.custom-select-lg 來設(shè)置它們的大小:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>自定義選擇菜單大小</h2>
  <p>如果我們要設(shè)置自定義選擇菜單大小，可以使用 .custom-select-sm、.custom-select-lg 來設(shè)置它們的大小:</p>
  <form>
    <!-- 小 -->
    <select name="cars" class="custom-select-sm">
      <option selected>比較小的自定義選擇菜單</option>
      <option value="Google">Google</option>
      <option value="Nhooo">Nhooo</option>
      <option value="Taobao">Taobao</option>
    </select>
   
    <!-- 大 -->
    <select name="cars" class="custom-select-lg">
      <option selected>比較大的自定義選擇菜單</option>
      <option value="Google">Google</option>
      <option value="Nhooo">Nhooo</option>
      <option value="Taobao">Taobao</option>
    </select>
  </form>
</div>
</body>
</html>
測試看看 ?/?

運行后效果如下:

圖片.png

自定義滑塊控件

我們可以在 input  為 type="range" 的輸入框中添加 .custom-range 類來設(shè)置自定義滑塊控件:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>自定義滑塊控件</h2>
  <p>我們可以在 input 為 type="range" 的輸入框中添加 .custom-range 類來設(shè)置自定義滑塊控件:</p>
  <form action="/action_page.php">
    <label for="customRange">自定義滑塊控件</label>
    <input type="range" class="custom-range" id="customRange" name="points1">
    <label for="defaultRange">默認滑塊控件</label>
    <input type="range" id="defaultRange" name="points2">
    <p><button type="submit" class="btn btn-primary">提交</button></p>
  </form>
</div>
</body>
</html>
測試看看 ?/?

運行后效果如下:

圖片.png

自定義文件上傳控件

我們可以在父元素添加 .custom-file 類，然后在  input 設(shè)置為 type="file" 并添加 .custom-file-input:

上傳控件的文本使用 label 標(biāo)簽，標(biāo)簽使用 .custom-file-label 類，label 的 for 屬性值需要匹配上傳控件 id。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>自定義文件上傳控件</h2>
  <p>我們可以在父元素添加 .custom-file 類，然后在 input 設(shè)置為 type="file" 并添加 .custom-control-label:</p>
  <form action="/action_page.php">
    <p>自定義上傳文件樣式:</p>
    <div class="custom-file mb-3">
      <input type="file" class="custom-file-input" id="customFile" name="filename">
      <label class="custom-file-label" for="customFile">選擇文件</label>
    </div>
    
    <p>默認上傳文件樣式:</p>
    <input type="file" id="myFile" name="filename2">
  
    <div class="mt-3">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </form>
</div>
</body>
</html>
測試看看 ?/?

運行后效果如下:

圖片.png

丰满人妻一级特黄a大片，午夜无码免费福利一级，欧美亚洲精品在线，国产婷婷成人久久Av免费高清