Bootstrap menyediakan jenis tata letak formulir berikut:
• Formulir Vertikal (Default)-> Yang ini tidak tampan, itu semua versi seluler, dan versi PC mengambil barisan dan tidak tampan;
• Formulir inline-> Saya percaya inilah yang Anda inginkan, versi PC merespons baris horizontal, dan versi seluler merespons baris vertikal.
• Formulir Horizontal-> Tampilan Kontrol dengan Sistem Grid
1. Bentuk vertikal
Langkah Standar untuk Penggunaan Formulir Vertikal
1. Tambahkan peran = "bentuk" ke elemen <sorm>.
2. Tempatkan tag dan kontrol dalam <viv> dengan "kelompok bentuk" untuk mendapatkan jarak terbaik.
3. Tambahkan gaya "Bentuk-Kontrol" ke semua elemen teks <Input>, <TextArea> dan <Colly>.
<Form role = "Form"> <div> <label for = "name"> name </label> <input type = "text" id = "name" placeholder = "Harap masukkan nama"> </div> <Div> <label for = "name"> usia </label> <input type = "text" id = "name" name "name" placeholder = "silakan masukkan usia"> </Div> FORMUL
2. Tata letak inline
Tata letak inline persis sama dengan tata letak vertikal, tetapi Anda perlu menambahkan class = bentuk-inline ke <bentuk peran = "form">.
<Form role = "Form">
Setelah menggunakan tata letak sebaris seperti itu, layar besar ditampilkan secara horizontal dan layar kecil ditampilkan secara vertikal.
Layar Kecil:
Layar Besar:
3. Bentuk horizontal
Bentuk horizontal mengacu pada level antara tag label dan kontrol (input, tombol).
Langkah -langkah untuk menggunakannya adalah sebagai berikut:
• Tambahkan kelas .Form-horizontal ke elemen Parent <Form>.
• Masukkan tag dan kontrol di <viv> dengan kelas .Form-group.
• Tambahkan kelas. Kontrol-label ke label.
<Form role = "Form"> <div> <label for = "name"> name </label> <ver> <input type = "text" id = "name" placeholder = "Harap masukkan nama"> </div> </div> <v> <label untuk = "name"> usia </lel> <Div> <input type = "Text" id = "name" name "> Placeer" Placeer "<Div> <input> </Type =" Text "ID =" name "name" PlaceHold "Placeer" Placeer "Placeer"
Hanya setelah menggunakan bentuk-horizontal, kontrol input dapat diatur ke Div, dan div juga dapat menggunakan sistem grid. Gaya bentuk-horizontal mengubah perilaku kelompok .form, bertindak seperti baris dalam raster.
4. Kotak centang dan radio
Kedua kontrol ini istimewa dalam bootstrap. Terkadang mereka perlu diatur secara horizontal, dan kadang -kadang mereka perlu diatur secara vertikal.
Ini juga seperti bentuk, dan juga dilapisi.
• Jika diperlukan tampilan inline, atur kelas label yang dikelilingi oleh lapisan luarnya ke centang-inline.
• Jika diperlukan tampilan vertikal default, atur kelas label yang dikelilingi oleh lapisan luar ke heckbox.
<Form role = "Form"> <!-Check-> <div> <label> <input type = "checkbox" value = ""> pisang </label> </div> <vel> <label> <input type = "centang kotak" value = ""> </label> </Div> <Div> <label> <input type = "checkbox" value = "> </Div> <Div> <label> <input type =" checkbox "value =" "> Input </Div> <label> <Input> <input type =" checkbox "value =" "> watermel </Div> <label> <input type =" checkbox "value =" "> Input </Div> <label> <input label> type="checkbox" value="">Banana</label></div><div><label><input type="checkbox" value="">Apple</label></div><div><label><input type="checkbox" value="">Watermelon</label></div><!-- Single choice--><div><label><input type="radio" name="optionsRadios" value="option1" checked> Male</label></div><div><label><input type="radio" name="optionsRadios" value="option2" checked> Female</label></div><div><label><input type="radio" name="optionsRadios" value="option1" checked> Male</label></div><div><label><input type="radio" name="optionsRadios" value = "option2" checked> female </label> </div> </form>
Efek tampilan adalah sebagai berikut:
5. Kontrol statis
Kontrol statis mengacu pada yang tidak dapat mengubah nilainya. Di Bootstrap, ketika Anda perlu menempatkan teks polos di balik tag bentuk dalam bentuk horizontal, gunakan class = "Form-Control-Static" di <p>.
<Form role = "Form"> <div> <label> name </LABEL> <IV> <P> LIU Xuande </p> </div> </div> </form>
Efek tampilan adalah sebagai berikut:
6. Bentuk Bantuan Teks
Formulir Bootstrap Bantuan teks umumnya mengacu pada prompt input, biasanya diikuti oleh elemen HTML dari blok.
<Form role = "Form"> <ver> <input type = "text"> <span> Pengingat khusus, jika Anda tidak memiliki apa pun, jangan mengetiknya. </span> </div> </form>
Efek tampilan adalah sebagai berikut:
Selain itu, bootstrap juga memiliki banyak kolom gaya yang digunakan untuk mengontrol tinggi input, apakah input berhasil, dll. Cukup periksa dan temukan kata kunci yang sesuai dan rekam nanti.
Di atas adalah tata letak bentuk bootstrap yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!