cari

Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang tiga format untuk membuat borang dengan kemahiran Bootstrap (1)_javascript

Penjelasan terperinci tentang tiga format untuk membuat borang dengan kemahiran Bootstrap (1)_javascript

WBOY
WBOYasal
2016-05-16 15:22:031405semak imbas

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.

Jenis borang Bootstrap dibahagikan kepada tiga format: bentuk menegak atau asas, bentuk sebaris dan bentuk mendatar.

Bentuk menegak atau asas (paparan:blok;)

Struktur bentuk asas disertakan dengan Bootstrap, dan kawalan borang individu secara automatik menerima beberapa gaya global. Di bawah disenaraikan langkah-langkah untuk membuat borang asas:

Tambah role="form" pada elemen ff9c23ada1bcecdd1a0fb5d5a0f18437

Letakkan label dan kawalan dalam dc6dce4a544fdca2df29d5ac0ea9906b dengan kelas .form-group. Ini adalah perlu untuk mendapatkan jarak yang optimum.

Tambah kelas .form-control pada semua elemen teks d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3 dan 221f08282418e2996498697df914ce4e. 

<!doctype html> 
<html lang="en"> 
 <head> 
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="关键词一，关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">   
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
 </head> 
 <body style="padding: 20px;"> 
  <div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
   <form role = "form"> 
    <div class = "form-group"> 
     <label for = "name">姓名</label> 
     <input type = "text" class = "form-control" id = "name" 
       placeholder = "请输入姓名"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "tel">电话号码</label> 
     <input type="text" class="form-control" id = "tel" 
       placeholder = "请输入您的电话号码"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "idCard">请上传身份证</label> 
     <input type = "file" id = "idCard"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "profession">选择职业</label> 
     <select id = "profession" class = "form-control"> 
      <option>软件工程师</option> 
      <option>测试工程师</option> 
      <option>硬件工程师</option> 
      <option>质量分析师</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <button type = "submit" class="btn-info btn-lg">提交</button> 
    </div> 
   </form> 
  </div> 
 </body> 
</html>

Kesannya adalah seperti berikut:

Jika kita mengalih keluar kawalan borang pilih dan tambah kawalan borang pada jenis input = "fail", mari lihat apakah kesannya.

Nampak tak perbezaan kesan di atas? Dengan cara ini anda mungkin memahami peranan kawalan bentuk, iaitu menetapkan kesan sempadan persisian, termasuk lebar, tinggi dan dapatkan
Gaya bentuk apabila difokuskan.

Borang sebaris (semua pada baris yang sama, paparan adalah blok sebaris)

Jika anda perlu membuat borang dengan semua elemennya sebaris, sejajar kiri dan label sebelah menyebelah, tambahkan kelas .form-inline pada teg ff9c23ada1bcecdd1a0fb5d5a0f18437

Disebabkan isi bahagian kepala adalah sama, kami hanya senaraikan isi bahagian badan sahaja. 

<body style="padding: 20px;"> 
 <form role = "form" class="form-inline"> 
  <div class = "form-group"> 
   <label for = "name">姓名</label> 
   <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "tel">电话号码</label> 
   <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "idCard">请上传身份证</label> 
   <input type = "file" id = "idCard"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "profession">选择职业</label> 
   <select id = "profession" class = "form-control"> 
    <option>软件工程师</option> 
    <option>测试工程师</option> 
    <option>硬件工程师</option> 
    <option>质量分析师</option> 
   </select> 
  </div> 
  <div class="form-group"> 
   <button type = "submit" class="btn-info btn-lg">提交</button> 
  </div> 
 </form>   
</body>

Kesan paparan:

Secara lalai, input, pilihan dan kawasan teks dalam Bootstrap mempunyai 100% lebar. Apabila menggunakan bentuk mendatar, anda perlu menetapkan lebar pada kawalan borang.

Gunakan kelas .sr-sahaja untuk menyembunyikan teg borang sebaris.

Nota: sr-sahaja dipaparkan kepada pembaca skrin, bukan pembaca biasa.

Apabila kelas bentuk unsur-unsur lain adalah dalam baris, paparan adalah dalamLine-blok; tetapi input tyoe = "fail" masih boleh dilihat bahawa terdapat masalah dengan reka letaknya masa, ia boleh ditetapkan secara berasingan Paparannya adalah blok sebaris;

Bentuk mendatar (elemen bentuk seperti label dan input berada pada baris yang sama)

Borang mendatar berbeza daripada bentuk lain bukan sahaja dalam bilangan tag, tetapi juga dalam pembentangan borang. Untuk membuat bentuk susun atur mendatar, sila ikuti langkah berikut:

1. Tambahkan kelas .form-horizontal pada elemen ff9c23ada1bcecdd1a0fb5d5a0f18437
2. Letakkan label dan kawalan dalam dc6dce4a544fdca2df29d5ac0ea9906b dengan kelas .form-group.
3. Tambahkan kelas .control-label pada label.
4. Tetapkan lebar label dan div saudaranya (kerana lebar lalai input, dsb. ialah 100%). 

<body style="padding: 20px;"> 
 <form role = "form" class="form-horizontal"> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "name">姓名</label> 
   <div class="col-sm-2"> 
    <input type = "text" class = "form-control" id = "name" 
     placeholder = "请输入姓名"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "tel">电话号码</label> 
   <div class="col-sm-2"> 
    <input type="text" class="form-control" id = "tel" 
      placeholder = "请输入您的电话号码"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "idCard">请上传身份证</label> 
   <div class="col-sm-2"> 
    <input type = "file" id = "idCard" style="display:inline-block;"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "profession">选择职业</label> 
   <div class="col-sm-2"> 
    <select id = "profession" class = "form-control"> 
     <option>软件工程师</option> 
     <option>测试工程师</option> 
     <option>硬件工程师</option> 
     <option>质量分析师</option> 
    </select> 
   </div> 
  </div> 
  <div class="form-group"> 
   <div class="col-sm-2 col-sm-offset-2"> 
    <button type = "submit" class="btn-info btn-lg">提交</button> 
   </div>    
  </div> 
 </form> 
</body>

Kesan:

Kandungan di atas memperkenalkan anda kepada kandungan yang berkaitan untuk mencipta borang dengan Bootstrap.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Tutorial untuk mengetahui cara menggunakan grunt untuk membungkus program JavaScript dan CSSArtikel seterusnya：Tutorial untuk mengetahui cara menggunakan grunt untuk membungkus program JavaScript dan CSS

Artikel berkaitan

Lihat lagi