Pembelajaran Bootstrap sangat sederhana, dan gaya yang disediakannya sangat indah. Hanya sedikit studi sederhana yang dapat membuat halaman yang indah.
Bootstrap Situs Web Cina: http://v3.bootcss.com/
Bootstrap menyediakan tiga jenis unduhan:
Bootstrap untuk lingkungan produksi
Kompilasi dan terkompresi CSS, JavaScript, dan file font. Tidak berisi dokumen dan file sumber.
Kode sumber bootstrap
Kecil Kurang, JavaScript, dan Kode Sumber File Font dan dengan Dokumentasi. Membutuhkan lebih sedikit kompiler dan beberapa pekerjaan pengaturan.
Kelancangan
Ini adalah proyek porting sumber dari kurang ke sass untuk pengenalan cepat dalam rel, kompas, atau proyek khusus sass.
Bahkan, kita dapat menggunakannya tanpa mengunduh bootstrap:
Situs web Bootstrap China telah secara khusus membangun layanan akselerasi CDN gratis untuk Bootstrap. Berdasarkan layanan CDN dari produsen cloud domestik, kecepatan akses lebih cepat, efek akselerasi lebih jelas, tidak ada batasan kecepatan dan bandwidth, dan gratis secara permanen.
base.html
<!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 rel = "stylesheet" href = "http://cdn.bootcss.com/boottrap/3.3.4/css/boottrap.min.css"> </head> </head> <body> hello, hellet.min.csss "> </head> </head> <body> <body> hello, hyotstrap.min.css"> </head> </head> <body> hello! </h1> <!-jQuery (diperlukan untuk plugin JavaScript Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <!-Sertakan semua plugin yang dikompilasi (di bawah), atau termasuk individu yang dibutuhkan, atau di bawah ini. src = "http://cdn.bootcss.com/boottrap/3.3.4/js/boottrap.min.js"> </script> </body> </html>
Bootstrap telah diperkenalkan di Base.html. Simpan dan kami dapat menggunakan gaya yang disediakan oleh Bootstrap.
Ikon Font
Bootstrap menyediakan lebih dari 200 ikon secara default. Kita dapat menggunakan ikon ini melalui tag rentang:
<h3> Ikon </h3> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span>
Tombol
Tag <button> </button> digunakan untuk membuat tombol, dan Bootstrap memberikan gaya tombol yang kaya. <h3>Button</h3> <button type="button">Button</button> <button type="button">primary</button> <button type="button">success</button> <button type="button">info</button> <button type="button">warning</button> <button type="button">warning</button> <button type="button">danger</button> <h3>Button size</h3> <button type = "Tombol"> Tombol </button> <tombol type = "Tombol"> primer </aton> <tombol type = "Tombol"> Sukses </buton> <tombol type = "Tombol"> info </button> <h3> Tampilkan ikon di tombol </h3> <tombol type = "Tombol"> <pan> </span> Tombol </tombol>
Selain ukuran default tombol, Bootstrap juga menyediakan tiga parameter untuk menyesuaikan ukuran tombol, yaitu: BTN-LG, BTN-SM dan BTN-XS.
Menu pull-down
Menu drop-down adalah salah satu interaksi yang paling umum, dan Bootstrap memberikan gaya yang indah.
<h3>Drop down menu</h3> <div> <button type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a Role = "MenuUtem" TabIndex = "-1" href = "#"> tautan terpisah </a> </li> </ul> </div>
Kotak input
Gunakan tag <sput> </input> untuk membuat kotak input.
<h3> Kotak Input </h3> <div> <span> </span> <input type = "text" placeholder = "username"> </div> <div> <span> </span> <input type = "kata sandi" placeholder = "kata sandi"> </div>
Bilah navigasi
Bilah navigasi sangat penting sebagai panduan untuk seluruh situs web.
<h3> bilah navigasi </h3> <av> <div id = "navbar"> <ul> <li> <a href = "#"> rumah </a> </li> <li> <a href = "#tentang"> tentang </a> </li> <a href = "Kontak"> Kontak </a> </Li> <li> <a href = "Kontak"> Kontak </a> </Li> <li> <a href = "Kontak"> Kontak </a> role="button" aria-expanded="false">Dropdown <span></span></a> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li></li> <li>Nav header</li> <li><a href="#">Separated Link </a> </li> </li> </li> </ul> </div> <!-/. Nav-Collapse-> </div> </av>
Membentuk
Transfer data antara orang dan sistem perlu diisi berdasarkan formulir. Misalnya, pengajuan informasi pendaftaran/login, pengiriman kondisi kueri, dll. Gunakan tag <Morm> </form> untuk membuat formulir.
<h3> Formulir </h3> <norm> <div> <span> </span> <input type = "email" id = "exampleInputeMail1" placeholder = "masukkan email"> </div> <van> <pan> </span> <input type = "kata sandi" id = "ContohinputPassWord1" Placeholder = "kata sandi"> </Div = "Contoh Contoh <input type = "file" id = "exampleInputFile"> <p> Contoh Teks bantuan level blok di sini. </p> </div> <div> <label> <input type = "checkbox"> periksa saya </label> </div> <tombol type = "kirim"> Kirim </button> </formulir>
Kotak peringatan
Kotak peringatan adalah cara penting bagi sistem untuk menyampaikan informasi dan memberikan panduan kepada pengguna. Tidak ada label untuk kotak peringatan, dan gaya yang disediakan oleh Bootstrap dapat langsung membuat kotak peringatan yang indah.
<h3> Kotak Peringatan </h3> <Div Role = "Alert"> <Tombol type = "tombol" data-dismiss = "waspada" aria-label = "tutup"> <span aria-hidden = "true"> × </span> </button> <strong> peringatan! </strong> Periksa lebih baik, Anda tidak terlihat terlalu baik. </div> <Div Role = "Alert"> <a href = "#"> Sukses! </a> </div> <div role = "waspada"> <a href = "#"> info! </a> </div> <div role = "alert"> <a href = "#"> PERINGATAN! </a> </Div> </Div> <a href = "#"> PERINGATAN!
Bilah kemajuan
Proses pemrosesan sistem seringkali mengharuskan pengguna untuk menunggu, dan bilah kemajuan memungkinkan pengguna untuk memahami proses pemrosesan sistem, sehingga meningkatkan toleransi.
<H3> BAR PROGRESS </h3> <verv> <Div Role = "ProgressBar" ARIA-VALUENOW = "70" ARIA-VALUEMIN = "0" ARIA-VALUEMAX = "100"> 70% </Div> </Div>
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