Saya perlu membuat halaman web sederhana baru -baru ini.
Mempertimbangkan kurangnya pengalaman front-end, untuk memproduksi dengan cepat, proyek ini hanyalah alat dan tidak memiliki persyaratan untuk proyek, jadi saya memilih Bootstrap sebagai kerangka kerja web.
Tujuan asli menulis untuk mempelajari bootstrap dari awal:
Setelah membaca dokumentasi bootstrap untuk waktu yang lama, termasuk pejabat (http://v3.bootcss.com/getting-started/) dan tidak resmi (http://www.runoob.com/boottrap/boottrap-tutorial.html), juga blog pengantar sederhana oleh orang lain yang ditulis oleh orang lain oleh orang lain yang ditulis oleh orang lain oleh orang lain yang ditulis oleh orang lain yang ditulis oleh orang pengantar oleh orang pengantar oleh orang lain yang ditulis oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana oleh pengantar sederhana (http://www.cnblogs.com/fnng/p/44460 47.html), dan komentar tentang bootstrap di zhihu (https://www.zhihu.com/question/35237472, https:/www.zhih.zu1.3.3523742, https: Bootstrap harus menjadi kerangka kerja yang sangat berguna, dan tidak sulit untuk dipelajari. Ini adalah alat untuk produksi berkecepatan tinggi, tetapi fleksibilitasnya tidak cukup bagi pengembang untuk bermain dengannya. Selain itu, ada terlalu banyak hal di ujung depan. Jika Anda tidak memiliki tujuan pembelajaran dan rute yang jelas, Anda dapat dengan mudah jatuh ke detail yang tak ada habisnya dan tidak memiliki output yang sesuai, dan Anda akan merasa frustrasi. Karena itu, saya memutuskan untuk merekam jalur belajar saya sehingga saya dapat meninjau diri dan memulai dengan mayoritas pemula.
Mari kita mulai dengan template paling sederhana dari Bootstrap:
<!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"> <!-- The above 3 meta tags *must* be placed first, and any other content * harus * mengikuti mereka! -> <title> bootstrap 101 template </iteme> <!-bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html shim dan response.js untuk IE8 dukungan elemen html5 tidak ada queries ifes ifes. <!-[jika lt yaitu 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/respespespespespespespesppesppesppespent.js/1.4. </head> <hody> <h1> halo, dunia! </h1> <!-jQuery (diperlukan untuk plugin JavaScript Bootstrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <! src = "js/bootstrap.min.js"> </script> </body> </html>
Mari kita lihat satu per satu (saya menggunakan # untuk penjelasan):
<! Doctype html> # berarti ini adalah halaman html5
<html lang = "zh-cn"> #lang berarti "bahasa", yang merupakan atribut dari tag HTML. Atribut ini memberi tahu mesin pencari bahwa halaman saya adalah halaman Cina, yang nyaman bagi mesin pencari untuk dimasukkan, dan tidak berdampak pada tampilan halaman. "ZH-CN" adalah metode penulisan standar ISO, yang berarti Cina. "ZH" adalah dua huruf pertama "Zhongwen" (jika Anda ingin memberi tahu browser bahwa itu adalah antarmuka bahasa Inggris, Lang = "en" dan "en" sesuai dengan dua huruf pertama "Bahasa Inggris"), dan "CN" adalah kode negara. (http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html)
<meta charset = "UTF-8"> #Meta Tag adalah tag yang memfasilitasi browser untuk menguraikan file HTML. Atribut charset memberi tahu browser bahwa metode pengkodean file HTML ini adalah UTF-8.
<meta http-equiv = "x-ua-kompatibel" konten = "ie = edge"> Atribut #http-equiV memberi tahu browser apa kompatibilitas dan detail lain yang ditentukan dalam html ini. (//www.vevb.com/web/70787.html) #x-ua-Compatible Value adalah tag yang hanya berlaku di IE8 dan versi IE yang lebih baru (IE9, IE10, 11, ...). Ini digunakan untuk menentukan browser untuk mensimulasikan metode rendering dari versi spesifik browser IE. (Beberapa artikel di internet sebenarnya mengatakan bahwa X-UA-Compatible adalah penanda khusus untuk IE8, yang hanya menyesatkan!)
#Mengapa lakukan ini? Karena IE Microsoft sebelumnya (IE6, IE7) tidak mematuhi standar W3C, beberapa kode situs web menggunakan standar IE lama daripada standar W3C. Mulai dari IE8, Microsoft telah mengadopsi standar W3C.
#Jadi Anda dapat menggunakan nilai atribut ini untuk memaksa metode rendering browser. Saat mengatur konten = "IE6", pengguna juga dapat menampilkan halaman web HTML di bawah standar IE6 secara normal di browser IE8 dan di atasnya.
#Content = "IE = Edge" memaksa browser untuk diterjemahkan dengan versi terbaru dari standar IE yang dapat didukung. Mengapa melakukan ini? Karena beberapa browser beberapa pengguna dapat diatur ke "mode kompatibilitas", mereka membuat file HTML berdasarkan standar IE lama, dan kesalahan akan terjadi ketika menemukan kode HTML standar W3C. Oleh karena itu, ketika kode saya standar W3C dan tidak mempertimbangkan dukungan dari standar IE lama, memaksa versi terbaru dari rendering IE yang dapat didukung di browser dapat menghindari kesalahan tampilan yang disebabkan oleh "mode kompatibilitas". ; Di sini lebar dalam konten menentukan lebar tampilan, dan skala awal menentukan rasio penskalaan awal. (Tentang fungsi lain: atur apakah pengguna dapat skala, rasio penskalaan maksimum, rasio penskalaan minimum, dll., Lihat: http://my.oschina.net/liangrockman/blog/380727)
<!-[jika lt yaitu 9]>
<skrip src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<skrip src = "// cdn.bootcss.com/respress.js/1.4.2/respress.min.js"> </script>
<! [Endif]->
#Berikut adalah penilaian komentar bersyarat. Ketika versi IE lebih kecil dari IE9, SCRPIT SRC mengambil sumber daya CDN di atas.
<skrip src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script>
<skrip src = "js/bootstrap.min.js"> </script>
# Berikut adalah file JS yang menautkan jQuery dan bootstrap. Itu ditempatkan di ujung untuk mempercepat pemuatan halaman web, yaitu, pertama -tama tampilkan konten halaman web dan kemudian memuat file JS. Jika ditempatkan di depan, seperti di tag kepala, ketika kecepatan internet tidak baik, itu akan tetap macet dalam file JS memuat, dan konten halaman web tidak dapat ditampilkan dengan cepat, mempengaruhi pengalaman pengguna.
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.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis