Izinkan saya menunjukkan rendering terlebih dahulu. Jika Anda merasa itu cukup bagus, silakan terus merujuk pada ide implementasi untuk penjelasan terperinci.
tata letak
1. Setengah dari masing-masing kiri dan kanan (COL-MD-6)
2. Kotak login kiri menyumbang setengah dari sisi kiri
3. Di sebelah kanan adalah tindakan pencegahan untuk masuk ke sistem
Elemen html digunakan
Dengan baik
Kelompok input
Tombol (BTN-Success)
Kode HTML
<Div style = "margin-top: 30px;"> <div style = "Border-Right: 1px solid #ddd;"> <ve> <h3> Login pengguna </h3> <dv> <span id = "size-addon1"> <i aria-hidden = "true"> </i> </span> <input Type = "TEPP" TEKP " aria-dideskripsi = "size-addon1"> </div> <div> <span id = "size-addon1"> <i> </i> </span> <input type = "kata sandi" placeholder = "kata sandi"-lift- "" "" "" "" "" "" " value = "teh"> Guru <input type = "Radio" name = "teh" value = "stu"> Siswa </div> <typute type = "kirim"> Login </button> </div> <div> <h3> Selamat menggunakan sistem pekerjaan rumah siswa </h3> <ul> <li> Siswa menggunakan nomor siswa </em> untuk login. Kata Sandi Awal </h3> <ul> <Li> Siswa menggunakan nomor siswa </em> untuk login. Kata Sandi Awal adalah Kata Sandi </H3> <ul> 6. Harap ubah kata sandi pada waktu setelah masuk. Guru silakan gunakan nomor kerja </em> untuk masuk. Kata sandi awal adalah <em> 6 1 </em>. Harap ubah kata sandi dalam waktu setelah masuk. </li> </ul> </div> </div>
Kode CSS
.input-group {margin: 10px 0px; // margin atas dan bawah dari kotak input adalah 10px, dan kiri dan kanan adalah 0px} h3 {padding: 5px; border-bottom: 1px solid #ddd; // h3 font border border} li {list-style-type: square; margin bawah adalah 10px} em {// warna gaya yang ditekankan: #c7254e; font-style: wherit; latar belakang-warna: #f9f2f4;}Di atas adalah apa yang diperkenalkan editor kepada Anda untuk menggunakan Bootstrap untuk mengimplementasikan UI Login Antarmuka UI. 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!