Apa itu Bootstrap?
Bootstrap adalah kerangka kerja front-end untuk pengembangan cepat aplikasi dan situs web Web. Bootstrap didasarkan pada HTML, CSS, dan JavaScript.
sejarah
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton dari Twitter. Bootstrap adalah produk open source yang dirilis di GitHub pada Agustus 2011.
Setelah menulis artikel ini, saya ingin menulis konten berikut dari artikel ini:
1. Berdasarkan pemahaman saya tentang Bootstrap, saya akan membuat ringkasan kecil.
2. Saya akan mempercantik dan mengoptimalkan UI dan kode untuk contoh -contoh belajar bootstrap (2) dari awal, terutama untuk berbicara tentang bagaimana saya membuat efek yang saya inginkan.
3. Lebih baik mengajari orang cara memancing daripada mengajari orang cara memancing. Gunakan contoh Anda sendiri (karena Anda juga seorang pemula, dan apa yang Anda tulis mungkin lebih cocok untuk pemula), dan berbicara tentang jebakan yang dihadapi selama proses penulisan kode dan poin yang perlu diperhatikan.
Tanpa basa -basi lagi, mari kita mulai:
1. Ringkasan kecil bootstrap
Berdasarkan deskripsi dokumentasi resmi Bootstrap (http://v3.bootcss.com/), bootstrap dibagi menjadi tiga blok besar: gaya CSS, komponen, dan plug-in JavaScript.
Pertama -tama, jelas bahwa Bootstrap adalah kerangka kerja, yang berarti bahwa jika orang lain membuat roda, Anda dapat menggunakannya secara langsung, agar tidak membangun roda sendiri. Jadi kita perlu mengklarifikasi dua poin: roda macam apa roda ini dan bagaimana menggunakannya.
1. CSS Style: Ini terutama memperkenalkan gaya global sistem raster dan bootstrap. Diimplementasikan dengan mengatur nilai kelas.
1.1 Sistem Grid:
Ini memungkinkan kami untuk dengan mudah menerapkan tata letak halaman HTML (http://v3.bootcss.com/css/#grid).
Saya pikir sistem grid sangat penting. Karena tata letak halaman HTML adalah tugas yang penting dan rumit (Anda dapat melihat pengantar tata letak di w3school http://www.w3school.com.cn/html/html_layout.asp, lihatlah kode dalam contohnya dan Anda akan memahami), dan mengompatibilitas.
Sistem raster telah sangat menyederhanakan ini. Buka koneksi di atas tentang sistem grid, dan Anda akan menemukan bahwa Anda hanya perlu menetapkan nilai yang sesuai ke atribut kelas elemen HTML sesuai dengan efek yang ingin Anda capai, dan Anda juga dapat menetapkan efek yang berbeda ke perangkat dengan ukuran layar yang berbeda.
1.2 Gaya Global Bootstrap:
Begitulah cara bootstrap mempercantik elemen html yang umum digunakan (misalnya: div, tombol, p, tabel, img, dll.). Dengan menetapkan nilai yang sesuai ke atribut kelas dari elemen HTML, Anda bisa mendapatkan efek yang diinginkan.
Mari berikan contoh paling sederhana:
Seperti yang ditunjukkan pada gambar di atas, Bootstrap memungkinkan Anda untuk mengubah nilai kelas elemen tombol untuk mengubah ukuran tombol tanpa harus kesulitan memodifikasi file CSS atau menanamkan nilai gaya elemen.
2. Komponen: Saya pikir komponennya adalah bootstrap yang menggabungkan beberapa elemen (elemen html dan kode javascript) menjadi komponen, dan menyediakan banyak ikon yang sangat tampan dan praktis. Komponen -komponen ini pada dasarnya umumnya digunakan dalam pengembangan HTML. Diimplementasikan dengan mengatur nilai kelas. (http://v3.bootcss.com/components/)
Mari berikan contoh paling sederhana:
Seperti yang ditunjukkan pada gambar di atas, ketika kita perlu menerapkan fungsi navigasi. Temukan komponen yang sesuai dalam boostrap, dan tetapkan nilai kelas, UL dan LI yang sesuai sesuai dengan kebutuhan Anda sendiri.
3. Plug-in JavaScript: Saya pikir plug-in JavaScript Bootstrap adalah "roda" yang merangkum fungsi interaksi web umum. Anda hanya perlu mengatur atribut kelas dan atribut data untuk mengimplementasikan fungsi interaksi web yang umum digunakan tanpa harus menulis banyak kode JavaScript sendiri.
Pertama -tama, mari kita bicara tentang episode kecil. Pemula mungkin secara keliru berpikir bahwa "JavaScript" dan "Java" memiliki koneksi yang mendalam, dan bahkan mungkin berpikir bahwa JavaScript adalah varian dari Java. Bahkan, ini bukan masalahnya. JavaScript adalah bahasa skrip yang dikembangkan oleh Netscape untuk Internet. Faktanya, nama depannya adalah "Livescript". Kemudian, Netscape mencapai kerja sama dengan Sun (yaitu, perusahaan yang menemukan Java, yang kemudian diakuisisi oleh Oracle). Pada waktu itu, bahasa Java berada di puncaknya dan sangat terkenal. Untuk naik perjalanan, itu mengubah namanya menjadi JavaScript. Sedemikian rupa sehingga beberapa orang bercanda: perbedaan antara "Java" dan "JavaScript" sama dengan perbedaan antara "Lei Feng" dan "Lei Feng Tower".
Kembali ke topik, kita tahu bahwa JavaScript ada untuk memberikan kemampuan interaksi halaman web. Oleh karena itu, plug-in JavaScript yang kaya di Bootsript dapat membuat Anda dengan mudah menerapkan fungsi interaksi web yang umum digunakan tanpa harus fokus pada "membuat roda".
Seperti yang ditunjukkan pada gambar di atas, menggunakan carousel plug-in Bootstrap (http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html, dokumen bootstrap yang ada di sini, tetapi ada kode yang sangat terperinci pada runoob, dan Anda dapat memodifikasi. Anda dapat dengan mudah mengimplementasikan fungsi carousel gambar yang sekarang digunakan oleh banyak situs web. Di sini Anda hanya perlu menetapkan nilai kelas dan gambar SRC yang sesuai sesuai dengan tutorial di tautan di atas, dan Anda bahkan tidak perlu mengatur nilai data.
2. mempercantik dan mengoptimalkan UI dan kode untuk contoh pembelajaran bootstrap (2) dari awal
Gambar berikut menunjukkan efek yang dicapai dalam tutorial sebelumnya:
Kita dapat melihat bahwa ada kekurangan berikut yang perlu diperbaiki:
(1) Klik pada teman sekelas tertentu dan tampilkan informasinya, dan tidak dipilih. (Saat Anda mengklik di awal, Anda akan berada dalam keadaan yang dipilih, tetapi itu hanya efek klik tombol. Jika Anda mengklik ruang kosong, keadaan yang dipilih akan hilang)
(2) Warnanya monoton dan tidak terlalu indah.
(3) Tata letak perlu disesuaikan. Kotak informasi adalah tempat di mana kami membutuhkan informasi dan harus sebesar mungkin. Yang terbaik adalah menyembunyikan kotak yang tidak perlu saat ditampilkan.
(4) Untuk kode, kode JavaScript di Bootstrap (2) dari awal ditulis di halaman HTML, dan ada segmen kode duplikat. Segmen kode duplikat harus ditulis dalam fungsi, yang dapat mengurangi ukuran kode. Saat memodifikasi kode, saya dapat memodifikasi fungsi yang sesuai secara langsung, tanpa mencari satu tempat pada satu waktu. Kode JavaScript dapat ditulis ke dalam file JS untuk memisahkan halaman HTML dan kode JavaScript.
Seleksi teknis (secara bersamaan, ini adalah untuk memikirkan bagaimana menggunakan apa yang sudah ada dalam kerangka bootstrap untuk mencapai efek yang diinginkan):
1. Pertama -tama sesuaikan tata letak, sesuaikan kotak informasi dan kotak kelas bersama -sama, dan tampilkan kotak kelas di bagian atas.
Jelas, kita hanya perlu menempatkan div di mana kotak informasi berada dan div kotak kelas di baris yang sama di div, dan memodifikasi nilai atribut kelas "col-md" yang terkait dengan sistem grid untuk mencapainya. Misalnya, jika kita ingin mereka menampilkan rasio 2: 1, maka atribut kelas kotak informasi harus memiliki COL-MD-8, sedangkan kotak kelas harus COL-MD-4.
Perlu dicatat bahwa front-end tidak akan pernah menjadi pengembangan satu langkah. Seringkali, kode awal bukan hasil sempurna yang kita inginkan, dan perlu disesuaikan dengan hati -hati. Sebagai contoh, setiap orang harus belajar mencari sendiri, mencoba dan membuat penyesuaian terus menerus (penyesuaian selanjutnya tidak akan dijelaskan dalam proses tertentu):
Setelah kami memodifikasi kode, efek yang disajikan adalah sebagai berikut:
Jelas, hanya satu kelas yang ditampilkan pada setiap baris di atas, yang sedikit membuang -buang ruang. Dua bagian di bawah ini tidak selaras.
Hapus "btn-group-vertikal" dalam atribut kelas komponen div di atas, dan tambahkan col-md-6 ke atribut kelas TMP_BUTTON dalam kode JS. Selain itu, diamati bahwa setelah menetapkan ini, baris pertama memiliki lekukan aneh dibandingkan dengan baris kedua:
Tidak ada keraguan bahwa penampilan dan perubahan tata letak ini terkait dengan CSS. Pada saat ini, kita dapat melihat CSS spesifik dari elemen tersebut.
Ambil Chrome sebagai contoh:
Klik kanan elemen ini dan pilih Inspect, yang berarti ulasan. Anda akan menemukan kode yang sesuai di dalam kotak di sebelah kanan. Melalui perbandingan, kami menemukan bahwa itu adalah masalah margin-kiri. Properti ini adalah default dalam kerangka bootstrap dan diwarisi dari elemen atas. Beberapa adalah -1px dan beberapa adalah 0px. Kita hanya perlu mengubahnya menjadi sama, misalnya, semua diubah menjadi 0px:
Dalam tmp_button dalam kode JS, memodifikasi atribut gaya dan menambahkan "margin-kiri: 0px;". Beberapa orang berpikir bahwa font tidak baik untuk melihat di tengah, sehingga mereka dapat menambahkan teks-menyelaraskan: kiri dan mengatur teks pada tombol untuk memulai dari kiri.
Efek Terkoreksi:
2. Tambahkan tombol lipat sehingga pengguna dapat menyembunyikan/membuka kotak kelas melalui tombol ini. Saat mengklik ClassMate untuk menampilkan informasi terperinci, itu akan secara otomatis menyembunyikannya untuk menyimpan banyak ruang untuk ditampilkan kotak informasi.
Untuk menambahkan tombol lipat, Anda dapat merujuk ke http://www.runoob.com/bootstrap/bootstrap-collaps-plugin.html.
Selain itu, kami dapat menambahkan ikon yang tampan ke tombol lipat, dan dapat dengan mudah dicapai dengan merujuk pada tutorial http://v3.bootcss.com/components/#glighicons.
Saat mengklik ClassMate untuk menampilkan informasi terperinci, itu akan secara otomatis disembunyikan. Anda perlu memodifikasi acara klik tombol ClassMate, yaitu, kode JS yang sesuai.
Kami memeriksa penggunaan plugin lipat bootstrap http://www.runoob.com/bootstrap/bootstrap-collaps-plugin.html (ini lebih baik, bagian resmi belum diterjemahkan), dan menemukan konten berikut:
Ternyata bahwa klaps dan nilai -nilai di atribut kelas mengontrol fungsi -fungsi tersembunyi dan tampilan. Maka kita hanya perlu memodifikasi atribut kelas yang sesuai dari elemen HTML untuk melakukan operasi "show/hide" di tombol klik tombol JS kode. Jadi tambahkan pernyataan berikut ke fungsi klik tombol ClassMate:
$ ("#collapsone"). attr ("class", "Panel-Collapse Collapse");
3. Memperbaiki bug yang "klik siswa tertentu dan tampilkan informasi mereka, dan tidak ada keadaan yang dipilih."
Dengan memeriksa dokumen, http://www.runoob.com/bootstrap/bootstrap-button-plugin.html, kami mengatur properti kunyahan data dari tombol ke "tombol", yang secara otomatis dapat membuat status yang dipilih setelah mengklik.
Jadi kami menambahkan atribut data-soggle = "tombol" ke tombol teman sekelas.
Pada saat ini, masalah lain terjadi. Saya pikir ketika saya mengklik teman sekelas lain berikutnya, klik asli masih dalam keadaan aktif. Apa yang harus saya lakukan?
Dengan memeriksa http://www.runoob.com/bootstrap/bootstrap-buttons.html, keadaan yang dipilih akan muncul ketika penugasan kelas tombol aktif. Dengan kata lain, pengaturan di atas, yaitu, Bootstrap melakukan sesuatu seperti ini: ketika tombol-kilat = "tombol" diklik, aktif ditambahkan secara otomatis ke kelas, dan keadaan yang dipilih ada. Ketika diklik lagi, aktif secara otomatis dihapus dari kelas, dan keadaan yang tidak dipilih disajikan.
Dengan kata lain, kita hanya perlu melakukan operasi ini sendiri. Misalnya, saat mengklik ClassMate, saya dapat menghapus semua tombol ClassMate yang aktif dari atribut kelas. Setelah klik selesai, hanya tombol yang saya klik dalam keadaan aktif.
Oleh karena itu, Anda hanya perlu menambahkan pernyataan tersebut ke fungsi klik tombol ClassMate:
Salinan kode adalah sebagai berikut:
$ (". Btn-ClassMate"). Attr ("Class", "Btn Btn-Default Btn-ClassMate Btn-Info");
Efeknya adalah sebagai berikut:
4. Percantik penampilan tombol
Temukan bagian tombol CSS di Bootstrap:
http://www.runoob.com/bootstrap/bootstrap-buttons.html
Mengikuti tutorial untuk memodifikasinya, saya hanya telah memodifikasi warna tombol di sini, dan Anda dapat mengubahnya sendiri sesuai dengan kebutuhan Anda. Efeknya adalah sebagai berikut:
5. Pemisahan Halaman HTML dan Kode JavaScript
Bahkan, itu dibagi menjadi dua langkah:
Langkah 1: Masukkan kode JavaScript ke dalam file JS dan tautkan di file HTML.
Langkah 2: Tulis blok kode dengan javascript atau fungsi yang jelas ke dalam fungsi dan panggil fungsi secara langsung.
Karena kedua langkah relatif sederhana, siapa pun yang telah belajar bahasa pemrograman harus melakukannya. Saya tidak akan memperluas dan menulis.
Perlu dicatat bahwa ketika menghubungkan file JS, perhatikan pesanan.
Misalnya, file JS di Bootstrap didasarkan pada jQuery dan menggunakan banyak fungsi jQuery, sehingga file jQuery JS harus mendeklarasikan tautan sebelum file JS di Bootstrap.
Demikian pula, file JS kami didasarkan pada bootstrap, jadi harus setelah bootstrap, jika tidak kode tidak akan berfungsi.
Akhirnya, mari kirim kode yang relevan:
getClassmate.html:
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>getClassmate</title><!-- Bootstrap -> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim dan response.js untuk IE8 dukungan elemen html5 dan kueri media-> <!-peringatan: ife tidak berfungsi jika Anda melihat halaman melalui file:/----<!-(] ific. src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src =" // cdn.bootcss.com/respons.js/1.4.2/respespespespespespespespespespespespespespespespespespespespespents.min.js ./kan</script> type = "text/css">#btn-group-vertikal-kelas {overflow-y: auto; overflow-x: otomatis; Tinggi: 100px;}#btn-group-vertical-classmates {overflow-y: auto; overflow-x: otomatis; Tinggi: 500px;} tombol {text-overflow: ellipsis; overflow: tersembunyi; border-radius: 0px;}#context_div {overflow-y: auto; overflow-x: otomatis; height:500px;}</style></head><body><div><div><div><h4 style="text-align:right;"><a id="collapse_a" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span aria-hidden="true"></span> Click this to show/hide class</a> </h4> </div> <div id = "collapsone"> <div id = "div1-kelas-kelas-kelas"> <div role = "grup" aria-label = "..." id = "btn-group-vertical-classes"> <!-Di mana kelas menunjukkan-> </div> </div> </div> </div> <br> <br> id="btn-group-vertical-classmates" role="group" aria-label="..."> <!-- where classmates show--><button type="button" style="border-radius: 0px;">Click class to show classmate.</button></div><div><div id="context_div"><p>Click classmate to show Detailnya. </p> </div> </div> </div> <!-jQuery (diperlukan untuk plugin JavaScript Bootstrap)-> <skrip src = "js/jQuery-3.0.0.min.js"> </skrip> <!-Sertakan semua plugin yang dikompilasi (di bawah), atau termasuk individu yang diperlukan-> </skrip> <! src = "js/bootstrap.min.js"> </script> <script src = "js/script_getclassmate.js"> </script> </body> </html>script_getclassmate.js:
$(document).ready(function(){$.getJSON("resource/classmates.json",function(result){$.each(result, function(i, field){var tmp_button=$('<button type="button" style="border-radius: 0px; text-align:left; margin-left:0px" data-toggle="button" chosen_state = 0> </tombol> '). Teks (i); tmp_button.attr ("title", i); $ ("#btn-group-vertikal-kelas"). append (tmp_button);}); $ (". btn.btn-default.btn-class") tmp_chosen = angka ($ (ini) .attr ("chosen_state"))^1; $ (ini) .attr ("chosen_state", string (tmp_chosen)); showcla ssmates (hasil); $ (". Btn.btn-default.btn-classmate"). Klik (function () {$ (" btn-default btn-classmate btn-info "); $ ("#collapsone "). attr (" class "," panel-collapse collapse "); var selected_classmate = $ (this) .text (); showclassMatedeTail (hasil, selected_classmate);});});}); showclassMates (hasil) {$ ("#btn-group-vertical-classmates"). kosong (); var chosen_list = new Array (); $ (". Btn.btn-default.btn-class"). Filter (function () {judgeflag = false; if ($ (this) .attr ("chosen_state") == "1") {judgeflag = true; chosen_list.push ($ (this) .text; }); $. Masing-masing (hasil, fungsi (i, bidang) {var chosen_list_x; for (chosen_list_x di chosen_list) {if (choSen_list [choSen_list_x] == i) {$. masing-masing (field, function (j, field2) {var tmp_but_but = $ = "masing-masing" field (j field (j, field2) {var tmp_but_but = "$" 0px; "data-koggle =" tombol "chosen_state = 0> </button> '). Teks (j); tmp_button.attr (" title ", j); $ ("#btn-group-vertikal-klasik "). Append (tmp_button);});}}}}}}}}}}); showclassMatedetail (hasil, selected_classmate) {var classmate_context_item; $ ("#context_div"). kosong (); $. masing -masing (hasil, fungsi (i, bidang) {$. masing -masing (field, function (j, field2) {if, j == selected_classmate) {$. masing -masing (field2, function (k, field3) {// waste (k); field3; var tmp_p = $ ('<p> </p>'). Teks (classmate_context_item); $ ("#context_div"). append (tmp_p);});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});});};};};});});});});});});});});});ClassMates.json:
{"Class 001": {"xiao wang": {"gender": "laki -laki", "usia": "18", "minat": "sepak bola", "kota asal": "shanghai", "Cina": "78", "81," 90 "," Bahasa Inggris ":" 66 "," FISIK ":" 81, "81," 81, "66", "66", " "69", "Geography": "92"}, "Xiao Li": {"Jenis Kelamin": "Pria", "Usia": "20", "Minat": "Bola Basket", "Kota Sakit": "Beijing", "Cina" "" "", "Matematika": "77", "Bahasa Inggris": "97" "" "" "": "77", "Bahasa Inggris": "97," "" "" " "88", "Geography": "81"}}, "Kelas 002": {"Xiao Cai": {"Jenis Kelamin": "Wanita", "Zaman": "19", "Bunga": "Dance", "Hometown" ":" Ficion "," Ficion "," 93, "93", "80", "80", " "77", "History": "89", "Geography": "83"}}, "Kelas 003": {"Xiao Ma": {"Jenis Kelamin": "Pria", "Usia": "18", "Bunga": "" "", "93," 93, "91": "91" "" ":" 91 "", "91": "91": "" 91 "" ":" 91 ":" 91 ":" 91 ":" 91 ":" 91 ":" "91," "91," "91," 91 ":" 91, "" " "97", "Chemistry": "100", "History": "94", "Geography": "92"}}, "Kelas 005": {"Xiao Zhang": {"Jenis Kelamin": "Pria", "" "" "", "Minat": "Running", "Hometown": "" "" "", "67," MOTHER ":" LUNCAR "," HOMETOWN ":" "" "" " "66", "Fisika": "80", "Kimia": 68, "Sejarah": "79", "Geografi": "93"}}}Di atas adalah tutorial pengantar untuk Bootstrap Zero-Basic Pendahuluan (III) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!