Bootstrap seperti kerangka kerja front-end. Ini telah mengatur banyak CSS, dan dapat dipanggil secara langsung jika diperlukan untuk pengembangan front-end. Alamat situs web adalah http://www.bootcss.com. Menggunakan Bootstrap dapat mengurangi waktu tata letak di CSS selama pengembangan front-end
Anda perlu menggunakan bootstrap untuk mengunduh komponen di situs web resmi (klik untuk membuka tautan). Versi bootstrap yang digunakan di lingkungan produksi (klik untuk membuka tautan). Bootstrap3 tidak kompatibel dengan 2. Disarankan untuk menggunakan bootstrap3 secara langsung sesuai dengan dokumen pengembangannya.
Setelah mendekompresi bootstrap, salin 3 folder CSS, font, dan JS yang diperoleh ke direktori situs. Jika itu adalah proyek web JSP Eclipse, letakkan di bawah folder webroot.
Setelah itu, Anda dapat menghubungi Bootstrap untuk dengan cepat memodelkan halaman depan apa pun di direktori situs ini.
Namun, perlu dicatat bahwa browser yang berbeda memiliki penjelasan yang berbeda untuk bootstrap. IE tidak dapat membaca beberapa gaya, tetapi fungsi dasar tidak terpengaruh, dan halamannya sedikit jelek.
Berikut adalah perbandingan antara IE dan Google Chrome di halaman yang sama:
1. Tujuan Dasar
Gunakan bootstrap untuk menulis halaman arahan yang indah untuk PC, tablet, dan ponsel.
Jika diregangkan pada PC, berbagai elemen akan secara otomatis beradaptasi dengan layar.
Jika Anda membuka halaman tersebut di ponsel Anda, Anda akan langsung beradaptasi dengan layar telepon tanpa perlu penyesuaian otomatis pengguna.
2. Ide Dasar
Tata letak halaman ini dirancang sesuai dengan gaya bootstrap yang melekat sebagai berikut:
3. Proses Produksi
Kode spesifik seluruh halaman adalah sebagai berikut, dan berikut ini akan menganalisis tag satu per satu:
<! Doctype html public "-// w3c // dtd html 4.01 transisi // en"> <html> <head> <title> halaman login </itement> <meta name = "viewport" content = "link = device-width, skala awal = 1.0, skala userable = no"> <link href = "device-width, awal-skala = 1.0, skala userable = no"> <"link href =" "boots," no "> <" link href = "BOOPS = 1," no "> <" link href = "boots =" boots. " media = "screen"> </head> <body> <div> <verv> <table frame = "void"> <tr> <td> <img src = "gambar/img0.jpg"/> </td> <td> Selamat datang. Harap masuk dulu. </td> </tr> </able> </div> <div> <form role = "Form" action = "1.html" Method = "Post"> <Div> <label for = "username"> nama pengguna: </label> <ver> <input type = "name" name = "username" placeholder = "username" uSername = "Usword =" USWORDE = "NAME =" USERNAME "Placeholder =" Username "USERName" Kata Sandi: </label> <div> <input type = "password" name = "password" placeholder = "password" id = "password"/> </div> </div> <div> <div> <typy type = "kirim"> login </button> <small> tidak memiliki akun? <a href = "http://2.com"> Klik untuk mendaftar </a> </small> </div> </div> </form> </div> </div> </div> </body> </html>
1. Tag <head>
Pertama, masukkan dua baris kode berikut di tag <head>:
<Head> <Title> Halaman Login </iteme> <!-Memerlukan halaman untuk secara otomatis beradaptasi dengan layar browser-> <meta name = "viewport" content = "width = device-width, skala awal = 1.0, skalaum user =" tidak ada boots = "no" " </head>
2. Tag <body>
(1) Tulis pertama <Div> </div>, lalu masukkan kode di dalamnya. Deskripsi dasarnya adalah sebagai berikut:
(2) Tag <div>
<div> <!-Atur tabel ke tata letak lapisan CSS ini. Tidak mudah untuk menambahkan Align = "kiri" ke tag IMG. Gambar akan meluap ke layer-> <!-Sama seperti <able>-> <tabel frame = "void"> <tr> <td> <mmg src = "gambar/img0.jpg"/> </td> <td> Selamat datang. Harap masuk dulu. </td> </tr> </able> </div>
(3) Di bawah tag <div>, pertama -tama letakkan elemen bentuk bentuk = "bentuk" action = "1.html" metode = "post">. Dibandingkan dengan formulir HTML biasa, bentuk ini memiliki lebih banyak atribut kelas dan atribut peran. Tidak perlu mengatakan banyak tentang atribut kelas. Jika nilainya terbentuk, bahkan jika formulir memiliki lokasi yang cukup, label luar dan kotak input tidak akan berada di baris yang sama. Jika nilainya adalah bentuk-horizontal saat ini, maka itu ditunjukkan pada efek gambar. Atribut peran tidak menunjukkan efek apa pun, dan hanya ditambahkan sesuai dengan dokumen Bootstrap Cina.
Selanjutnya, elemen di bawah setiap bentuk bentuk adalah sebagai berikut:
<Div> <Form role = "Form" Action = "1.html" Method = "Post"> <!-Label luar setiap properti membentuk tuple grup formulir dengan kotak input-> <v> <!-Atribut kelas berikut ini adalah untuk secara otomatis diva. memasuki apa pun, yang tentu saja tidak dapat dijelaskan di IE8. Saya tidak dapat melihat fungsi ID, itu baru saja ditambahkan sesuai dengan persyaratan dokumen -dokumen Cina bootstrap -> <input type = "text" name = "nama pengguna" placeholder = "nama pengguna" id = "nama pengguna"/> </div> </div> <Div> <label untuk = "kata sandi"> Kata sandi "> </label> <Div> </Div> <Div> <label untuk =" kata sandi "> </label> <Div> </Div> <Div> <label for =" kata sandi "> </label> <Div> <input type =" label = = "Kata sandi" "Place"> </label> <Div> <input type = "KOWORT" = Kata sandi = Kata sandi "> </div> <div> <!-Tombol di sini berbeda dari tombol kirim biasa HTML, tetapi tidak mempengaruhi pengiriman formulir-> <tape type = "Kirim"> Login </button> <!-<small> Tag memastikan bahwa teks ini adalah baris yang sama dengan tombol kirim-> tidak ada akun? <a href = "http://2.com"> Klik untuk mendaftar </a> </small> </div> </div> </form> </div> </div>
Pada titik ini, pengembangan halaman ini telah selesai.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.