Bootstrap memudahkan penciptaan bentuk dengan susun atur menegak lalai dan pilihan yang disesuaikan. 1) Gunakan tag

<form> dengan kelas bootstrap seperti MB-3, label bentuk, dan kawalan bentuk untuk bentuk menegak asas. 2) Meningkatkan kebolehcapaian dengan Aria-DepribedBy. 3) Untuk bentuk sebaris, tambahkan kelas bentuk-garis, tetapi berhati-hati pada skrin yang lebih kecil. 4) Melaksanakan pengesahan menggunakan kelas IS-Valid dan IS-Invalid untuk maklum balas pengguna.

Ketika datang untuk membuat bentuk menggunakan bootstrap, prosesnya adalah mudah dan fleksibel, membolehkan anda membuat bentuk asas dan menegak dengan mudah. Bootstrap, rangka kerja front-end yang popular, memudahkan tugas merancang bentuk responsif dan visual yang menarik. Mari kita menyelam bagaimana anda boleh memanfaatkan bootstrap untuk mencipta bentuk -bentuk ini, berkongsi beberapa pandangan peribadi dan amalan terbaik di sepanjang jalan.

Borang bootstrap adalah semata -mata menegak secara lalai, yang bermaksud anda tidak perlu berbuat banyak untuk membuat bentuk menegak. Walau bagaimanapun, memahami nuansa dan bagaimana untuk menyesuaikannya dapat meningkatkan pengalaman pembangunan web anda dengan ketara.

Untuk memulakan, mari kita bincangkan struktur asas borang bootstrap. Anda perlu membungkus elemen borang anda dalam tag <form></form> dan gunakan kelas Bootstrap untuk gaya mereka. Inilah contoh mudah untuk memulakan anda:

 <form>
  <div class = "mb-3">
    <label untuk = "ContohInputeMail1" class = "form-label"> Alamat e-mel </label>
    <input type = "email" class = "form-control" id = "ExampleInputeMail1" aria-describedby = "emailHelp">
    <div id = "emailHelp" class = "form-text"> Kami tidak akan pernah berkongsi e-mel anda dengan orang lain. </div>
  </div>
  <div class = "mb-3">
    <label untuk = "ContohInputPassword1" class = "form-label"> kata laluan </label>
    <input type = "password" class = "form-control" id = "ExampleInputPassWord1">
  </div>
  <div class = "mb-3 form-check">
    <input type = "checkbox" class = "form-check-input" id = "ExampleCheck1">
    <label class = "form-check-label" untuk = "Explectecheck1"> Semak saya keluar </label>
  </div>
  <Button Type = "Hantar" class = "btn btn-primary"> hantar </butang>
</form>

Coretan kod ini menunjukkan bentuk menegak asas dengan medan e -mel, kata laluan, dan kotak semak. Kelas mb-3 menambah margin di bahagian bawah setiap kumpulan bentuk, memastikan rupa yang bersih dan bersih. Kelas form-label dan kelas form-control adalah penting untuk menggayakan label dan medan input, masing-masing.

Sekarang, mari kita menyelidiki lebih mendalam untuk menyesuaikan dan mengoptimumkan borang anda. Salah satu perkara yang saya pelajari dari masa ke masa adalah kepentingan aksesibiliti. Bootstrap menyediakan kelas seperti aria-describedby untuk meningkatkan kebolehcapaian borang anda. Contohnya, dalam contoh medan e-mel, aria-describedby="emailHelp" menghubungkan input ke teks bantuan, menjadikannya jelas kepada pembaca skrin apa yang dirujuk oleh teks itu.

Untuk bentuk yang lebih maju, anda mungkin ingin mempertimbangkan menggunakan bentuk sebaris atau bentuk mendatar. Walaupun lalai Bootstrap adalah menegak, anda boleh dengan mudah beralih ke bentuk sebaris dengan menambahkan kelas form-inline ke tag <form> . Walau bagaimanapun, berhati-hati dengan bentuk inline pada skrin yang lebih kecil, kerana ia boleh menjadi sempit dan kurang mesra pengguna.

 <form class = "form-inline">
  <div class = "form-group mb-2">
    <label for = "InlineFormInputName2" class = "sr-only"> name </label>
    <input type = "text" class = "form-control" id = "inlineFormInputName2" placeholder = "Jane Doe">
  </div>
  <div class = "form-group MX-SM-3 MB-2">
    <label for = "InlineFormInputGroupUserName2" class = "sr-only"> username </label>
    <div class = "input-group">
      <div class = "input-group-crepend">
        <div class = "input-group-text">@</div>
      </div>
      <input type = "text" class = "form-control" id = "InlineFormInputGroupUserName2" placeholder = "username">
    </div>
  </div>
  <butang jenis = "hantar" class = "btn btn-primary mb-2"> hantar </butang>
</form>

Apabila bekerja dengan borang, ia juga penting untuk mempertimbangkan pengesahan. Bootstrap menawarkan kelas terbina dalam untuk pengesahan borang, seperti is-valid dan is-invalid , yang boleh digunakan untuk memberikan maklum balas segera kepada pengguna. Inilah cara anda melaksanakannya:

 <form>
  <div class = "mb-3">
    <label untuk = "validationererver01" class = "form-label"> Nama pertama </label>
    <input type = "text" class = "form-control is-valid" id = "validationserver01" value = "Mark" diperlukan>
    <div class = "Valid-Feedback">
      Nampak baik!
    </div>
  </div>
  <div class = "mb-3">
    <label untuk = "validationererver02" class = "form-label"> Nama belakang </label>
    <input type = "text" class = "form-control is-invalid" id = "validationererver02" value = "Otto" diperlukan>
    <div class = "Invalid-Feedback">
      Sila berikan nama belakang yang sah.
    </div>
  </div>
  <butang kelas = "btn btn-primary" type = "hantar"> hantar borang </butang>
</form>

Satu perangkap yang saya temui adalah terlalu bergantung pada gaya lalai Bootstrap tanpa mempertimbangkan reka bentuk keseluruhan laman web ini. Walaupun bentuk Bootstrap berfungsi dan kelihatan baik dari kotak, mereka mungkin tidak sesuai dengan sempurna dengan estetika laman web anda. Menyesuaikan CSS boleh membantu, tetapi ia adalah tindakan mengimbangi untuk mengekalkan respons dan kebolehcapaian yang disediakan oleh Bootstrap.

Dari segi prestasi, perlu diingat bahawa walaupun Bootstrap adalah cekap, memuatkan CSS dan JavaScript yang tidak perlu dapat melambatkan laman web anda. Jika anda hanya menggunakan borang, pertimbangkan untuk menggunakan CDN untuk CSS Bootstrap dan selektif termasuk hanya komponen JavaScript yang diperlukan.

Untuk membungkus, mencipta bentuk dengan bootstrap adalah angin, tetapi selalu ada ruang untuk pengoptimuman dan pemperibadian. Sama ada anda membina bentuk menegak asas atau bereksperimen dengan susun atur inline, ingat untuk menjaga kebolehcapaian dan prestasi dalam fikiran. Dengan petua dan contoh ini, anda dalam perjalanan untuk menguasai borang bootstrap dan meningkatkan toolkit pembangunan web anda.

Atas ialah kandungan terperinci Tulis langkah -langkah untuk membuat bentuk asas atau menegak menggunakan bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!