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.
Saya punya banyak waktu luang baru -baru ini. Hari ini saya akan memperkenalkan kepada Anda kerangka kerja "gaya" front -end - bootstrap.
1. Bootstrap Arsitektur Keseluruhan
Mengapa dalam Pendahuluan Saya menyebut Bootstrap sebagai kerangka kerja gaya front-end? Mungkin judul seperti itu tidak terlalu akurat, tetapi saya pikir judul seperti itu dapat memungkinkan beberapa pemula untuk memahami dan memahami bootstrap apa yang lebih cepat. Saya tidak ingin menggunakan beberapa kata kelas atas untuk memperdalam pemahaman tentang pengetahuan tertentu, tetapi sebaliknya lebih suka menggunakan beberapa kata yang mudah dipahami untuk menggambarkan poin pengetahuan. Meskipun deskripsi seperti itu mungkin sedikit tidak akurat, saya pikir itu bukan masalah besar, karena deskripsi seperti itu memang dapat memungkinkan pemula untuk memahami pengetahuan ini lebih cepat. Karena saya bingung ketika saya belajar poin pengetahuan, beberapa dokumen pengetahuan resmi sangat kelas atas. Sebenarnya, terus terang, itu hanya beberapa hal dari masa lalu, dan kemudian dienkapsulasi untuk membuat pengembangan lebih mudah dan lebih cepat. Jadi di sini saya membagikan bahwa kerangka kerja bootstrap adalah sama. Selain itu, organisasi konten juga dimaksudkan untuk memungkinkan pemula untuk menguasainya dengan lebih baik. Karena ketika saya pertama kali mulai bersentuhan dengannya, saya juga seorang pemula. Saya pikir cara pengorganisasian ini dapat membantu Anda memahami pengetahuan lebih cepat dan lebih baik.
Untuk Bootstrap, pertama -tama kita harus memperkenalkan arsitektur keseluruhannya - apa sebenarnya yang terdiri dari itu. Saya percaya bahwa Anda dapat dengan cepat memahami apa yang sebenarnya terdiri dari di Bootstrap dengan melihat gambar di bawah ini.
Dari gambar di atas, kita dapat dengan jelas melihat bahwa bootstrap terutama terdiri dari bagian -bagian berikut:
12 Sistem Grid - adalah untuk membagi layar menjadi 12 salinan (kolom).
Gunakan baris untuk mengatur elemen (masing -masing baris mencakup 12 kolom), dan kemudian letakkan konten di kolom.
Offset Kolom Kontrol oleh COL-MD-OFFSET-*.
Komponen Tata Letak Dasar - Bootstrap menyediakan berbagai komponen tata letak dasar. Seperti pengaturan huruf, kode, formulir, tombol, formulir, dll.
JQuery - Bootstrap Semua plugin JavaScript bergantung pada jQuery. Jika Anda ingin menggunakan plugin JS ini, Anda harus merujuk ke perpustakaan jQuery. Ini juga merupakan alasan mengapa kita perlu merujuk perpustakaan jQuery selain merujuk pada file JS Bootstrap dan file CSS, yang keduanya merupakan dependensi.
Komponen CSS - Bootstrap telah pra -implemen banyak komponen CSS untuk kami. Rakit kotak, grup tombol, navigasi, dll. Dengan kata lain, konten bootstrap telah membantu kami mendefinisikan banyak gaya CSS, dan Anda dapat secara langsung menerapkan gaya ini pada elemen-elemen seperti kotak drop-down sebelumnya.
Plug-in JavaScript-Bootstrap juga mengimplementasikan beberapa plug-in JS untuk kami. Kami dapat menggunakan plug-in yang disediakan untuk menyelesaikan beberapa fungsi umum, tanpa mengharuskan kami menulis ulang kode JS untuk mencapai efek seperti kotak prompt dan windows modal.
Desain Responsif - Ini adalah konsep desain. Responsif berarti secara otomatis akan menyesuaikan halaman sesuai dengan ukuran layar, sehingga halaman front-end dapat berkinerja baik di layar dengan ukuran yang berbeda.
Bootstrap terdiri dari bagian -bagian di atas. Di atas telah memberikan pengantar singkat untuk setiap komponen, dan konten berikut tidak lebih dari pengantar terperinci untuk setiap komponen melalui beberapa contoh.
2. 12 Sistem Grid
Bootstrap mendefinisikan sistem 12 grid untuk tata letak yang lebih baik. Hal pertama yang harus ditentukan adalah sistem tata letak untuk setiap kerangka kerja front-end. Di Bootstrap, ia menggunakan baris dan kolom untuk membuat tata letak halaman. Ada beberapa prinsip untuk tata letaknya:
Baris harus dimasukkan dalam .container (lebar tetap) atau .container-fluid (lebar 100%)
Setiap baris berisi 12 kolom
Tempatkan konten di setiap kolom
Dalam sistem raster Bootstrap, browser dibagi menjadi 4 jenis sesuai dengan lebarnya. Nilainya adalah: otomatis (100%), 750px, 970px, dan 1170px.
Gaya yang sesuai adalah ultra-kecil (XS), kecil (SM), layar berukuran sedang (MD), dan besar (LG)
Awalnya diimplementasikan dengan mendefinisikan lebar minimum melalui permintaan media. Oleh karena itu, halaman web yang dibuat oleh Bootstrap kompatibel dengan yang besar dan yang kecil!
Dalam kerangka bootstrap, nilai batas ukuran layar telah ditentukan sebelumnya, dan nilai pembatasan didefinisikan melalui kueri media. Definisi ini adalah sebagai berikut:
/* Layar Ultra-Small (seluler, kurang dari 768px)* //* Tidak ada kode yang terkait dengan kueri media, karena ini adalah default di Bootstrap (ingat Bootstrap adalah Mobile-First?)* //* Layar kecil, lebih besar dari atau sama dengan 768px)*/ @media (MIN-WIDTH: @screen-sm-ms) {medium-screen-sm-ms) {medium) (medium-screen-sm-ms) {medium) {medium) {medium-smin) {medium-smin) {medium-smin) {MEDIE (MID-SME-SMET (MIDE) {MEDIE (MIDE-SMET)* 992px) */ @media (min-lebar: @screen-md-min) {...}/ *layar besar (tampilan desktop besar, lebih besar dari atau sama dengan 1200px) */ @media (min-lebar: @screen-lg-min) {...}Faktanya, kueri media juga digunakan dalam pengembangan aplikasi Win8 untuk mewujudkan aplikasi yang responsif. Jadi, jika Anda mendengar sistem responsif di masa depan, jangan berpikir itu sangat mendalam. Bahkan, kerangka kerja mendefinisikan permintaan media untuk kita. Jika lebar minimum yang ditentukan dalam kueri media melebihi lebar minimum yang ditentukan dalam kueri media, dengan cara ini, Anda dapat mengecilkan ukuran elemen antara layar yang berbeda untuk beradaptasi dengan layar. Namun, konsep yang diusulkan oleh Bootstrap lebih disukai untuk perangkat seluler, sehingga halaman yang dirancang oleh Bootstrap hanya dapat kompatibel dengan yang besar dan kecil tidak kompatibel dengan yang kecil.
3. Komponen Tata Letak Dasar
Komponen tata letak dasar adalah bahwa kerangka bootstrap mendefinisikan beberapa gaya terpadu untuk beberapa label tata letak dasar. Seperti tabel, tombol, bentuk, dll. Mari kita lihat contoh tabel:
<!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> Templat Bootstrap 101 </iteme> <!-Karena tidak ada plugin JS untuk bootstrap, tidak ada referensi ke komponen jQuery-> <!-bootstrap-> <tautan rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <hody> <h3> tabel gaya default </h3> <ablept> <Capttion> Judul tabel. </Capttion> <!- Header Table, Dikombinasikan dengan Table> <Capttions, Tabel Maksud. Tabel-> <Thead> <tr> <th> id </t> <th> Nama Depan </th> <Th> nama belakang </t th> </tr> </thead> <tbody> <tr> <tH scope = "row"> 1 </th> <td> Tommy </td> <td> Li </td> </tr> </td </td> <td> SCOPE = "ROW"> 2 </tm t+head, t represents the meaning of table--><thead><tr><th>ID</th><th>First Name</th><th>Last Name</th></tr></thead><tbody><tr><th scope="row">1</th><td>Tommy</td><td>Li</td></tr><tr><th SCOPE = "ROW"> 2 </tm http://v3.bootcss.com/css/#tables--><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed -> <skrip src = "http://cdn.bootcss.com/boottrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Kode contoh untuk tombol dan formulir tidak akan diposting di sini. Anda dapat menggunakan tautan di bawah ini untuk melihat efek berjalan dan kode sumber. Anda juga dapat mengunduh semua kode sumber topik ini melalui file unduhan terakhir.
Iv. Komponen CSS
Komponen CSS mirip dengan komponen tata letak dasar, yaitu, Bootstrap mendefinisikan beberapa gaya yang ada untuk beberapa tag, dan efek gaya ini sangat indah, sehingga setiap perusahaan atau pengembang tidak perlu menulis gaya lain, sehingga mempercepat efisiensi pengembangan. Mari kita lihat contoh navigasi di sini. Terus terang, jika Anda menggunakan hal ini terlalu banyak, Anda secara alami akan menjadi terbiasa dengannya.
<!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> Templat Bootstrap 101 </iteme> <!-bootstrap-> <tautan rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/boottrap.min.css"> </head> <body> <dan navigasi </h3 </h3 </ha </ha </h3 </h3 </h3 </h3 </h3 </h3 </ha </h3 </h3 </h3 </h3 </h3 </h3 </h3 </h3 </h3 </ha </h3 </h3 </h3 </h3 </hsssss "> </head> <body> <body> navigasi </h3 </h3 </hoMin.css"> </head> <body> <body> navigas toggle get grouped for better mobile display --><div><button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span>Toggle navigation</span><span></span><span></span><span></span></button><a href = "#"> Beranda </a> </div> <!-Kumpulkan tautan NAV, formulir, dan konten lainnya untuk beralih-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> home <span> (span) </span> </a> </li> </Li> <span> (span) </span> </a> </li> </li> </li> <span> (span) </span> </a> </li> li> href = "#"> tentang </a> </li></ul> <ul> <li> <a href = "#"> tautan </a> </li> <li> <a href = "#" data-kunyah data = "dropdown"> <a> </ali </ali> </korong </fooke> </aria> </aria> </falkdown </korong </fooke> </liuptup = aria-expanded = "false"> <a> falsdown "> <a> falsdown </liSpoPup = ARIA-EXPANDED =" FALSE "> FALSED"> FALSED "> FALSED" FALSED "> FALSED </FALLDOW"> href = "#"> Tindakan 1 </a> </li> <li> <a href = "#"> aksi 2 </a> </li> <li> <a href = "#"> aksi 3 </a> </li> <li> <a href = "#"> Tindakan Div </a> </a> </li> </Li> </Ul> </Ul> </Uls. -> </div> <!-/.container-fluid-> </av> <!-jQuery (diperlukan untuk plugin JavaScript Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js.boTcss.com -> <skrip src = "http://cdn.bootcss.com/boottrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Efek operasi komponen lain adalah sebagai berikut:
5. Plug-in JavaScript
Secara default, semua plugin JS dapat diimplementasikan dengan mengatur kode HTML tertentu dan properti yang sesuai tanpa menulis baris kode JavaScript. Inti dari implementasinya adalah bahwa bootstrap mengimplementasikan kode JavaScript yang sesuai untuk properti ini.
Mari kita lihat contoh jendela modal:
<!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-> <tautan rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/boottrap.min.css"> </head> </head> <body> </h3! type="button" data-toggle="modal" data-target="#myModal">Click me</button><div id="myModal"><div><div><div><button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4>Modal Title </h4> </div> <div> <p> Badan uji ... </p> </div> <div> <tombol type = "Tombol" Data-Dismiss = "Modal"> Tutup </button> <tombol type = "Tombol"> Simpan perubahan </button> </div> <!-/.modal-content-> </Div> <!-/.modal <!--/.modal-content-> </Div> <!-/.modal <! jQuery (diperlukan untuk plugin JavaScript Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.min.js"> </skrip> <!-Sertakan semua plugin yang dikompilasi (di bawah), atau termasuk masing-masing file yang dibutuhkan-> </skrip> <! src = "http://cdn.bootcss.com/boottrap/3.3.4/js/boottrap.min.js"> </script> </body> </html>
Setelah membaca semua konten sebelumnya, apakah Anda langsung merasa bahwa Bootstrap sebenarnya hanya kerangka kerja gaya? Dengan ini kita dapat dengan cepat dan mudah membangun halaman web. Selain itu, setelah membaca konten sebelumnya, Anda tidak akan bingung mengapa dokumen bootstrap resmi adalah sebagai berikut:
Bukankah entri di bilah navigasi dari dokumen Bootstrap resmi, komponen utama dari pengantar kami di atas?
6. Ringkasan
Pada titik ini, semua konten artikel ini telah berakhir. Saya berharap melalui artikel ini, pemula dapat dengan cepat memahami dan menguasai Bootstrap. Selain itu, artikel ini setara dengan poin -poin utama bootstrap. Untuk konten yang lebih rinci, Anda dapat merujuk ke situs web resmi China Bootstrap. Tapi saya pikir saya tidak menginginkannya lagi. Lebih baik berlatih secara langsung jika Anda memiliki waktu itu. Aplikasi web VS2013 sudah mendukung kerangka Bootstrap secara default. Anda dapat segera membuat aplikasi web melalui VS2013 untuk mengalami aplikasi bootstrap di bawah ASP.NET MVC sebelum membacanya.