1: Pengantar Bootstrap
Boostrap adalah kerangka pengembangan front-end yang sangat populer yang sangat meningkatkan efisiensi pengembangan tim front-end. Bootstrap melengkapi komponen tata letak CSS umum dan plugin JavaScript, memudahkan pengembang untuk digunakan. Gunakan Bootstrap untuk dengan cepat membuat halaman responsif yang indah dan kompatibel dengan perangkat seluler.
Dua: Fitur Bootstrap
Berikan satu set lengkap plug-in CSS, lembaran gaya yang telah ditentukan sebelumnya, satu set tabel plug-in JS berbasis jQuery. Sistem penghapusan kisi -kisi responsif yang fleksibel. Pengembangan berbasis pertama berbasis seluler berdasarkan kurang dan sass.
Tiga: Gunakan Bootstrap
1. Langkah 1:
Unduh bootstrap terbaru di http://www.bootcss.com/. Setelah dekompresi, ada tiga folder, yang masing -masing menempatkan CSS, JS dan font. Ada versi terkompresi dari file CSS dan JavaScript, dan Anda dapat memilih versi sesuai dengan kebutuhan Anda. Versi yang tidak terkompresi digunakan selama pengembangan dan versi terkompresi digunakan selama rilis.
2. Tampilan Kode Template Tetap
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-kompatibel" konten = "edge = edge, chrome = 1"> <!-IE = edge memberi tahu IE untuk menggunakan mesin terbaru untuk render = 1 "> <!-IE = edge memberi tahu IE untuk menggunakan mesin terbaru untuk rendering render = 1"> <!-IE = edge memberi tahu IE untuk menggunakan mesin terbaru untuk renders render = 1 "> <!-IE = edge memberi tahu IE untuk menggunakan mesin terbaru untuk renders render = 1"> <!-IE = edge memberi tahu IE untuk menggunakan mesin terbaru untuk renders render = 1 "> <! name = "viewport" content = "width = device-width, skala awal = 1"> <!-tiga tag meta di atas * harus * ditempatkan di depan, dan konten lain * harus * mengikutinya! -> <Title> Bootstrap Template Style </itement> <!-Memperkenalkan bootstrap-> <tautan href = "css/bootstrap.min.css" rel = "stylesheet"> <!-memperkenalkan kerangka kerja html5 dan respons.js untuk mendukung IE8 dan IE9. IE 8 membutuhkan kerja sama respons.js untuk mencapai dukungan untuk pertanyaan media. Respons.js tidak dapat lagi dijalankan di bawah file: // file path: //-> <!-[jika lt yaitu 9] berarti itu berlaku di browser di bawah IE9-> <!-[jika LT IE 9]> <Script src = "// cdn.bootcss.com/html5shiv/3.7.2/html.scrips.com/html.shiv m, src = "// cdn.bootcss.com/respress.js/1.4.2/respond.min.js"> </script> <! [Endif]-> </head> <hody> <h1> halo, dunia! </h1> <!-Kutip plugin jQuery di bagian bawah untuk mencapai efek dinamis bootstrap-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <-introducing skrip bootsrp-> src = "js/bootstrap.min.js"> </script> </body> </html>
3. Penggunaan Dasar:
3.1 Keseluruhan Kerangka-12 Sistem Grid
Inti dari bootstrap adalah sistem 12-raster. 12 sistem grid membagi area konten halaman web menjadi 12 salinan sesuai dengan lebar. Pengembang web dapat dengan bebas menggabungkannya dalam porsi, yang memfasilitasi tata letak halaman web dan membuat tata letak terlihat rapi dan terstandarisasi.
Bootstarp menyediakan wadah gaya yang disebut wadah. Container adalah gaya yang berpusat pada otomatis, sangat adaptif. Menggunakan .container sebagai gaya div terluar dari konten halaman web dapat dengan mudah mengimplementasikan 12 tata letak halaman web grid. Selain itu, sistem 12-grid ini adaptif dengan ukuran layar, dan .Container akan secara otomatis menyesuaikan lebar total dan lebar rata-rata grid sesuai dengan ukuran layar.
COL-LG-N Lebar kolom maksimum 95px jika> = 1200px piksel, bagi .container12 secara setara dengan lebar 95px per porsi. Lebar sisanya adalah 100%
COL-MD-N Lebar maksimum 78px; Divide .container12 sama dengan> = 992px piksel tersisa 100%
COL-SM-N Lebar kolom maksimum 60px jika> = 768px piksel, Bagi .container12 sama dengan sisa kasus 100%
Lebar kolom col-xs-n sama dengan ukuran viewport 12. Container 12 sama dengan layar dari ukuran apa pun
3.2 Gaya Dasar
(1) Gaya H1-H6 Bootstrap telah dibatalkan dengan tebal, dan margin atas dan bawah didefinisikan ulang H1-H3 margin-top: 20px; margin-bottom-10px; H3-H6 margin-top: 10px; margin-bottom-10px;
(2) Tentukan empat gaya penyelarasan, yaitu .text-left, .text-center, .text-right, .text-Justify .text-Justify kedua ujung huruf bahasa Inggris
(3) Bootstrap menyediakan lima gaya warna default, -prima kunci biru, -suksus sukses hijau, -info informasi peringatan biru peringatan oranye, -danger merah berbahaya
3.3btn Komponen +BTN-Group
<typon type = "tombol" class = "btn btn-primary"> tombol tombol </button> komponen peringatan <div class = "waspada" class = "peringatan peringatan"> peringatan bahaya </div>
Komponen umum memiliki empat ukuran: Ultra-Small XS, SM kecil, LG biasa, dan besar. Gunakan metode ini adalah ukuran-ukuran komponen <tombol type = "tombol" class = "btn btn-lg"> tombol ultra-besar </button> Berbagai jenis tombol dari komponen yang sama dapat digunakan dalam kombinasi.
<typon type = "tombol" class = "btn btn-primary btn-lg"> tombol tombol ultra-besar </aton> <!-btn-group-> <v bulat> home </button> <button> Halaman kedua </button> <button> halaman 2 </buttpy> <button> Halaman terakhir </buttpute> <button Typy> <Buttony = "Page 2 </buttpy> <Buttondy> Last Page </buttpute> <button TypeT =" Daftar <span> </span> </button> <ul> <li> Lenovo </li> <li> Asus </li> <li> Apple </li> </ul> </div>
3.4 Gaya Table Mendapat:
Tambahkan elemen induk div ke elemen tabel, tambahkan class = "tabel-responsif" ke div ini Buat tabel yang sesuai. Ketika piksel viewport kurang dari 768px, bilah gulir horizontal akan muncul.
<!-Tabel, ada warna spasi di antara daftar bergaris meja, tabel responsif meja Adaptive-> <div> <ableb> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr> </Table> </Div>
3,5 Badge
<!-Lencana Lencana-> <br/> <a href = "#"> Perawatan Khusus <span> 42 </span> </a> <br/>
3.6 Bar Navigasi
(1) Bilah navigasi kapsul
<ul> <li> <a href = "#"> dinamis <span> 42 </span> </a> </li> <li> <a href = "#"> profil </a> </li> <li> <a href = "#"> Pesan pribadi <span> 3 </span> </a> </li> </ul>
(2) Bilah navigasi label
<!-Tag Navigation Menu-> <ul> <li> <a href = "#news1" data-koggle = "tab"> berita perusahaan </a> </li> <li> <a href = "#news2" data-kilat = "tab"> berita industri </a> </li> <li> <a href = "#News3" data-toggle="tab">Notices</a></li></ul><div><div id="news1"><ul><li>Company News</li></ul></div><div id="news2"><ul><li>Industry News</li></li></div><div id="news3"><ul><li>Notice Announcement</li><li>Notice Pengumuman </li> <li> Pengumuman pemberitahuan </li> </ul> </div> </div>
3.7 Grup Input
<!-Input+Button Combination-> <div> <input type = "text"> <span> <button> Cari </button> </span> </div>
3.8 korsel
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-kompatibel" konten = "IE = edge, chrome = 1"> <meta name = "viewport" content = "width, dever-widtth, chrome = 1"> <meta name = "viewport" Content "content =" width, dever-widtth = 1 "> <meta name =" viewport "content =" wide, device-wid-widtth = 1 "> <meta name =" viewport "content =" wide, device-wid-widtth = 1 "> <meta name =" viewport "content =" wide, device-wid-wid-widtth = 1 "> style </itement> <link href = "../ css/bootstrap.min.css" rel = "styleSheet"> <tyle> body {latar belakang: #eee} .item {position: relatif; tinggi: 400px} .item img {position: relatif; Lebar: 100%; Tinggi: 400px} .item p {position: absolute; Atas: 40%; Lebar: 100%; Warna: #fff; } .item h1 {position: absolute; Atas: 20%; Lebar: 100%; Warna: #fff; Text-Align: center} @media (max-width: 768px) {.slide {width: 100%}} </style> <!-[jika lt yaitu 9]> <script src = "../ js/html5shiv.min.js"> </skrip> <script> <script> src="../js/respond.min.js"></script><![endif]--><script src="../js/jquery.min.js"></script><script src="../js/bootstrap.min.js"></script></head><body><div><div id="myCarousel" data-ride="carousel" > <!-Slide Navigation-> <Ol> <Li Data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> </Li> <li-target = "#mycarousel" data-slide-slide-to = ">" Li = "Li Li> Li#-target" Data-Target "Data-Target" Data-Slide-To = ">" Li = "DATAGED" DATA (DATA (DATAGED "DATAGED" DATAGED "DATAGED" DATAGED "DATAGED" DATAGED "DATAGED" DATAGED "DATAGED" DATAGED "DATAGET" data-slide-to = "2"> </li> </l> <div style = "Tinggi: 400px"> <!-slide pertama-> <div style = "Tinggi: 400px"> <img-holder-resendered = "true" sleve = "../ gambar/icon1.png"> <h1> judul </h1> <pical> parag </paragr "> <h1> judul </h1> <pift> parag </paragr"> <h1> judul </h1> <pical> parag </paragr "> <h1> content </h1> <piaph> </paragr"> <h1> content </h1> <pen> piR/paRACT </paragr "> <h1> judul content </h1> <p a icon1 1 </div> </div> <!-Slide kedua-> <viv> <img data-holder-rendered = "true" src = "../ gambar/ikon2.png"> <viv> title2 </div> </div> <!-slide ketiga-> <v> <img data-rendered = "true" src="../images/icon3.png"><div>Title3</div></div><!--Live-right navigation--><a href="#myCarousel" data-slide="prev"><span aria-hidden="true"></span><span>Previous</span></a><a href="#myCarousel" data-slide="next"><span aria-hidden="true"></span><span>Next</span></a></div></div><script>$(function(){$('#myCarousel').on('slide.bs.carousel', function () {// alert("callback function");});});</script></body></html>3.9 kelompok panel
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> bootstrap instance- halaman tab (tab) plugin </iteme> <tautan rel = "stylesheet" href = "../ css/bootstrap.min.css"> <script script = "../" src="../js/bootstrap.min.js"></script><body><div id="panel-group"><!--Panel content close--><div><div><h4><a data-toggle="collapse" data-parent="#panel-group" href="#collapseOne">panel title</a></h4></div><div id="collapseOne"><div>panel content</div></div><!--panel content open--><div><div><h4><a data-toggle="collapse" data-parent="#panel-group" href="#collapseTwo">panel title</a></h4></div><div id="collapseTwo"><div>panel Konten </div> </div> </div> </body>
3.10 Kueri Media
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "skala maksimum = 1.0, skala minimum = 1.0, title skalaum = 0, lebar = scale-width, skala awal = 1.0"/<-judul; Judul; 200px; latar belakang-warna: merah;}/*Ketika lebar maksimum yang enak adalah 980px, yaitu, gaya internal yang dapat disukai <= 980px mulai berlaku*/@media (max-width: 320px) {Div {font-size: 10px; latar belakang: yellow;}} </style> </head> </font-ukuran: 10px; latar Belak Kueri </div> </body> <script> window.onResize = function () {var myDiv = document.geteLementsbyTagname ("div") [0]; myDiv.innerHtml = document.documentelement.clientwidth;} </script> </html>Empat: hal -hal yang perlu diperhatikan
1. Wadah, Col - - (raster), perlu dibungkus dengan div terpisah, dan kemudian mendefinisikan konten lain di dalamnya.
2. Jika Anda ingin mengatur kelas atau ID yang tidak dapat didefinisikan untuk kueri media tidak dapat didefinisikan untuk elemen dan menulis kelas atau ID dari definisi col - - (raster) menjadi div,
Medio adalah cara untuk menulis kesalahan kelas untuk mendefinisikan kueri media <div> aa </div>
Cara yang benar untuk menulisnya adalah
<div> <div> aa </div> </div>
3. Jika Anda menggunakan wadah untuk mencapai adaptasi tinggi, Anda tidak dapat menambahkan ketinggian ke elemen, dan Anda harus mengatur overflow tersembunyi untuk elemen induknya.
4. Setelah pengaturan posisi posisi untuk elemen, lebar elemen adalah 0. Jika Anda ingin elemen dipusatkan, Anda perlu menambahkan lebar: 100%; Teks-Align: tengah;
5. Saat menggunakan tag input, jika col - - (raster) didefinisikan untuk kelas induknya, Anda dapat menambahkan kontrol formulir ke input untuk mengatur ukuran input sebesar kelas induk.