Borang Bootstrap


Dalam bab ini, kita akan belajar cara membuat borang menggunakan Bootstrap. Bootstrap boleh mencipta gaya bentuk yang berbeza melalui beberapa teg HTML mudah dan kelas lanjutan.

Susun atur borang

Bootstrap menyediakan jenis reka letak borang berikut:

  • Borang menegak (lalai)

  • Dalam Borang bersama

  • Borang mendatar

Bentuk menegak atau asas

Struktur borang asas adalah milik Bootstrap, kawalan Borang individu secara automatik menerima beberapa gaya global. Di bawah disenaraikan langkah-langkah untuk membuat borang asas:

  • Tambahkan role="form" pada elemen <form>

  • Letakkan label dan kawalan dalam <div> dengan kelas .form-group. Ini adalah perlu untuk mendapatkan jarak yang optimum.

  • Tambahkan kelas .kawalan borang pada semua elemen teks <input>, <textarea> dan <pilih>.

<!DOCTYPE html>
<html>
<head>
<title>Contoh Bootstrap - Borang Asas</ tajuk ;
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<skrip src ="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://apps.bdimg . com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<badan>

<membentuk peranan ="form">
  <div class="form-group">
  <label for="name">Name</label>
  <input type=" text" class="form-control" id="name"
placeholder="Sila masukkan nama">
</div>
<div class="form-group">
& Gt; Berikut adalah contoh teks bantuan peringkat blok. </p>
  </div>
  <div class="checkbox">
  <label>
  <input type="checkbox"> >                                                                                                                     ;
<button type="submit" class="btn btn-default">Serah</button>
</form>

</body>
< ;/html>


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>

Jalankan Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Borang sebaris

Jika anda perlu membuat borang dengan semua elemennya sebaris, dijajar ke kiri dan label bersebelahan, tambahkan kelas pada teg <borang> . 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 内联表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>

  • Secara lalai, input, pilih dan kawasan teks dalam Bootstrap mempunyai 100% lebar. Apabila menggunakan borang sebaris, anda perlu menetapkan lebar pada kawalan borang.

  • Menggunakan kelas .sr-sahaja anda boleh menyembunyikan label borang sebaris.

Bentuk Mendatar

Bentuk mendatar bukan sahaja berbeza dengan bentuk lain dalam bilangan markah, tetapi juga dalam pembentangan borang. Untuk membuat borang yang dibentangkan secara mendatar, ikuti langkah berikut:

  • Tambahkan kelas .form-horizontal pada elemen <form>

  • Letakkan label dan kawalan dalam <div> dengan kelas .form-group.

  • Tambah kelas .label kawalan pada label. 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 水平表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>

Kawalan borang yang disokong

Bootstrap menyokong kawalan bentuk yang paling biasa, terutamanya input, kawasan teks, kotak pilihan, radio dan pilih.

Kotak input (Input)

Medan teks bentuk yang paling biasa ialah input kotak input. Pengguna boleh memasukkan data borang yang paling diperlukan di sana. Bootstrap menyediakan sokongan untuk semua jenis input HTML5 asli, termasuk: teks, kata laluan, tarikh masa, tarikh-tempatan, tarikh, bulan, masa, minggu, nombor, e-mel, url, carian, tel dan warna . Pengisytiharan jenis yang sesuai diperlukan agar input digayakan sepenuhnya. 

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 输入框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>

Kawasan teks (Textarea)

Apabila anda perlu memasukkan berbilang baris, anda boleh menggunakan kawasan teks kotak teks. Atribut rows boleh ditukar jika perlu (kurang baris = kotak lebih kecil, lebih banyak baris = kotak lebih besar). 

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 文本框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>

Kotak Semak dan Radio

Kotak semak dan butang radio digunakan untuk membolehkan pengguna memilih daripada pelbagai pilihan pratetap.

  • Apabila mencipta borang, gunakan kotak pilihan jika anda mahu pengguna memilih beberapa pilihan daripada senarai Sila gunakan radio atau

    .radio- untuk julat kotak pilihan dan butang radio sebaris
    • kelas, mengawalnya untuk dipaparkan pada baris yang sama Contoh berikut menunjukkan kedua-dua jenis (lalai dan sebaris):

  • Instancerreee<🎜. >

    Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Pilih

Gunakan kotak pilih apabila anda mahu pengguna memilih daripada berbilang pilihan, tetapi hanya satu pilihan boleh dipilih secara lalai.

  • Gunakan <select> untuk memaparkan pilihan senarai, biasanya yang biasa kepada pengguna, seperti keadaan atau nombor.

  • Gunakan multiple="multiple" untuk membenarkan pengguna memilih berbilang pilihan.

Contoh berikut menunjukkan kedua-dua jenis (pilih dan berbilang): 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 复选框和单选按钮</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> 选项 2
   </label>
</div>

</body>
</html>

Instance



Jalankan Contoh»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Kawalan Statik

Apabila anda memerlukan label borang dalam bentuk mendatar Apabila meletakkan teks biasa selepas <p>, gunakan kelas .form-control-static. 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 选择框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <label for="name">选择列表</label>
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for="name">可多选的选择列表</label>
      <select multiple class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
</form>

</body>
</html>

Keadaan kawalan bentuk

Selain keadaan :fokus (iaitu, pengguna mengklik pada input atau menggunakan kekunci tab untuk memfokus pada input), Bootstrap juga mentakrifkan kotak input yang dilumpuhkan Gaya ditentukan dan kelas untuk pengesahan borang disediakan.

Fokus kotak input

Apabila input kotak input menerima :fokus, garis besar kotak input akan dialih keluar dan bayang-kotak<🎜 akan digunakan.

Input kotak input dilumpuhkan

Jika anda mahu melumpuhkan input kotak input, cuma tambah atribut

dilumpuhkan, yang bukan sahaja akan melumpuhkan kotak input; daripada kotak input dan gaya penuding tetikus apabila ia melayang di atas elemen.

Set medan set medan dilumpuhkan

Tambah atribut dilumpuhkan pada <set medan> untuk melumpuhkan semua kawalan dalam <set medan>.

Status Pengesahan

Bootstrap mengandungi gaya pengesahan untuk mesej ralat, amaran dan kejayaan. Status pengesahan boleh digunakan dengan hanya menambah kelas yang sesuai (

.has-warning, .has-error atau .has-success) pada elemen induk.

Contoh berikut menunjukkan semua keadaan kawalan: 

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 静态控件</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" 
         placeholder="请输入密码">
    </div>
  </div>
</form>

</body>
</html>

Instance



Jalankan instance» Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Saiz kawalan borang

Anda boleh menggunakan kelas

.input-lg dan .col - lg-* untuk menetapkan ketinggian dan lebar borang. Contoh berikut menunjukkan ini: 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单控件状态</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚焦</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" 
            value="该输入框获得焦点...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">
         禁用
      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" 
            placeholder="该输入框禁止输入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">
            禁用输入（Fieldset disabled）
         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" 
               placeholder="禁止输入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">
            禁用选择菜单（Fieldset disabled）
         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>禁止选择</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess">
         输入成功
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">
         输入警告
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">
         输入错误
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div>
</form>

</body>
</html>

Instance



Run Instance»Klik butang "Run Instance" View contoh dalam talian

Teks bantuan borang

Kawalan borang Bootstrap boleh mempunyai teks bantuan peringkat blok pada input kotak input. Untuk menambah blok kandungan yang mengambil keseluruhan lebar, gunakan .help-block selepas <input>. Contoh berikut menunjukkan ini: 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单控件大小</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <input class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   </div>

   <div class="form-group">
      <input class="form-control" type="text" placeholder="默认输入">
   </div>

   <div class="form-group">
      <input class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   </div>
   <div class="form-group">
   </div>
   <div class="form-group">
      <select class="form-control input-lg">
         <option value="">.input-lg</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control">
         <option value="">默认选择</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control input-sm">
         <option value="">.input-sm</option>
      </select>
   </div>

   <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder=".col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder=".col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder=".col-lg-4">
      </div>
   </div>
</form>

</body>
</html>

Instance



Run Instance»

Klik butang "Run Instance" View contoh dalam talian


←
→