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.
Artikel ini berfokus pada memperkenalkan tutorial pengantar Zero-Basic Bootstrap (2). Detail spesifiknya adalah sebagai berikut:
Situs web yang sering meninjau informasi selama proses:
http://www.w3school.com.cn/ Ini adalah situs web yang didirikan oleh aliansi W3C untuk menyebarkan standar W3C. Ada banyak teknologi di sisi web, dan Anda dapat melihatnya sebagai ensiklopedia teknologi web.
http://v3.bootcss.com/ Tak perlu dikatakan, dokumen Bootstrap3 resmi
http://www.runoob.com/ Ini sebenarnya mirip dengan W3School, tetapi sedikit lebih rumit daripada W3School. Banyak konten diterjemahkan dari situs web bahasa Inggris W3C asli dan dokumen bahasa Inggris resmi dari bootstrap asli, tetapi saya merasa bahwa kualitas terjemahannya lebih tinggi (karena dua situs web pertama juga diterjemahkan ke dalamnya dengan blak -blakan), dan beberapa kasus lebih mudah dipahami.
Tanpa basa -basi lagi, mari kita mulai:
(1) Jelas mencapai tujuan
Seperti yang ditunjukkan pada gambar di bawah ini, ini adalah situs web sederhana yang ingin kami terapkan. Tata letaknya sederhana dan tidak ada efek yang mempesona. Namun, perlu menerapkan fungsi: baca informasi yang relevan dari file JSON (Anda dapat memeriksa situs web di atas untuk pengetahuan tentang JSON) dan menampilkannya di situs web.
Konten File JSON:
{"Class 001": {"xiao wang": {"gender": "laki -laki", "usia": "18", "minat": "sepak bola", "kota asal": "shanghai"}, "xiao li": {"gender": "laki -laki", "usia": "20", "bunga": "Bola basket", "Gender": "laki -laki", "usia": "20", "BOBBOL": "BOBBOL", "Bola Basket", " 002 ": {" xiao cai ": {" gender ":" betina "," usia ":" 19 "," minat ":" tari "," kota asal ":" gaoxiong "}}," kelas 003 ": {" xiao ma ": {" gender ":" laki -laki "," usia "", "18", "18", "18", "18", "18", "18", "18", " "Taikei"}}, "class 005": {"xiao zhang": {"gender": "laki -laki", "usia": "20", "minat": "berlari", "kota asal": "guangzhou"}}}Sekarang:
Tata letak:
Ada tiga blok utama: sisi kiri baris pertama adalah daftar kelas, sisi kanan baris pertama adalah daftar nama teman sekelas, dan baris kedua adalah informasi yang relevan dari teman sekelas.
Fungsi:
1. Klik pada kelas di daftar kelas untuk memperbarui siswa mana di kelas secara dinamis dalam daftar kelas, dan dapat memilih kelas.
2. Klik pada teman sekelas di daftar ClassMate dan secara dinamis tampilkan informasi teman kelas di baris kedua. Hanya satu informasi teman sekelas yang dapat ditampilkan sekaligus.
(2) Teknik yang diperlukan untuk analisis
Tata letak:
Bootstrap: Digunakan untuk mengimplementasikan tata letak dua baris sederhana ini, serta pemeriksaan kolom kelas, dan bilah gulir (beberapa mudah diimplementasikan secara langsung dengan Bootstrap, sementara yang lain tidak bisa. Bagaimana cara mengetahui? Pergi ke tiga situs web di atas untuk menemukan dan memeriksa)
Fungsi:
Gunakan JavaScript dan AJAX untuk mencapai akuisisi data dan interaksi dinamis (dalam metode penyegaran lokal).
(3) Analisis Seleksi Teknis
1. Menerapkan tata letak.
Dengan mencari dokumentasi (http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html), saya menemukan bahwa bootstrap diletakkan menggunakan sistem raster. Dengan mengatur atribut kelas tertentu untuk div, saya dapat mencapai efek tata letak yang saya inginkan. Dan Anda dapat menetapkan efek yang berbeda pada ponsel, tablet, dan komputer desktop. Atribut kelas tag HTML dan tag HTML apa yang dapat ditemukan di W3School.
Perlu dicatat bahwa atribut kelas elemen dapat memiliki beberapa atribut kelas.
Misalnya: <div role = "grup" aria-label = "..." id = "btn-group-vertikal-kelas">
Gunakan interval "ruang" antara atribut yang berbeda, percayalah, ini akan memungkinkan Anda untuk dengan mudah menulis skrip JavaScript dan menyesuaikan CSS.
2. REALIT Susunan vertikal nomor kelas dan beberapa pilihan.
Periksa http://www.runoob.com/bootstrap/bootstrap-button-groups.html untuk mengetahui cara mengatur grup tombol vertikal. Artinya, atur kelas div di mana grup tombol terletak ke BTN-group-vertikal, sehingga menjadi wadah untuk menyimpan grup tombol.
Periksa http://www.runoob.com/bootstrap/bootstrap-button-plugin.html dan tahu cara membuat grup tombol memeriksa. Implementasi dilakukan dengan menambahkan atribut data data-kilat = "tombol" ke div atribut kelas ke BTN-group.
3. Implementasikan sudut tombol untuk didefinisikan ulang dari sudut bulat ke sudut kanan, tambahkan bilah gulir ke grup tombol, dan tambahkan batasan pada teks yang ditampilkan pada tombol sehingga tidak melebihi tombol. Bagian berlebih ditampilkan sebagai "...", dan ketika mouse bergerak dan berhenti pada tombol, semua teks ditampilkan:
Sebagian kecil (sudut bulat menjadi sudut kanan, mouse melayang untuk menampilkan teks) perlu diatur langsung dalam tag HTML.
Sebagian besar implementasi ditulis dengan CSS:
<type style = "text/css">#btn-group-vertikal-kelas {overflow-y: auto; overflow-x: auto; tinggi: 150px;}#btn-group-vertikal-kelas-kelas {overflow-y: auto; overflow-x: auto; tinggi: 150px {ovlow-y: auto; overflow-x: auto; tinggi: 150px; tersembunyi; perbatasan-radius: 0px;} </style>Bagian <tyle> kode ditempatkan di kepala, yaitu, antara <head> dan </head>.
Metode umum adalah untuk terlebih dahulu menggunakan pemilih CSS untuk memilih tag untuk mengatur CSS, dan kemudian mengatur gaya yang sesuai di kawat gigi keriting.
Pemilih CSS yang disebut adalah "#btn-group-vertikal-kelas" dan "tombol" dalam kode di atas, yaitu, baris kode pada kawat gigi keriting. Ada beberapa metode untuk menggunakan pemilih CSS, dan Anda dapat menemukan metode yang relevan melalui situs web W3School.
Karena CSS Style Sheet memiliki tiga metode pemuatan (file CSS; tag <head>, atribut gaya dalam elemen html, dan urutan prioritas yang efektif adalah: "gaya pada elemen"> "elemen gaya pada header file"> "File gaya eksternal", tidak ada yang ada di CSS. Pengaturan Border-Radius dari Tombol di atas <Tyle> tidak berfungsi).
<1> Tulis atribut gaya secara langsung di tag elemen. Ini adalah yang paling disukai, jadi pasti akan berhasil.
<2> Ubah file Bootstrap CSS yang Anda tautkan, sekali dan untuk semua, dan tambahkan elemen baru di masa depan, tanpa harus menulis ulang atribut gaya satu per satu. Ini mengharuskan Anda untuk mengunduh file CSS alih -alih merujuk ke tautan.
Karena halaman kami sangat kecil, saya mengambil metode satu.
4. Gunakan AJAX untuk mencapai akuisisi data, interaksi, dan pemuatan dinamis.
Tanya saya bagaimana menggunakan Ajax? Cari Baidu, atau tanyakan kepada orang-orang yang tahu teknologi front-end.
Hal yang paling inti tentang Ajax adalah dapat disegarkan sebagian tanpa menyegarkan seluruh halaman. Di sini kita harus terlebih dahulu memeriksa dokumen yang relevan tentang teknologi AJAX (tiga situs web di atas, serta berbagai Baidu). Karena Anda ingin mendapatkan data dari file JSON, Anda merujuk ke manual AJAX http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp di jQuery (karena JS Bootstrap didasarkan pada jQuery, dan semua metode jQuery bekerja, dan poin pengetahuan ini juga dikeluarkan. Fungsi GetJson dipilih. Selain itu, lihat http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html Pilih setiap fungsi sebagai metode analisis.
Dalam implementasi kode, ini terutama melibatkan traversal (untuk pernyataan), penilaian (jika pernyataan), operasi pada elemen HTML, menambahkan elemen anak, memodifikasi nilai atribut, dll.
Mengenai cara menulis halaman tertentu, membosankan untuk menulisnya secara detail, jadi saya hanya menempelkan kode.
Beberapa poin untuk memperhatikan saat menjalankan demo: Chrome tampaknya membatasi pembacaan langsung konten file secara lokal, jadi Anda perlu menempatkan seluruh proyek di folder HTDOCS Apache. Lalu jalankan. Mengenai cara menginstal Apache, blog saya sebelumnya memiliki pengantar yang sangat rinci. Cara menggunakannya, tolong Baidu.
<!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: 150px;}#btn-group-vertical-classmates {overflow-y: auto; overflow-x: otomatis; Tinggi: 150px;} tombol {text-overflow: ellipsis; overflow: tersembunyi; perbatasan-radius: 0px;} </style> </head> <body> <vv divol> <br> </br> <div id = "div1-kelas-kelas"> <Div Role = "grup" aria-label = "..." show-> </div> <div id = "btn-group-vertikal-kelas" role = "group" aria-label = "..."> <!-Di mana teman sekelasnya menampilkan-> <tombol type = "tombol" style = "border-radius: 0px;"> klik kelas untuk menampilkan teman sekelas. </button </dv </div> </br> </br> </br> id="context_div"><p>Click classmate to show details.</p></div></div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="js/jquery-3.0.0.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --><script src = "js/bootstrap.min.js"> </script> <script> $ (dokumen) .ready (function () {$. getjson ("resource/classmates.json", function (hasil) {$. masing-masing (function, function (i, field) {var tmp_button = $ ('<"" "" "" "" "" "" "" data = "data =" buncikan = "buncikan =" buncikan = "data =" buncikan = "data =" ("" "" "" "" "" "" dATEIUS = "TOLUMPLEUS =" TOLUMPLEY: "TOLUMPLET =" DATAIUS = "TOLUMPLET =" 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)); $ ("#btn-group-vertikal-kelas"). kosong (); var chosen_list = 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; " chosen_state = 0> </tombol> '). Teks (j); tmp_button.attr ("title", j); $ ("#btn-group-vertikal-kelas-kelas"). append (tmp_button);});}}}); $ (" selected_classmate = $ (this) .text (); var classmate_context_item; $ ("#context_div"). kosong (); $. masing -masing (function, function (i, field) {$. masing -masing (field, field2) {if (j == Selected_classMate) {masing -masing $ ":" + field3; var tmp_p = $ ('<p> </p>'). Teks (classmate_context_item); $ ("#context_div"). append (tmp_p);});});});});});});});});});});});});});});});});});});});});});});});});});});