Bootstrap adalah HTML5 dan HTML5 dan HTML berbasis HTML5 dan CSS3 yang sederhana dan berbasis CSS3 dan HTML, CSS, dan JavaScript toolset untuk membangun halaman front-end web. Ini memiliki kurva belajar yang ramah, kompatibilitas yang sangat baik, desain responsif, 12 kisi kisi, dokumentasi gaya wizard, plug-in jQuery khusus, perpustakaan kelas lengkap, berdasarkan fitur yang lebih sedikit dan lainnya. Bootstrap membuat pengembangan web lebih cepat dan lebih mudah.
1. Bootstrap Unduh
Situs web resmi: http://getboottrap.com/; Memulai dengan Pemula: http://getboottrap.com/getting-started/
Kami dapat mengunduh kode sumber bootstrap dan bootstrap dari situs web resmi. Jika Anda tidak ingin mengunduh, Anda juga dapat menggunakan CDN yang disediakan oleh Bootstrap.
2.BootStrap Struktur File
Bootstrap/
├── CSS/
│ ├── Bootstrap.css
│ ├── Bootstrap.css.map
│ ├── Bootstrap.min.css
│ ├── Bootstrap.min.css.map
│ ├── Bootstrap-Theme.css
│ ├── Bootstrap-Theme.css.map
│ ├── Bootstrap-Theme.min.css
│ └── Bootstrap-teme.min.css.map
├── JS/
│ ├── Bootstrap.js
│ └── Bootstrap.min.js
└── font/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── Glyphicons-Halflings-Regular.woff
└── Glyphics-Halflings-Regular.woff2
3.BootStrap's HTML Standard Template
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <!-Jalankan mode rendering terbaru di IE-> <meta http-equiv = "load-uA-compatible" well-wid-wid-wid-wid-wid-wid-wid-wid-wid-wid-wid-wid-wid Atur skala penskalaan-> <meta name = "viewport" content = "width = device-width, skala awal = 1"> <title> Templat standar HTML Bootstrap </iteme> <!-Memperkenalkan CSS inti Bootstrap-> <tautan rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-file gaya Anda sendiri-> <tautan href = "css/style.css" rel = "stylesheet"> <! dan di bawah browser. Jika Anda tidak membutuhkannya, Anda dapat menghapusnya-> <!-[jika lt yaitu 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <skrip src = "https://oss.maxcdn.com/libs/respress.js/1.4.2/respress.min.js"> </script> <! [Endif]-> </head> <h1 boots, world! </h1> <!-letakkan di ujung dokumen untuk membuat load page, world! harus terlebih dahulu menelepon jQuery-> <skrip src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-termasuk semua plugin JS untuk plugin bootstrap atau js yang dapat digunakan sesuai kebutuhan-> <skrip src = "http://maxcdn.bootstrapcdn.com/boottrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>
4. Judul Bootstrap
Seperti halaman HTML biasa, Bootstrap mendefinisikan judul menggunakan tag H1 ke H6, tetapi bootstrap mengesampingkan gaya defaultnya sehingga efek yang ditampilkan di semua browser adalah sama. Aturan spesifik dari definisi ditampilkan dalam tabel berikut:
<!-Judul dalam Bootstrap-> <h1> Judul 1 </h1> <h2> Judul 2 </h2> <!-Bootstrap menggunakan tag <small> untuk membuat subtitle-> <h1> Judul 1 <small> Subtitle </Small> </h1> <h2> Judul 2 <small> Subtitle </Small> </h1> <h2> Judul 2 <small> Subtitle </Small> </heots> <h2> Judul 2 <small> Subtitle </Small> </hheots> <h2> Judul 2 <small> Subtitle </Small> </hheots> <h2> Judul 2 <small> Subtitle </Small> </hheots> Gaya yang sama -> <div> Judul 1 </div> <verv> Judul 2 </div> <verv> Judul 3 </div>
Catatan: Ketinggian garis subtitle adalah 1, font-weight tidak tebal, warnanya abu-abu (#999); Subtitle H1 ~ H3 adalah 65% dari judul, dan subtitle H4 ~ H6 adalah 75% dari judul; Silakan merujuk ke baris 407 ~ 443 di file bootstrap.css untuk detailnya.
5.BootStrap konten
1) Tekankan konten
Dalam proyek aktual, untuk beberapa teks penting, bagian -bagian yang diharapkan akan disorot akan diperlakukan dengan gaya lain. Bootstrap juga membuat beberapa pemrosesan ringan pada bagian ini.
Dengan menambahkan nama kelas ".ead" untuk menyoroti paragraf P, fungsinya adalah untuk meningkatkan ukuran font teks, tebal teks, dan juga menangani ketinggian garis dan margin yang sesuai. Penggunaannya adalah sebagai berikut:
<p> Teks normal </p>
<p> Teks Permaisuri </p>
2) mengungkapkan penekanan melalui warna
Misalnya:
<!-Teks normal di bawah ini adalah coklat->
<p> Teks normal </p>
3) tebal dan miring
BOLD digunakan untuk menggunakan l-label atau label kuat; Italic digunakan untuk menggunakan EM-Label atau I-Label.
<!-bold-> <p> Teks normal <b> bold </b> Teks normal </p> <p> Teks normal <strong> tebal </strong> Teks normal </p> <!-Italic-> <p> Teks normal <em> Italic </em> Teks Normal </p> <p> Teks normal <i> Teks Normal </i> TEKS NOMOR </I> TEKS NOMOR </I> Normal </i> Teks Normal </ITALIC </i> Normal </i> Normal </i> Normal </i>
4) Penyelarasan teks
Bootstrap mengontrol gaya penyelarasan teks dengan mendefinisikan empat nama kelas:
<p> Saya di sebelah kiri </p> <p> Saya berada di tengah </p> <p> Saya di sebelah kanan </p> <p> Saya sejajar di kedua ujungnya </p>
6.BootStrap Daftar
Bootstrap menyediakan enam bentuk daftar sesuai dengan penggunaannya yang biasa: Daftar biasa, daftar yang dipesan, daftar deskripsi titik, daftar inline, daftar definisi, dan daftar definisi horizontal.
1) Daftar Normal
<!-Daftar Normal-> <ul> <li> Daftar Normal 1 </li> <li> Daftar Normal 2 </li> </ul>
2) Daftar yang dipesan
<!-Daftar yang diurutkan-> <l> <li> Daftar yang diurutkan 1 </li> <li> Daftar yang diurutkan 2 </li> </l> <!-Daftar yang diurutkan bersarang-> <Ol> <li> Daftar yang diurutkan 1 </li> <li> Daftar Sortir 2 <ol> <li> </Li> </Li> </Li> </Li> </Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> Li> </Li> </Li> </Li> </Li> </Li> Li> Li> Li> Li> Li> </Li>
3) Pergi ke daftar
Tambahkan nama kelas ".list-Unstyled" ke daftar yang tidak dipesan, sehingga gaya daftar default dapat dihapus.
<Ol> <li> Daftar yang diurutkan 1 </li> <li> Daftar yang diurutkan 2 </li> </ol>
4) Daftar inline (lahir untuk membuat navigasi horizontal)
Sama seperti daftar yang ditakdirkan, daftar inline diimplementasikan dengan menambahkan nama kelas ".list-inline", menukar daftar vertikal dengan daftar horizontal, dan menghapus peluru (angka) untuk mempertahankan tampilan horizontal.
<ul> <li> Entri bilah navigasi 1 </li> <li> Entri bilah navigasi 2 </li> </ul>
5) Daftar Definisi
Daftar definisi Bootstrap cukup menyesuaikan jarak garis, margin dan efek font tebal.
<DL> <DT> Beijing </dt> <dd> Ibukota Tiongkok. </dd> <dt> Shanghai </dt> <dd> National Central City, Megacity. </dd> </ll>
6) Daftar Definisi Horisontal
Daftar definisi horizontal seperti daftar inline. Bootstrap dapat menambahkan nama kelas ".dl-horizontal" ke tag DL untuk mencapai efek tampilan horizontal.
<DL> <DT> Beijing </dt> <dd> Ibukota Tiongkok. </dd> <dt> Shanghai </dt> <dd> National Central City, Megacity. </dd> </ll>
7.Bootstrap's Tabel
Bootstrap menyediakan tabel dengan 1 gaya dasar dan 4 gaya tambahan dan tabel responsif. Dengan rincian sebagai berikut:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> tabel dasar </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/cssssssstrap.min.min.min.minsc.pootss Table</h3> <!-- Main source code to view bootstrap.css file line 1402~line 1441--> <table> <thead> <tr><th>Table Title</th><th>Table Title</th><th>Table Title</th></tr> </thead> <tbody> <tr><td>Table Cell</td><td>Table Cell</td><td>Table Sel </td> </tr> <tr> <td> sel tabel </td> <td> sel tabel </td> <td> sel tabel </td> </tr> </tbody> <Table> <h3> Tabel Crossing Zebra </h3> <! Title</th><th>Table Title</th><th>Table Title</th></tr> </thead> <tbody> <tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr> </tbody> </tbody> <tbody> <tr><td>Table Cell</td><td>Table Sel </td> <td> sel tabel </td> <td> sel tabel </td> </tr> <tr> <td> sel tabel </td> <td> sel tabel </td> <td> sel tabel </td> </tr> </tbody> </tabel> <h3> Tabel dengan perbatasan </h3> </tr> </tbody </table> <h3> <h3> Tabel dengan perbatasan </h3> </h3> </tbody </tbody </tabel> <h3> </h3> </ttr> </tbody </table> </h3> </h3> </h3> </h3> </h3> </h3> 1464-> <ables> <Thead> <tr> <t th> tabel judul </th> <th> Judul tabel </t> <th> Judul tabel </t> </tr> </thead> <tbody> <tr> <td> </Tdbody> </TBBody </TD </TR> </TRBUT </TBBody </tbody </tbody </TD </tR> </TRED </tbody </tbody </tbody </tbody </TR> </TBBody Cell</td></tr> <tr><td>Table Cell</td><td>Table Cell</td></tr> </tbody> </table> <h3>Mouse suspends the highlighted table</h3> <!-- Main source code to view bootstrap.css file line 1469~line 1472--> <table> <thead> <tr><th>Table title</th><th>Table title</th><th>Table title</th><th>Table title</th></tr> </tbody> <tbody> <tr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr> <tr><td>Table cell</td><td>Table cell</td></tr> </tbody> </table> <h3> Tabel kompak </h3> <!-Kode sumber utama melihat baris file bootstrap.css 1442 ~ baris 1449-> <able> <Thead> <tr> <t th> tabel judul </th> tabel </th> <t> tabel </tr> </tr> </thead> <tnbody> <tt> </ttd </tr> </tr> </thead> <tnbody> <tt> </t t t t * </tr> </thead> <tbody> <tt> </t tod> </t tabel </tr> </thead> <tbody> <tt> cell </t t tAb </t t t t t t t t * sel </td> <td> sel tabel </td> </tr> <tr> <td> sel tabel </td> <td> sel tabel </td> <td> sel tabel </td> </tr> </tbody> </able> <h3> Tabel responsif </h3> <!-Sootstrap Menyediakan container dengan contacle class. The table placed in this container has a responsive effect--> <div> <table> <thead> <tr><th>Table title</th><th>Table title</th><th>Table title</th></tr> </thead> <tbody> <ttr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr> <tr><td>Table sel </td> <td> sel tabel </td> </tr> </tbody> </able> </div> </body> </html>
Bagian kode ini berisi tabel yang umum digunakan dalam bootstrap, dan renderingnya adalah sebagai berikut:
Bootstrap juga menyediakan lima nama kelas yang berbeda untuk elemen baris TR tabel (untuk kode sumber yang sesuai, silakan periksa baris 1484 ke baris 1583 di file bootstrap.css). Setiap nama kelas mengontrol berbagai warna latar belakang baris. Deskripsi spesifik ditampilkan dalam tabel berikut:
Sangat mudah digunakan. Anda hanya perlu menambahkan nama kelas yang sesuai dari tabel di atas ke elemen untuk mencapai efek:
<tr> <td> ... </td> </tr>
Melihat:
1. Untuk mencapai keadaan yang ditangguhkan, Anda perlu menambahkan kelas-hover tabel ke tag <able>.
2. Selain ".Active", saat menggunakan empat nama kelas lainnya dan ".table-hover", bootstrap juga membuat pengaturan gaya yang sesuai untuk gaya ini dalam keadaan mengambang. Oleh karena itu, jika Anda perlu menambahkan gaya warna lain ke elemen TR, Anda juga harus melakukan penyesuaian yang sesuai di tabel ".table-hover".
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
Serangkaian artikel:
Pertama kali saya bersentuhan dengan Sistem Grid Magical Bootstrap //www.vevb.com/article/89333.htm
Pertama kali saya bersentuhan dengan formulir bootstrap magis //www.vevb.com/article/89330.htm
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.