Manfaat terbesar bootstrap untuk pengembang adalah tata letaknya yang responsif dan beberapa gaya yang sangat baik.
Sekarang saya akan memperkenalkan beberapa langkah dan beberapa hal yang umum digunakan untuk menggunakan bootstrap.
1. Tulis header
<head> <meta charset = "UTF-8"> <!-Untuk membuat IE menggunakan mode rendering terbaru, tambahkan tag ini-> <meta http-equiv = "x-ua-kompatibel" konten = "ie = edge" <!-untuk tata letak responsif, pertama-tama dapatkan lebar fisik dari perangkat, atur page well. name="viewport" content="width=device-width, initial-scale=1"> <title>LearnBootstrap</title> <!--Refer to the file directly --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!--Reference cdn address--> <link rel="stylesheet" href = "// cdn.bootcss.com/boottrap/3.3.5/css/bootstrap.min.css"> <!-Untuk mendukung IE9 atau di bawah, tambahkan ini-> <!-[jika LT yaitu 9]> <!-Biarkan dia mendukung tag H5-> <skrip src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <!-Biarkan dia mendukung kueri media, itu, responsif-> <script = "https://oss.maxcdn.com/scrippesppers =" https://oss.maxcdn.com/script. <!-[endif]-> </head>
2.Tentroduce JS
Ini bisa ditulis di dalam tubuh
<!- File jQuery. Pastikan untuk memperkenalkan-> <skrip src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>< !-- file javascript inti bootstrap/script srcrip.m/cdn.
3. Gunakan kelas kontainer
Kelas kontainer adalah kelas div yang umum digunakan
Terutama menggunakan fungsi centering
<div> halo </div>
4. Gunakan sistem rasterisasi
Sistem raster adalah sistem tata letak yang sangat umum digunakan untuk bootstrap
Penggunaan sederhana sebagai berikut
<div> <!-Xs berarti di telepon, SM berarti di tablet, dan MD berarti di desktop. Angka -angka berikut mewakili berapa banyak kolom yang ditempati. Layar penuh adalah 12 kolom-> <!-Konten melebihi ketinggian grid, dan ketinggian akan ditingkatkan, dan lebarnya tidak akan ditingkatkan-> <!-Offset berarti berapa banyak kolom yang akan dipindahkan ke kanan-> <v> .col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-sm-6 .col-md-8.col-xs-12 .col-sm-sm-6 .col-8.col-sm .COL-SM-6 .COL-MD-4 </div> </div> <div> <!-Push bergerak ke belakang, tarik bergerak ke depan-> <div> .col-xs-12 .col-sm-6 .col-md-8 </div> <ver> .col-xs-6 .col-md-4 </Div> </Div>
Anda dapat melihat bahwa sistem raster dapat menyesuaikan lebar yang berbeda sesuai dengan perangkat yang berbeda.
5. Gunakan formulir
<SEV> <!-Tabel Responsif, kontennya terlalu lama untuk bergerak ke kiri dan kanan-> <div> <!-Beberapa tabel terakhir adalah tabel dengan perbatasan. When the mouse passes through the tbody row, the color is darker and the table is compacted --> <table> <thead> <tr> <th>Table title</th> <th>Table title</th> <th>Table title</th> <th>Table title</th> </tr> </thead> <tbody> <!--The color of the row is light green --> <tr> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> </tr> <!-Warna barisan adalah krem-> <tr> <th> konten tabel </t> <t th> Konten tabel </t> <t th> konten tabel </t> <t th> konten tabel </t> <t th> konten tabel </t> <ter> Konten tabel </th> </th> </th> <th> Konten tabel </th> Konten Tab </th> </th> </th> <t> Konten tabel </t/th> Konten TH/TH> THR> <TH> Konten Tabel </t> <th> Konten Tabel </t> <th> Konten Tabel </t> <th> Konten Tabel </t> <t th> Konten tabel </t> <th> Konten Tabel </th> <th> Konten Tabel </t> </TH> Konten tabel </t> </tr> </tbody> </tabter> </div> </Div>
Jika Anda ingin mengubah warna kisi -kisi tertentu, Anda dapat menambahkan kelas seperti TR di tag th
6. Gunakan formulir
Penggunaan paling dasar adalah sebagai berikut
<div> <sorm> <!-Bagian dari item ini adalah tata letak induk kelompok-kelompok, dengan label dan input-> <ve> <!-Label untuk sesuai dengan id input-> <label untuk = "exampleInputeMail1"> Alamat email </label> <!-Kelas input harus disetel ke Form-Control-> <input type = "email" id = " untuk = "ContohPaspassWord1"> Kata Sandi </Label> <input type = "password" id = "exampleInputPassword1" placeholder = "password"> </div> <Div> <label for = "exampleInputFile"> Input </label> <input type = "file" id = "exampedInputFile"> <!-Div-Div-pojel <input = "file" id = "exampleInputFile"> <!-Div-Div-pex = pangko> CONTOH. <label> <input type = "checkbox"> periksa saya </label> </div> <typute type = "kirim"> kirim </button> </form> </div>
Jika Anda mengatur kelas formulir ke inline Form, semua elemen akan ditampilkan di baris yang sama
Jika Anda mengatur kelas bentuk ke bentuk-horizontal, setiap kelompok formulir akan menampilkan satu baris, tetapi Anda harus mengatur lebar sendiri
menyukai
<Div> <!-Biarkan setiap kelompok formulir menampilkan satu baris, tetapi setiap anak kelompok-kelompok harus menentukan lebar-> <sorm> <vev> <label untuk = "emai"> email </label> <!-input-group let dan suplemen ditampilkan di baris yang sama-> <Div> <input type = "email" PlaceHolder = "email" id id = "emp> <Div> <input type =" email "PlaceHolder =" email "ID" emp = "EMAIA" untuk = "Passwor"> Kata Sandi </label> <ver> <input type = "password" placeholder = "password" id = "passwor"> </div> </div> <typute type = "kirim"> Summit </button> </form> </div>
Biasanya ketika kami mendaftarkan akun, jika informasinya salah atau benar, itu akan meminta di sebelahnya, dan warna kotak input akan berbeda.
Bootstrap memberi kita fungsi yang sangat praktis ini
<div> <norm> <!-Tambahkan dua item harus ditambahkan ke kelas div induk-> <!-status sukses-> <ver> <label for = "inputsuccess2"> input dengan keberhasilan </label> <input type = "text" id = "inputsuccess2" aria-dijelaskan oleh inputSuScesss2Scess2 " aria-hidden = "true"> </span> <!-Informasi ini disembunyikan, meningkatkan keterbacaan kode-> <span id = "inputSucCess2status"> (sukses) </span> </div> <!-status peringatan-> <Div> <label untuk = "inputwarning2"> input dengan peringatan </label> <input = "input =" input "input" input "input" input "input" input "input" input "input =" aria-describedby="inputWarning2Status"> <span aria-hidden="true"></span> <span id="inputWarning2Status">(warning)</span> </div> <!--Error status--> <div> <label for="inputError2">Input with error</label> <input type="text" id="inputError2" aria-dideskripsi = "inputerror2status"> <span aria-hidden = "true"> </span> <span id = "inputerror2status"> (kesalahan) </span> </div> </form> </div>
7. Tombol
Tombol sangat penting
<!-latar belakang putih-> <tombol type = "tombol"> (gaya default) default </button> <!-latar belakang biru-> <tombol type = "tombol"> (preferensi) primer </button> <!-latar belakang hijau-> <tombol type = "Tombol"> (Success) Success </button> <!-Latar Belakang Biru Terang-> <Tombol Jenis = "Tombol"> (Informasi Umum) </Tombol </Tombol </Tombol <dan Latar Belakang Blue Light-Latar Belakang-Tombol Tombol = "Tombol"> Info </Tombol Umum) </Tombol </Tombol </Tombol </Tombol <dan Latar Belakang Light Blue-> <Tombol Jenis = "Tombol"> Info General) </Tombol Umum) </Tombol </Tombol Latar Belakek (Peringatan) Peringatan </button> <!-Latar Belakang Merah-> <Tombol Type = "Tombol"> (Bahaya) Bahaya </button>
Anda juga dapat menambah dimensi ke kelas
<typon type = "Tombol"> (tombol besar) Tombol besar </button> <tombol type = "Tombol"> (Ukuran default) Tombol default </button> <tombol type = "tombol"> (tombol kecil) tombol kecil </button> <tombol type = "tombol"> (tombol kecil) Tombol kecil ekstra </tombol>
Di atas adalah langkah -langkah dan penggunaan umum bootstrap
Setelah menggunakan kerangka kerja ini, tidak hanya kecepatan pengembangan yang meningkat, tetapi kualitasnya juga meningkat.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
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.