Halo teman-teman, ini David dari MD bootstrap dot-com dan dalam kursus kilat ini

saya

akan mengajari Anda cara menggunakan bootstrap 5 dan fitur baru apa yang dapat
Anda temukan

dalam versi terbaru dari kerangka kerja front-end paling populer yang dibuat

desain halaman web modern yang responsif dan dinamis dan aplikasi web yang lebih
baru tetapi sebelumnya

kita mulai Saya ingin membuat catatan singkat di sini karena bootstrap 5 saat ini
masuk

versi alfa jadi pada saat Anda mungkin menonton video ini mungkin sudah

versi yang lebih baik atau bahkan versi stabil yang mungkin memiliki beberapa
perubahan

dalam sintaks jadi harap periksa deskripsi di bawah dalam video ini

karena jika ada pembaruan penting saya akan memperbarui tutorial ini saya akan

tautkan versi baru ke tutorial yang diperbarui dalam deskripsi namun saya

jangan terlalu berharap Anda tahu perubahan penting yang akan terjadi jadi saya
pikir ini

tutorial akan tetap berlaku juga untuk rilis stabil jadi jika Anda punya

minat dalam pengembangan web, Anda mungkin pernah mendengar tentang bootstrap

jika Anda belum pernah mendengarnya sebelum bootstrap adalah CSS HTML paling
populer

dan kerangka kerja JavaScript untuk mengembangkan seluler responsif untuk proyek
pertama pada

web bootstrap telah ada selama lebih dari 8 tahun dan sudah ada

kerangka kerja CSS paling populer seperti yang saya katakan itu memberdayakan
sekitar 18 juta

situs web di seluruh dunia dan angka-angka ini masih berkembang jadi jika Anda
atau Anda mau

menjadi pengembang web, ini pasti sesuatu yang harus Anda ketahui

jadi mengapa Anda harus menggunakan bootstrap sehingga jelas itu meningkatkan
perkembangan

kecepatan sehingga Anda bisa menulis semua kelas itu sendiri tetapi mengapa Anda
melakukannya

buang Anda tahu beberapa bulan waktu Anda untuk membuat sesuatu yang sudah ada

tersedia untuk Anda dan selanjutnya telah diuji dan diverifikasi oleh pengguna
lain
 seperti yang saya sebutkan ada sekitar 18 juta halaman sehingga banyak pengguna
menggunakan

mereka sehingga Anda tahu itu sudah diuji dan diverifikasi dan ada di

ada kesalahan yang sudah dimunculkan dan diperbaiki dengan sangat cepat karena

komunitasnya sangat besar sekarang bootstrap dibuat untuk membuat ponsel

pertama, ia mendekati seluler terlebih dahulu sehingga artinya dirancang untuk

membuat dan

menjamin respon situs web Anda ya Anda tahu menggunakan bootstrap sebagai

framers lain pada dasarnya juga mencegah Anda dari Anda tahu pengulangan bekerja
di Anda

kode di antara proyek sehingga Anda dapat menggunakan kembali elemen yang sama di

proyek yang berbeda dan itulah yang membuat proyek Anda lebih konsisten

Yang juga penting adalah bootstrap sedang diuji terhadap semua web modern

browser jadi ketika Anda menggunakan komponen bootstrap ini mereka sudah diuji

terhadap peramban web baru sehingga Anda yakin bahwa peramban tersebut akan
berfungsi dan

elemen-elemen itu akan berfungsi di setiap browser web dan seperti yang saya
sebutkan

sebelum memiliki komunitas yang sangat besar, jadi jika ada masalah, Anda hanya
dapat melakukannya

bisa langsung memposting pertanyaan atau mungkin pertanyaan yang Anda cari atau

masalah yang Anda hadapi telah diposting oleh orang lain jadi Anda akan
melakukannya

mungkin sudah menemukan solusi dan yang terakhir tetapi tidak sedikit yang terbaru

versi skrip 5 jauh lebih dapat disesuaikan di yang sebelumnya

berarti Anda dapat menyesuaikannya dengan mudah dengan kebutuhan Anda

ok jadi apa yang akan kita bahas dalam kursus kilat ini apa yang sudah kita bahas
apa

apa itu bootstrap dan saya juga akan memberikan sedikit perbandingan tentang apa
itu

perbedaan utama antara bootstrap 4 dan dari 5 apa yang telah berubah dan kemudian

kita akan beralih ke bagian praktis yang akan menghabiskan sebagian besar waktu
dalam hal ini

kursus kilat jadi saya akan memandu Anda melalui instalasi jadi saya akan

share cara install dan add bootstrap 5 kedalam

 proyek Anda dan kemudian saya akan menunjukkan mulai komponen paling populer

dengan sistem grid yang merupakan bagian terpenting dari bootstrap menurut saya

fitur terbesarnya yang membuatnya sangat populer dan saya juga akan menunjukkannya
kepada Anda

komponen lain pembantu lain utilitas lain yang tersedia untuk Anda di

bootstrap jadi ini adalah daftar komponen yang tersedia di bootstrap di sana

ini bukan daftar lengkap atau lebih dari itu dan kami akan melihat cara
menggunakannya

kebanyakan dari mereka oke guys jadi mari kita periksa apa saja yang berubah di
bootstrap 5 I

Percaya perubahan terbesar jelas fakta bahwa kami tidak menggunakan jQuery itu

bootstrap tidak mengharuskan kita menggunakan jQuery lagi dan kita akan berbicara

tentang itu dalam satu detik dan apa lagi tip bootstrap telah turun

dukungan untuk penjelajah internet dan ini luar biasa karena diizinkan

bootstrap 5 untuk menggunakan banyak fitur keren baru karena Internet Explorer
tidak

mendukung banyak fungsi baru yang ada di versi baru

JavaScript atau CSS selanjutnya penggunaan JavaScript telah diminimalkan untuk

mendukung

CSS yang jelas membuat seluruh perpustakaan lebih ringan dan ada yang baru

Properti khusus CSS disebutkan yang akan kita bahas sebentar lagi

selanjutnya shift lainnya adalah shift lain untuk membuat library ini lebih ringan

untuk membuat hampir setiap opsi tersedia sebagai atribut data apa yang bisa kita
lakukan

tinggal ubah dan sesuaikan menggunakan HTML misalnya pada komponen seperti roti
panggang kita bisa

mengubah hampir semua opsi hanya dengan menggunakan atribut data maka kami
memiliki beberapa

mengubah peningkatan dalam sistem grid yang merupakan inti dari

tali dan karenanya kustomisasi modularitas beberapa komponen baru membantu

utilitas di

variasi beberapa komponen telah dihapus seperti Jumbotron

dan yang sangat saya suka tentang bootstrap 5 adalah bahwa mereka bekerja dengan
baik
 sulit sendiri pada kumpulan ikon mereka sendiri yang menurut saya sangat bagus

Sejauh menyangkut jQuery, jQuery pasti membawa banyak hal ke web

pengembangan jaringan untuk masyarakat pengembangan web dan telah digunakan oleh

jutaan atau milyaran mungkin orang di seluruh dunia selama dekade terakhir dan

setengah dan perubahan ini jelas adalah salah satu yang terbesar bukan

terbesar adalah yang paling penting karena file bootstrap akan sangat besar

lebih ringan pada ukuran file dan pemuatan halaman bergerak maju tetapi apa juga
sangat

Yang penting disini adalah anda masih bisa menggunakan komponen bootstrap 5 dengan
jQuery begitu juga jika

Anda ingin melakukannya, Anda masih dapat menginisialisasinya dengan jQuery

bootstrap 5

membuatnya mungkin yang saya tunjukkan pada Anda transisi yang mulus antara
bootstrap 4

dan bootstrap 5 selanjutnya seperti yang saya sebutkan walaupun di bootstrap 4 ada

sudah ada beberapa variabel tetapi hanya ada beberapa yang utama

berkat dropping dukungan untuk internet explorer bootstrap 5 hadir dengan satu set

properti baru untuk hampir semua elemen yang membuatnya lebih mudah untuk
disesuaikan

sekarang jadi misalnya komponen tabel ini telah mereka tambahkan beberapa

variabel lokal untuk membuat stripped dan bagaimana variabel gaya tabel aktif
lebih mudah

kami dapat menyesuaikannya karena kami ingin perubahan penting berikutnya

dilakukan pada formulir

jadi dengan satu set kontrol formulir dan fokus pada mendesain ulang yang ada

elemen lebih sedikit elemen versus menghasilkan yang baru kami mengamati elemen

mereka memiliki tampilan dan nuansa yang jauh lebih konsisten sekarang dan seperti
yang saya sebutkan

Sistem kecerdasan yang ditingkatkan memiliki beberapa perubahan sekarang sehingga

mereka memperkenalkan break point baru

yang ganda besar dan kelas selokan telah diganti dengan utilitas G.

Anda dapat melihat betapa mudahnya Anda dapat menambahkan talang sekarang ke baris
dan kolom Anda sekarang

opsi tata letak formulir telah diganti, spasi vertikal telah ditambahkan dan

kolom tidak lagi posisi: relatif secara default sehingga untuk meringkas sejauh
 komponen yang bersangkutan tidak ada perubahan besar bagaimanapun implementasinya

dari mereka berubah drastis dan sebagai hasilnya bootstrap baru jauh lebih baik

terorganisir dan modular dan mudah disesuaikan dengan kebutuhan yang dibuat

jauh lebih mudah bagi pengembang dan juga jauh lebih mudah untuk dipelajari

dan gunakan untuk kita semua ok guys jadi mari kita mulai coding kita

akan mulai dengan penginstalan dan jelas ada beberapa cara untuk melakukannya

instal bootstrap sehingga kita dapat menggunakan NPM untuk melakukannya sehingga
Anda dapat menggunakan gulp dan di sana

adalah cara, tetapi untuk hari ini saya akan menunjukkan cara klasik untuk
mendownloadnya

Mesin CSS memiliki fakta yang menyedihkan sekarang saya perlu membuat catatan di
sini karena saat ini juga

Saat saya membuat tutorial ini, halaman Dokumen bootstrap tidak dirilis

belum dan tidak ada halaman seperti yang Anda tahu, saya dapat memberi Anda tautan
untuk mengunduh

bootstrap terbaru saat Anda menonton ini mungkin ini sudah ada

tetapi untuk saat ini saya baru saja membuat halaman ini di sini sehingga kita
dapat menemukan tautan ini

dalam uraian di bawah ini jadi buka deskripsi buka tautan ini dan saya punya

halaman ini untuk Anda di mana saya akan menautkan versi terbaru

bootstrap jelas Anda juga bisa mendapatkannya dari bootstrap Doc's tetapi jika ini
adalah

belum ada atau lebih mudahnya kamu bisa buka deskripsi go

di sana dan di sini Anda akan menemukan ini mungkin terlihat sedikit berbeda

itu mungkin berubah di masa depan tetapi akan selalu ada tombol unduh ini dan

Tombol unduh ini akan memberi Anda versi terbaru dari bootstrap terlebih dahulu
sebagai

untuk hari ini kami memiliki lima nol alpha satu jadi saya akan mendownloadnya

Saya akan mengklik unduh dan diunduh di sini jadi saya akan membukanya

sekarang buka unduhan itu masih memuat oke jadi ini dia saya akan membuka zip

Saya akan mengubah namanya menjadi lima jadi jika Anda masuk ke dalam dan sekali
lagi untuk hari ini

mereka hanya folder CSS dan J jadi apa yang akan saya lakukan adalah saya akan
membuka proyek ini
 dalam kode Visual Studio dan saya akan membuat file index.html secara manual jadi
jika

Anda jika Anda memiliki istilah yang sama sekarang indeks ini baru saja dibuat dan
sekarang saya akan

tekan tanda seru dan tekan berhenti ini akan mengumumkan ini akan memberi saya

struktur HTML dasar halaman saya dan mari kita ubah judul menjadi sesuatu seperti

bootstrap 5 kursus kilat oke jadi yang harus kita lakukan sekarang jelas kita
harus link

style sheet kita jadi mari ketik link dan berikan link ke CSS bootstrap CSS
sekarang

apa yang perlu kita lakukan di akhir tag body jam kita harus mengimpor yes dan

Kita perlu memikirkan ketergantungan dulu dan hanya untuk saat ini

karena seperti yang Anda tahu jQuery bukan ketergantungan lagi itu popper jadi
saya

akan mendownload ini dari CDN jadi saya akan meletakkan link di deskripsi

untuk Anda atau Anda bisa atau Anda bisa google saja jadi ini versi terbaru

popper 2 4 OS untuk hari ini dan saya akan menautkan Jas kita jadi mari kita lihat

sumber skrip ini sama dengan Jas bootstrap Jas oke dan itu akan dilakukan

mari kita taruh beberapa judul di sini halo kata bootstrap mari kita simpan, mari
kita jalankan

dan mari kita lihat ini bekerja. Saya sudah bisa melihat font khas ini

bootstrap dan tidak ada error jadi kita siap berangkat oke guys jadi ayo sekarang

berbicara tentang komponen yang paling penting menurut saya yang paling penting
yang dibuat

bootstrap sangat terkenal yang jelas merupakan bootstrap grid begitu jauh bagi
mereka

Anda yang tidak tahu bootstrap grid, saya hanya akan membahas beberapa perbedaan

antara bootstrap 4 dan 5 dan bagi mereka yang tidak tahu apa itu saya juga akan

menjelaskan dengan tepat apa itu dan bagaimana menggunakannya

jadi secara umum bootstrap grid adalah alat yang memungkinkan kita untuk membuat
layout yang

Anda dapat melihat pada dua gambar ini, jadi cerita panjang mempersingkat alat ini

memungkinkan Anda membuat tata letak yang berbeda untuk perangkat yang berbeda
bergantung pada
 ukuran layar sehingga Anda dapat melihat di pojok kanan atas kami memiliki tata
letak untuk

desktop di mana kami memiliki lebih banyak tempat, kami memiliki beberapa margin,
kami dapat mengatur beberapa kotak

bersebelahan karena kami memiliki banyak ruang untuk menampilkannya dan mereka

akan tetap terlihat sempurna saat berada di perangkat seluler di mana tidak ada

banyak ruang di desktop maka kami lebih suka menggunakan gelombang penuh dari

Ilahi jadi ini apa yang bisa kita lakukan, kita dapat menggunakan bootstrap grid
sekarang secara singkat

cara kerjanya menggunakan tiga komponen utama sehingga menggunakan wadah

sebenarnya

kontainer baris dan kolom jadi di dalam kontainer kami meletakkan baris yang ungu

dan kemudian di dalam baris kita meletakkan kolom atau kolom beberapa jadi
sekarang

hal penting berikutnya yang perlu diketahui tentang bootstrap grid breakpoint
bootstrap kita

jadi ini adalah tempat yang bisa Anda lihat jadi ini adalah dimensi kami

layar yang memisahkan tata letak kami sehingga kami dapat memiliki sebanyak
mungkin

tata letak seterang titik terang yang dapat Anda lihat sehingga kami dapat
memiliki perbedaan

tata letak untuk perangkat ekstra kecil yang berukuran 0 hingga 400 60 piksel
medium kecil

X besar

ekstra besar dan ini adalah titik jeda jadi ini adalah ukuran layar

setelah atau di bawah setiap tata letak akan berubah dan mari kita lihat

Contoh karena ini semoga akan menjelaskan semuanya kepada Anda jadi mari kita
mulai

dengan contoh nomor satu dan ngomong-ngomong jangan khawatir kita akan belajar di

bagian selanjutnya dari tutorial ini dalam beberapa detik bagaimana membangun ini
dari

awal untuk saat ini saya hanya ingin Anda melihat cara kerjanya jadi contoh nomor
satu

tata letak yang jelas dan sangat umum jadi untuk beberapa jenis blok atau apa pun
yang kami miliki

kolom utama dengan konten dan kami memiliki sidebar dan sekarang saat kami mulai
minum
 ukuran layar ini Anda dapat melihat ukuran layar di sini di pojok atas saat kita

mulai menyusut ini akan semakin kecil dan semakin kecil dan begitu kita

mencapai salah satu breakpoint yaitu 764 itu akan mengubah tata letak jadi
sekarang ini

dua kolom adalah satu di bawah yang lain dan ini jelas karena seperti yang telah
kita lihat

di sini ini adalah ukuran layar sedang 768 piksel sebenarnya yang telah ditentukan
untuk

tata letak ini untuk mengubah opsi kedua menunjukkan sedikit lebih kompleks jadi

kami memiliki header dan beberapa artikel dan footer dan menggantung dan kemudian
lagi jika

kami membuat layar ini lebih kecil, itu hanya akan bersarang satu di bawah yang
lain dan

akhirnya untuk menjelaskan kepada Anda bagaimana grete bekerja izinkan saya hanya
memberi tahu Anda

bahwa seperti yang Anda ketahui grit terdiri dari baris dan kolom kontainer dan

setiap kolom dapat memiliki ukuran ukuran dari 1 hingga 12 dan apa artinya
sebenarnya Anda

dapat melihatnya di sini sehingga kita dapat memiliki bahkan dalam satu baris kita
dapat memiliki salah satunya

kolom yang berukuran 12 web yaitu 12 dengan saya tidak tahu apa ini 12 Anda

membutuhkan beberapa serikat dengan atau dapat memiliki ukuran lain dari 1 hingga
12 keseluruhan ide

adalah bahwa dalam satu baris kita tidak dapat memiliki lebih dari 12 semuanya

jadi apa yang bisa kita miliki di sini kita bisa memiliki dua belas kolom seperti
yang kita lihat di sini

jadi kita punya dua belas x satu yang memberikan hasil dua belas dan kemudian
kapan aku akan

mulai mengecilkan ini, Anda akan melihat perilaku yang berbeda dan ini karena

kita dapat menerapkan beberapa ukuran ke kedalaman yang sama dari d f-- tergantung
pada

break point memiliki ukuran yang berbeda-beda sehingga akan berukuran satu dua
tiga empat enam

semua 12 sisir dan mari kita lihat cara kerjanya jadi saya akan mulai menyusut
jadi sekarang kapan

Saya mencapai breakpoint berikutnya jadi kami telah ke ekstra-ekstra-besar dan

sekarang kami pindah ke dua
 besar maaf untuk ekstra besar jadi itu dobel dan ini hanya n ekstra besar

ekstra besar kolom kami memiliki ukuran dua dan sebagai hasilnya kami hanya dapat
memuat enam

kolom di samping satu sama lain dan enam sisanya akan berada di bawah jadi
sekarang

mari kita lanjutkan menyusutkan sekarang setelah breakpoint berikutnya kolom kita
memiliki ukuran tiga

jadi sekali lagi karena itu tiga kita bisa memasukkan hanya empat elemen tiga kali
4

memberikan 12 dan kemudian sisa pergi di bawahnya mari kita lanjutkan menyusut
sekarang

ukuran kami adalah 4 sehingga kami dapat menyesuaikan tiga kolom di samping satu
sama lain dan

jelas mereka semakin lebar kan um relatif lebih lebar ke layar kita sekarang

ketika kita mencapai yang berikutnya kita hanya bisa memasukkan dua kolom karena
ukuran setiap kolom

adalah 6 dan akhirnya ketika kita tidak memiliki cukup ruang kita ingin kolom kita

untuk mengambil semua 12 semua dengan ukuran 12

oke jadi sekarang mari kita cepat melalui perubahan grid dari bootstrap menjadi

bootstrap 5 jadi sekali lagi kami sudah mengatakan bahwa ada ekstra ekstra besar
baru

ukuran yang diperkenalkan ada kelas selokan yang telah diganti dengan gen

bintang dan kita akan melihat bagaimana menggunakannya hanya dalam beberapa detik
dan ada beberapa

perubahan lain yang akan kita lihat sekarang saya menyiapkan dua kelas di sini
jadi kita

dapat mewarnai panggilan dan wadah kami sehingga Anda

bisa melihat dengan mudah apa ilmunya biar saya maksimalkan yang satu ini atau
sebenarnya mari

letakkan jendela ini di samping sehingga kita dapat melihatnya jadi mari kita
mulai dengan wadah sehingga

wadah dasar adalah elemen yang memungkinkan kita untuk memusatkan elemen pada
halaman sehingga

Anda dapat melihat secara default kami memiliki margin di sini, kami jelas dapat
menggunakan sesuatu

yang sudah Anda ketahui dari bootstrap agar kontur wadah cairan akan mengambil
 gelombang penuh gelombang penuh tersedia tetapi apa yang baru di sini adalah bahwa
kita bisa

putuskan wadah dan titik putus seperti MD misalnya sehingga ini akan mendapatkan

gelombang penuh dan sampai titik istirahat jadi jika saya akan mengecilkan ini
jadi sekarang butuh

lebar penuh dan untuk layar yang lebih kecil tetapi setelah saya istirahat
menengah

titik maka itu akan berubah ke wadah normal oke jadi ini tentang

kontainer sekarang mari kita bicara tentang mereka berbicara tentang baris dan n
kolom jadi mari

saya juga menyingkirkan gaya ini karena kita tidak perlu melihatnya sekarang, saya
akan melakukannya

biarkan pewarnaan untuk kolom jadi pada dasarnya seperti yang saya sebutkan
sebelum kita gunakan

baris untuk menggabungkan kolom dan lebar, kami memiliki beberapa opsi untuk
digunakan kisi

contoh apa yang bisa kita lakukan kita bisa menentukan ini katakanlah 3ds dengan
panggilan kelas sm

dan ini akan menjadi seperti satu nomor satu dua dan tiga mari kita simpan dan
kita memilikinya

di sini jadi jika kita tidak akan menentukan ukuran kolom ini

otomatis mencoba menghitung jadi dalam hal ini hanya akan mengambil ukuran empat

satu karena kita memiliki tiga elemen jadi 12 dibagi dengan batang terbagi

karena jelas beri kami tiga ya apa yang bisa kami lakukan kami bisa mencampurnya
jadi di

baris kedua kita bisa misalnya hanya memiliki dua dari mereka dan bootstrap akan
lepas landas

Berhati-hatilah dalam kalkulasi agar ini bekerja dengan cukup mudah tetapi jelas
lebih

sering kali apa yang ingin Anda lakukan, Anda ingin menentukan ukuran ini sendiri,
jadi mari kita lakukan

sekarang mari kita lakukan contoh yang telah Anda lihat sebelumnya jadi mari kita
panggil em

d8 jadi MD akan berukuran sedang akan menjadi titik istirahat kami dan itu seperti

konten utama tidak boleh dan mari buat yang lain untuk

untuk sidebar sejauh ini dan di sini kita memiliki sidebar ini dan sekarang saat
kita mengecilkannya
 akan pergi satu di bawah yang lain oke sekarang dan jadi kita bisa membuat sangat
sangat

struktur yang sangat kompleks dan kami mungkin akan memiliki tutorial lain

yang satu ini khusus tapi untuk saat ini saya harap kalian mendapatkan pemahaman
yang baik dan bagaimana caranya

bekerja dan seberapa kuat itu mari kita bicara tentang sesuatu yang telah berubah

di bootstrap lima yang merupakan talang jadi apa yang bisa kita lakukan di sini
dan biar saya gunakan

sebuah contoh dari anjing coon jadi jika Anda akan melihat yang satu ini kami

setel selokan X ini ke lima di sini dan ini memberi kita ruang ini di sini

lihat apa yang akan berubah jika saya akan menyesuaikannya menjadi satu jadi saya
harap Anda bisa melihatnya

bagaimana jarak antara elemen ini di sini di dalam panggilan kita berubah saat
kita

berubah ketika kita menyesuaikan talang jelas yang satu ini dalam basis X dan kita

dapat melakukan hal yang sama dengan sumbu y kedua jadi mari kita memiliki a

lihat yang satu ini jadi ini adalah jarak antara baris kanan 1 2 3 4 dan akhirnya
5

sekarang setelah kita mengetahui cara kerja grid, mari beralih ke komponen

ok guys jadi mari kita mulai dengan komponen paling umum yang dapat Anda temukan
di

bootstrap jadi saya akan memulai gaya dengan membuat wadah untuk elemen kita

dan mari kita mulai dengan tombol jadi saya akan memulai beberapa judul di sini
dan

kemudian bootstrap menawarkan kelas untuk tombol yang sangat mudah digunakan

jadi mari buat tombol baru dengan tombol type dan yang harus kita lakukan adalah

hanya BTN dan BTN kami mengekstrak kelas BTN yang akan menentukan warna kami

tombol jadi mari kita lakukan seperti ini dan ketika saya masuk ke utama dan
seperti yang Anda lihat

itu menciptakan pertempuran yang tampak bagus ada lebih banyak warna yang tersedia
jadi saya

hanya akan menyalin dan menempelkannya dari saluran bootstrap dan di sini Anda
dapat melihatnya

bahwa ini nama seperti kesuksesan sekunder primer yang mereka definisikan dan

warna berbeda untuk tombol kita sekarang kita juga bisa menambahkan Maksud saya
ada yang lain
 jenis tombol yang tersedia jadi saya hanya akan menyalin-tempel tombol ini yang
akan saya tambahkan

garis besar dan ini akan membuat tombol yang diuraikan ini dan sekali lagi dengan
jelas

ada lagi

tombol diuraikan tombol yang tersedia untuk kita sekarang menggunakan tombol
seperti semua yang ada di

bootstrap ini di bootstrap juga sangat mudah karena dalam hal ukuran

kita dapat dengan mudah memperbesar tombol kita jadi izinkan saya menyalin yang
ini dan dengan mudah

menambahkan kelas lain yang disebut BT dan LG untuk yang besar kita bisa membuat
yang lebih besar

tombol dan jelas melakukan hal yang sama tetapi dengan SM akan membuat kami kecil

dan itu hanya menambah dan tombol normal di antara jadi ini ekstra besar

ini normal dan ini kecil jadi ini Excel, ini yang utama dan ini

kecil sekarang opsi lain yang dapat kita gunakan adalah jika kita ingin
menonaktifkan

tombol kami, kami dapat dengan mudah menambahkan properti yang dinonaktifkan dan
ini akan membuat kami

dan dapat diklik komponen umum lainnya dari bootstrap adalah bootstrap

Kereta jadi mari kita lihat bagaimana kita bisa menggunakannya

tambahkan beberapa baris di sini dan kemudian saya akan menambahkan judul lain
untuk kartu

jadi mari kita mulai dengan contoh dasar sehingga kartu dasar terlihat seperti ini
jadi kami akan melakukannya

memiliki dalam dengan kartu kelas dan di dalamnya saya akan menambahkan div dengan
kartu kelas

tubuh dan saya akan meletakkan beberapa konten di sini sehingga Anda bisa melihat
ini

adalah tampilan gerobak dan jelas secara default akan mengambil lebar penuh

tersedia jadi apakah ada dua pilihan bagaimana membuatnya lebih kecil maksud saya

ada lebih banyak pilihan saya akan menunjukkan dua satu adalah satu tidak
disarankan jadi

ini adalah yang pertama saya akan menggunakannya karena akan lebih mudah
melakukannya

tutorial untuk menggunakannya sehingga kita bisa menerapkan gaya sejalan yang
jelas

bukanlah ide yang bagus dan pilihan lainnya adalah menggunakan grid yang Anda
inginkan

sudah terlihat jadi jika kita menambahkan baris baris misalnya dan kita
menambahkan panggilan sm6 misalkan saya

Saya pikir itu harus menjadi ukuran yang baik dan kemudian kami hanya menyalin /
menempel kartu kami ke dalamnya

dapat menyingkirkan Stiles ini dan ini juga akan membuat milik kita menjadi milik
kita

Kartu yang lebih kecil Jenis kartu lain yang biasa digunakan adalah kartu
bergambar cara membuatnya

kartu dengan gambar menggunakan bootstrap kita akan mulai dengan div dengan kartu
kelas

Aku akan meniru gaya ini di sini, apa yang juga akan kita lakukan di sini Maksudku
kita

akan menambahkan beberapa margin kita akan membicarakan tentang margin nanti tapi
sekarang sudah untuk

Anda juga sekarang saya akan menambahkan margin kita bisa menambahkan margin dari
atas saja ya

jadi saya akan menggunakan tiga kosong yang merupakan singkatan dari margin atas
tiga mendefinisikan ukuran

margin three ramps atau kita bisa menggunakan em Y dan Y singkatan dari margin

untuk margin vertikal vertikal jadi untuk atas dan bawah kita akan menggunakan
tiga

landai jadi kita akan mulai dengan kartu kelas ini sekarang di dalamnya saya akan
menambahkan

sebuah gambar dan saya memiliki beberapa gambar di sini jadi saya akan
menambahkannya tetapi lebih buruk lagi

penting saya akan menambahkan kelas untuk itu disebut gambar kartu atas dan
sekarang di dalam

Steve ini saya akan menambahkan div lain dengan badan kartu kelas yang sudah Anda

terlihat sebelumnya dan di sini kita dapat menambahkan misalnya beberapa judul
kartu pos kita

akan menambahkan kelas ke dalamnya yang disebut judul kartu

perbaiki jenisnya di sini dan mari tambahkan beberapa paragraf juga dengan teks
kartu kelas

dan itu adalah beberapa data di sini jadi begini tampilannya jadi di sini kami
memiliki kartu ini
 dan ada juga variasi yang satu ini yang disebut horizontal

kartu jadi untuk mengoptimalkan waktu daripada mengetik dan hanya akan menyalin

tempelkan dari bebek karet itu dan ini adalah tampilan kartu yang baik saya harap

Anda menyukainya dan ini sangat rapi dan bagus akhirnya saya ingin menunjukkannya
kepada Anda

variasi terakhir untuk kartu jadi izinkan saya langsung saja

mereka jadi yang pertama adalah kartu dengan header dan footer jadi biarkan saya
menyalin ini

dari anjing dan jelas kita perlu mengubah ukurannya jadi ini kartu

dengan header dan footer Anda tahu kartu ini juga dapat dengan mudah

ditata menggunakan warna-warna yang telah Anda lihat sebelumnya, jadi izinkan saya
menunjukkannya kepada Anda

Saya menerapkan latar belakang ini warna sekunder latar belakang primer Anda bisa

menambahkan warna ke kartu kami dan mari juga dan beberapa margin di sini adalah
margin y3 jadi

terlihat lebih baik kita juga bisa melakukan hal yang sama dengan perbatasan jadi
mari kita

cepat lihat ini jadi ini adalah perbatasan perbatasan yang berbeda untuk kami

kartu dan akhirnya jelas ada lebih banyak yang dapat Anda periksa di bootstrap

Dokumen halaman tetapi ingin menunjukkan kasus penggunaan yang paling umum dan
paling berguna dan

yang terakhir akan menjadi gabungan kelompok kartu yang disebut kelompok kartu
yang seperti Anda

dapat mengharapkan dan mengelompokkan kartu bersama-sama jadi izinkan saya

memperbarui gambar jadi

Snead dan begitulah cara Anda dapat dengan mudah mengelompokkan kartu Anda dalam
kelompok tiga atau

lebih terserah Anda jadi mari kita pindah ke komponen berikutnya set penting
lainnya

fitur dari bootstrap lima adalah utilitas teks yang memungkinkan kita melakukannya

memanipulasi tipografi kita dengan mudah jadi mari kita lihat bagaimana
tampilannya dan bekerja

pada contoh jadi mari tipografi dan mari kita mulai dengan judul jadi kita akan

memasang lima jelas semua judul HTML tersedia jadi kami memiliki seperti h1 jadi
itu

seperti h1 heading h2 dan biarkan saya copy paste yang ini untuk mempercepatnya
dan h3 h4

h5 dan h6

dan mari kita lihat bagaimana tampilannya sehingga kami memiliki semua judul
default yang tersedia tetapi

Fitur menarik lainnya dari bootstrap adalah kelas usia yang tersedia untuk

kami ketika kami ingin mencocokkan gaya font dari sebuah tajuk tetapi untuk
beberapa alasan kami

tidak dapat menggunakan elemen HTML terkait, jadi izinkan saya menyalin dan
menempel yang ini untuk Anda

untuk menunjukkan kepada Anda bagaimana tampilannya sehingga Anda dapat melihatnya
hanya untuk grafik kami

ini hanya paragraf tetapi mereka memiliki kelas h1 yang membuatnya terlihat
seperti

persis sama dengan heading sebenarnya tetapi pada kenyataannya itu bukanlah hal
yang tinggi

mereka hanya paragraf dan opsi lain yang tersedia dalam

bootstrap kelas tampilan kita jadi jika kita membutuhkan heading kita menjadi
sedikit

verbose sedikit lebih besar maka kita harus menggunakan kelas tampilan ini yang
akan

seperti ini lebih dan ini memiliki sedikit lebih menonjol lebih besar

sedikit lebih banyak pilihan dan gaya heading oke

sekarang mari kita lihat sekumpulan elemen teks sebaris lainnya

kelas yang datang secara native dengan bootstrap elemen teks inline dan

mari kita lihat mens dan mari kita lihat contoh ini jadi apa yang kita miliki

di sini [Musik]

kami memiliki opsi utama yang kami miliki untuk dihapus sebagaimana yang
diwakilinya

unsur-unsur yang sudah tidak relevan lagi atau bukan lagi isyarat kan kita punya
petunjuk

untuk tambahan dokumen maka kita punya au yang merepresentasikan span

teks sebaris yang harus dirender dengan cara yang menunjukkan bahwa ia memilikinya

anotasi non-tekstual kita memiliki goresan kecil dan M yang berarti menekankan

jadi ketahuilah bahwa tag tersebut harus digunakan untuk tujuan semantik jadi
begitulah caranya
 apakah Anda itu cara kami menggunakannya dan ini adalah tampilannya yang benar
jadi kami punya

tinggi seperti kita ini Sam ini inci kamu dan yang ini kecil sementara

yang satu ini kuat dan yang ini adalah M untuk penekanan dan di bawah kegunaan
teks yang

tersedia di bootstrap. Lima adalah tanda kutip hitam jadi mari kita lihat
bagaimana mereka

Sepertinya tanda kutip jadi untuk membuat kutipan hitam kita harus membuat

tag semantik dan kelas quack kode hitam untuk itu dan kemudian menambahkan
beberapa tag jadi biarkan saya

tambahkan beberapa lorem ipsum di sini dan begitulah tampilannya jadi ini milik
kita atau hitam

kutipan kami jelas dapat menggunakan sedikit lebih kompleks

Komponen [Musik] kami akan terdiri dari a

dunia hitam dan dengan beberapa figcaption untuk menentukan sumber untuk ini

kutipan jadi ini akan terlihat seperti itu jadi kami memiliki yang ini di sini
sekarang menggunakan

contoh akord hitam mari kita lihat lebih dekat pada opsi perataan di

bootstrap karena yang bisa kita gunakan adalah beberapa kelas khusus yang
memungkinkan kita melakukannya

mengontrol perataan teks jadi pada contoh ini kita bisa menambahkan pernyataan
kelas

Pusat teks dan ini jelas akan Menengahkan teks kita dan jika Anda menggunakan teks

benar itu hanya akan menyelaraskannya ke kanan jadi izinkan saya menyalin yang ini
dan

tempelkan sebagai contoh perataan teks di sini sekarang opsi lain tersedia

bagi kami kelas lain tersedia untuk kami yang membuat pengembangan kami lebih
mudah

terkait dengan daftar jadi apa yang bisa kita lakukan dengan daftar kadang-kadang
ketika kita mau

menghapus gaya dari rilis kami, kami tidak harus melakukannya, kami tidak harus
melakukannya secara manual

kita hanya dapat menerapkan Maksud saya secara manual maksud saya menambahkan
beberapa Gaya beberapa CSS yang kita bisa

apakah kita bisa saja saya cukup menambahkan kelas ke dalamnya jadi mari kita
lihat dulu bagaimana tampilannya

jadi mari kita buat beberapa yang belum dirilis dengan tiga item baris ke dalamnya
 item dikalikan tiga kali dan mari kita lakukan

seperti 1 2 & a 3 jadi ini jelas bagaimana daftar itu terlihat sekarang dan jika
kita

akan menambahkan daftar kelas tanpa gaya itu akan menghapus semua gaya yang
penting

di sini adalah bahwa ini hanya berlaku untuk arti item daftar anak langsung

bahwa kita harus menambahkan kelas ini ke semua item bersarang jadi jika kita
ingin memilikinya

daftar lain di sini melihatnya sudah mendapatkan Styles lagi jadi kami harus
melakukannya

tambahkan kelas ini di sini lagi dan lebih mungkin tidak

lebih tetapi juga sangat sering Anda menggunakan contoh dalam situasi ketika kami
ingin menempatkan

daftar kami dalam satu sembilan jadi ini adalah sesuatu perhatikan saya apa yang
kami tidak pernah

sering dilakukan dalam liburan jadi ya kami menggunakan item daftar untuk tautan
kami untuk kami

navigasi dan kami hanya ingin mengubah tampilannya menjadi antrean di sebelahnya

satu sama lain karena kami ingin bilah navigasi kami menjadi garis horizontal

jadi mari kita lihat contoh ini sekarang biarkan saya melakukannya lagi seperti
ini jadi kita punya

sumur baru dengan daftar kelas [Musik]

[Musik] di sini item 1 item 2 9 10 3 Anda perlu

tambahkan kelas tertentu ke daftar item juga jadi saya akan menambahkan kelas
paling sedikit

di item baris ke sana dan mari kita lihat sekarang jadi sekarang mereka
diposisikan di sebelah

satu sama lain sangat membantu dan biasa digunakan

fitur kelas gambar kita yang membuatnya responsif jadi mari kita lihat

contoh ini di sini saya akan membuat kesepakatan dan saya akan menambahkan
beberapa gaya untuk itu

sekarang jadi saya akan mengaturnya menjadi 40% dari penampung kami dan saya juga
akan menambahkan

beberapa perbatasan untuk itu jadi katakanlah perbatasan satu piksel sehingga
merah sehingga kita bisa melihat bagaimana

sepertinya dan sekarang kami tidak memiliki konten apa pun di sini sehingga kami
tidak dapat melihatnya

melihat konten jadi mari tambahkan gambar di sini sehingga akan ada gambar kita
dan

seperti yang Anda lihat di sini, saya akan memperbesar ini adalah gambar kita yang
40%

di sini hanya sampai tempat di mana batas merah terlihat dan setelah itu milik
kami

image akan keluar dari div kami jadi di sini Anda dapat melihat di mana div kami
berakhir begitu

untuk memperbaikinya kita dapat menambahkan kelas bootstrap yang disebut

image fluid yang pada dasarnya akan menerapkan lebar maksimal 100 dan tinggi ke
auto yang mana

pada dasarnya akan membuat gambar kami responsif sehingga Anda dapat melihat
semakin besar layar kami

adalah semakin besar pembungkus di sekitar gambar maka

lebih besar juga um gambar kita dan hal yang sama berlaku di atas Streeter yang
menyusutkan

ukuran semakin kecil layar maka gambar yang lebih kecil akan menjadi sekarang ada

juga beberapa kelas tambahan yang tersedia untuk gambar jadi satu bulat

yang akan membiarkan saya menghapus perbatasan ini sebentar jadi ini seperti yang
Anda lihat akan

sedikit membengkokkan sudut kami dan kami juga dapat menggunakan kami juga dapat
menggunakan kelas untuk

mengapungkan gambar kami sehingga kami dapat mengapungkannya sekarang juga

sehingga sekarang Anda dapat melihat bahwa kami dapat mengapungkannya

dari kanan ke kiri tanpa menggunakan CSS kita hanya menggunakan float yang telah
ditentukan kelas ini

kanan dan kiri float fitur lain yang sangat berguna dari bootstrap lima adalah

utilitas jarak yang membuat penerapan margin padding atau margin sangat sangat

sederhana jadi mari kita lihat contoh berikut sehingga kami memiliki div di sini
dengan lebar

diatur ke 600 piksel beberapa batas di sekitarnya sehingga kita bisa melihatnya
dan beberapa margin ditetapkan

ke luar sehingga kita bisa Menengahkannya di layar dan dua paragraf di dalamnya

ini adalah bagaimana kelihatannya tidak ada yang mewah sekarang tapi apa yang
membuatnya menambahkan

padding dan margin sangat mudah, kami bahkan tidak perlu mengingat kelasnya
 kali yang sebenarnya harus kita lakukan hanyalah mengingat urutan atau sintaksnya

yang sangat sederhana jadi pertama-tama kita mulai dengan menentukan apakah Anda
sedang atau tidak

akan menggunakan margin atau padding jadi jika kita akan mengatakan P akan diatur
berlaku

padding Anda akan mengaturnya itu akan berlaku dan margin jadi setelah itu kita

harus menentukan ini sisi seperti kanan atas kiri bawah dan sebagainya

katakanlah saya ingin menerapkan margin di sisi atas dan kemudian secara opsional
kita bisa

tentukan break a point jadi misalnya seperti ex extra-large jadi ini break

titik obligasi yang akan berlaku untuk margin ini dan akhirnya saya akan
menggunakan a

nilai dari 1 hingga 5 jadi saya akan menggunakan 3 dan saya akan menjelaskan
kepada Anda sebentar lagi

apa artinya sebenarnya sekarang mari kita lihat contoh ini

kita sudah menerapkan margin ini di sini tetapi jika kita mengecilkan layar
sedikit kita

akan melihat bahwa itu hilang setelah kita mencapai titik istirahat ekstra besar
dan seterusnya

layar yang lebih kecil dari ekstra-besar itu tidak akan mampu melakukannya dengan
benar

break point yang kami definisikan adalah yang terkecil yang akan efektif

untuk ini untuk kelas ini untuk elemen ini jadi untuk segala sesuatu yang ekstra
besar

dan lebih besar dan itu akan menjadi kabel pesawat sekarang mari kita lihat ini

nilai sekarang karena cara yang saya maksud apa ini apa ini 1 2 3 4 5

nilai sebenarnya berarti mereka mendefinisikan dengan jelas ukuran margin sehingga

1 akan menjadi yang terkecil dan 5 akan menjadi yang terbesar saat ini

margin ini diset ke 1 Aram jadi ini adalah dasar ini adalah unit dasar dalam a

default satu kita jelas dapat menggantinya dengan file SAS jadi kita harus

perbarui variabel speiser dan pada dasarnya nilai-nilai yang digunakan oleh
bootstraps

seperti nol akan menghapus atau menghilangkan semua margin, jadi hapus bantalan
margin

maka satu secara default akan mengatur margin atau dengan padding ke spacer yaitu
1 Ram

dikalikan dengan titik 25 jadi salah satu bagiannya - akan menjadi - akan
dikalikan

dengan 0,5 dan 3 hanyalah spacer jadi 1 Ram

untuk ini akan dikalikan spacer dikalikan dengan 1 poin 5 dan akhirnya 5 sebagai

yang terbesar yang tersedia dikalikan dengan 3 sehingga diberi komentar

biarkan saja untuk masa depan seperti ini jadi sekarang jika kita ingin menerapkan
margin atas 3

dan margin bawah juga 3 - memiliki margin ini di atas dari atas dan

depan bawah apa yang bisa kita lakukan sebagai gantinya kita bisa mendefinisikan
dan my3 baik-baik saja mari

lakukan dengan 5 yang akan menerapkan margin dari atas dan bawah pada dasarnya

dari keduanya mengapa tanda jadi bisa kita pikirkan

ini sebagai garis seperti x dan y dan jika Anda menggunakan X ini jelas akan
menyesuaikan kiri

dan benar dan jika Anda pergi untuk anggur Anda hanya di atas dan terbawah
sekarang seperti Anda

mencari padding itu kurang lebih sama dengan yang saya akan

hapus margin sebentar agar kita bisa melihat dengan lebih baik

hasil jadi saya akan menambahkan kelas untuk yang satu ini jadi saya akan
mengatakan padding 5 dan ini

akan menerapkan menyembunyikan sesuatu yang belum saya sebutkan jadi jika kita
tidak pergi

untuk menentukan situs jadi kami akan membiarkannya kosong itu akan berlaku untuk
semua sisi di sini

sekarang bantalan ini diterapkan ke semua sisi di sini

benar jadi kita punya ini di sini kita punya ini di sini dan inilah cara kerjanya
sekarang

dan bantuan menarik lainnya dari bootstrap adalah cara mudah ke Pusat

elemen secara horizontal sehingga yang bisa kita lakukan adalah mari kita membuat
dan jauh di dalam

this and this wrapping deep so when I create and if with class MX outer which

jelas sedang menyiapkan dan

margin ke auto jadi elemen centroid dan mari tambahkan beberapa gaya ke dalamnya

itu akan menjadi 200 piksel dan itu harus memiliki latar belakang sekitar
 color - Saya memiliki kesalahan ketik di sini, itulah mengapa saya tidak
menyarankan saya, katakanlah

sesuatu seperti itu sehingga kami dapat melihatnya dan ini sejajar secara terpusat

dalam dimensi horizontal oke jadi sekarang mari kita lihat tabel dan bagaimana
kita

dapat bekerja dengan mereka menggunakan bootstrap lima jadi saya telah membuat
beberapa tabel dasar di sini

dengan lebih sedikit baris dan kolom yang terlihat seperti ini dan biarkan saya
mengatur ulang jendela

jadi kita bisa melihat cara kerjanya jadi bootstrap 5 membuatnya sangat mudah

untuk mengubah dan menyesuaikan tabel apa yang harus kita lakukan kita hanya perlu
menambahkan yang tepat

kelas juga ke tabel atau baris atau sel kita jadi misalnya jika Anda mau

ingin mengubah warna tabel kita, kita hanya perlu menambahkan kelas seperti tabel
-

dan kemudian katakanlah primer yang akan mengubah warna tabel kita menjadi primer

sepatu bot dari warna primer dan jelas kita bisa menggunakan klasik ini lho

peringatan bahaya sukses primer sekunder dan seterusnya dan seterusnya ya kita
juga bisa

terapkan yang ini juga ke tingkat baris sehingga kita dapat menambahkan misalnya
tabel bahaya yang

akan mengubah warna baris berikut dan seperti yang saya sebutkan, kita juga bisa
menambahkan ini

pada tingkat sel jadi jika saya akan menambahkan

tabel menyebalkan ini akan berubah menjadi dua setuju satu di Greenville

jadi saya akan menyingkirkan yang satu ini untuk menunjukkan kepada Anda beberapa
opsi yang lebih menarik jadi apa

kita dapat melakukannya sehingga kita dapat dengan mudah menambahkan pengupasan
kuningan ke tabel mana pun hanya dengan menambahkan

kelas strip tabel yang akan mewarnai setiap baris kedua dalam tabel apa yang kita

bisa juga lakukan sekarang kita bisa mengubah kita bisa mengubah tim menjadi meja
pepatah gelap

yang akan membalikkan warna kita dalam kasus ini dan membiarkan saya menghapusnya
juga untuk a

kedua saya juga bisa menunjukkan pilihan lain yang sangat bagus yaitu tabel

hover yang akan membuat baris kita menjadi variabel dan menyorotnya saat kita
melakukannya

kami mengarahkan kursor ke atas dan jelas kami dapat juga menggabungkannya dengan
kelas lain

bootstrap pada dasarnya akan mengurus apa yang bisa kita lakukan sebagai gantinya
kita bisa

dengan mudah mengontrol batas tabel kita sendiri hanya dengan menambahkan batas
tabel

berbatasan dengan kelas tabel kami yang akan menambahkan batas ini dan kami juga
bisa

mengontrol warna perbatasan kami jadi jika nama Anda seperti perbatasan primer itu
akan

berikan warna primer pada perbatasan kita dan jelas kita bisa menggunakan Disrupt
lainnya

warna jika kita ingin menghilangkan perbatasan kita bahkan yang horizontal ini

kita dapat menambahkan kaca perbatasan tabel kelas yang akan menghapus semua
perbatasan

Pilihan menarik lainnya adalah ukuran jadi misalnya kita bisa membuat tabel lebih
banyak

kompak hanya dengan menambahkan table dot - SL yang akan mengurangi padding pada

table now the trip juga sangat memudahkan membuat table kita jadi responsive

mari tambahkan beberapa tabel baru di sini sehingga ledakan responsif dan mari dan
saya akan

tambahkan beberapa tabel yang telah ditentukan di sini dengan lebih banyak dan
dengan lebih banyak kolom sehingga kami bisa

lihat sehingga kami bisa melihat lebih baik cara kerjanya jadi jika kami
menambahkan kedalaman sekitarnya

Di sekitar tabel yang menyatakan responsif sekarang kita bisa dengan mudah
membuatnya

responsif dengan menambahkan scroll ini sehingga bootstrap akan menangani yang
satu ini dan

itu akan menambahkan gulir sehingga bisa terlihat lebih baik dan dapat digunakan
di perangkat apa pun

Terlepas dari ukuran layar yang juga dapat kami lakukan, kami juga dapat
menentukan file

titik putus untuk yang satu ini jadi putuskan di mana kapan gulungan ini akan
ditambahkan begitu

sama seperti dalam kasus lain ketika kita menggunakan break point ini dengan

margin adalah padding kami dari apa yang telah kami lihat sebelumnya
 komponen yang menarik dan sangat berguna adalah peringatan dan bersulang jangan
sampai bingung

tapi dengan nama ini karena Anda tahu mereka agak menyesatkan jadi mari kita a

lihat apa yang kita bicarakan jadi seperti yang saya sebutkan bootstrap menawarkan
Anda berdua

komponen berbeda yang pertama adalah peringatan jadi ini seperti diff sederhana
tetapi ketika kita menambahkan

kelas peringatan ini untuk itu dan jelas kita dapat menentukan warna yang berbeda
seperti

biasanya kita punya komponen bootstrap jadi primer sekunder sukses dan seterusnya
kita

bisa mendapatkan hasil sebagai berikut sehingga seperti yang Anda lihat ini
biasanya digunakan untuk menunjukkan beberapa

pesan penting semacam bilah di atas halaman hanya untuk memastikan itu

orang tidak akan melewatkannya tetapi selain itu ada juga roti panggang yang
tersedia di

bootstrap dan bootstrap 5 mereka juga kadang-kadang disebut orang lain dan biar

tunjukkan mengapa begitu sehingga mari tambahkan kotoran di sini jadi sebut saja
oh

maaf maksud saya mari tambahkan beberapa toast di sini jadi ini adalah sintaks
toast

yang akan saya tempelkan di sini jadi kita punya waktu untuk bersulang

tajuk di sini beberapa placeholder gambar dan kemudian beberapa isi roti panggang
dan

yang menarik adalah bahwa kita tidak melakukannya, kita tidak akan melihatnya di
sini, jadi tidak

muncul di sini kita harus memanggilnya menggunakan javascript jadi ayo pergi

bottom-2 Saya di bawah bagian JavaScript jadi

setelah memuat bootstrap J dan mari kita lihat bagaimana kita bisa memanggilnya
jadi apa

yang akan kita lakukan pertama kali. Saya akan mendapatkan saya akan mendapatkan
paling sedikit dari semua elemen yang mana

memiliki ini di kelas roti panggang ini kita bisa dengan jelas dan mendapatkannya
dengan ID tentang

biasanya Anda menginginkan apa yang ingin Anda lakukan adalah Anda ingin
mempersiapkan lebih banyak yang Anda inginkan

untuk menyiapkan lebih banyak roti panggang seperti ini dan kemudian memecatnya
dalam urutan yang benar atau Anda

mungkin juga ingin menggunakan salah satunya dan kemudian secara dinamis
memperbaruinya

tapi saya akan menunjukkan cara anjing bootstrap menembak mereka jadi saya akan

membuat sebuah array jadi mari kita bersulang

elemen dirilis sehingga di cui daftar elemen kami, kami akan memotong kueri

selektor semua dan kita akan mendapatkan semua elemen dengan roti panggang kelas
oke dan sekarang

untuk setiap elemen dalam daftar apa yang akan kita lakukan, kita akan menggunakan
peta untuk membuat

fungsi elemen roti panggang dan kemudian apa yang akan kita lakukan kita akan
kembali baru

bootstrap bersulang dan kami akan memberikan parameter ini sebagai nilai yang kami
bisa

lakukan di sini kami secara opsional dapat memberikan opsi

objek dan kemudian kita bisa mendefinisikan pilihan kita seperti dia seperti ini
dan kemudian miliki

beberapa opsi seperti animasi atau opsi lain tetapi seperti saya

disebutkan sebelumnya jadi seperti ini dan kemudian meneruskan opsi ini ke objek
kami tetapi

seperti yang saya katakan sebelumnya di bootstrap 5 dan mereka menaruh banyak
perhatian untuk membuatnya

semuanya tersedia sebagai atribut atribut HTML sehingga kita bisa melewatkan ini

Semua animasi melalui Forge ini kita bisa berikan pilihan lain

disini yang seperti animasi data jadi bisa dikatakan seperti animasi data sama

benar dan ini akan bekerja persis sama jadi sekali lagi seperti yang saya katakan
kita bisa melakukannya

baik seperti ini atau seperti itu dan ya ini sangat keren tentang sepatu baru
untuk

bahwa mereka benar-benar telah berupaya keras untuk meminimalkan penggunaan j / s

mungkin ok dan sekarang akhirnya setelah kita memilikinya mari kita bersulang jadi
apa kita

akan lakukan adalah aku akan mendapatkan roti panggang daftar roti ini setidaknya
aku akan mendapatkan ini

pertama dan pada elemen saya akan menggunakan opsi Shou jelas kita bisa
mendapatkan ini
 satu per ID dan kemudian lakukan hal yang sama maksud saya menginisialisasi di
sini seperti itu dan kemudian

menggunakannya tetapi seperti yang saya sebutkan, kami mungkin ingin

menggunakannya di kami mungkin ingin menggunakannya

beberapa tabel jadi mari kita lihat bagaimana tampilannya

jadi saya akan menyegarkan laman dan Anda akan melihat lansiran ini di sini
semampu Anda

lihat itu bermunculan jadi pertama-tama [Musik]

pertama-tama, itu dia

menghilang secara otomatis itu disebut opsi dari ketinggian jadi apa yang kita

bisa kita lakukan kita bisa mematikannya

jadi sekarang seperti yang Anda lihat itu menghilang dan sampai kami menutupnya
tetap terbuka dan

jelas biasanya Anda ingin biasanya apa yang ingin Anda lakukan adalah yang Anda
inginkan

letakkan di suatu tempat di sudut jadi kami akan menambahkan beberapa gaya khusus
di sini

katakanlah posisi tetap dan kemudian 10 piksel teratas dari atas dan 10 piksel
dari

sisi kanan dan mari kita simpan, segarkan dan sekarang yang lain ditampilkan di
atas

sudut kanan jelas kita bisa menggunakan kita bisa menggunakan penempatan apapun di
halaman tapi

seperti yang Anda lihat ini adalah komponen yang sangat keren yang memungkinkan
kami untuk menampilkan beberapa

peringatan kesalahan ketika sesuatu ketika pengguna membuat beberapa kesalahan apa
pun sekarang mari

pindah ke komponen berikutnya yang merupakan bootstrap carousel atau terkadang

disebut

slider jadi seperti inilah tampilan komponen ini sehingga membuat beberapa slide

kami yang secara otomatis bergeser secara otomatis berubah seperti yang Anda lihat

tidak melakukan apa-apa di sini dan kami juga dapat mengontrolnya jadi ini sangat

Komponen keren yang sering digunakan di beberapa tim WordPress tim dan blog Pak

atau apa pun ketika kita ingin memiliki elemen yang disorot ini dan mari kita
memiliki

lihatlah struktur di sini jadi sekali lagi itu tidak sulit jadi apa yang kita
 di sini kita hanya memiliki div dalam untuk carousel di mana kita tentukan
sebanyak

sebanyak mungkin slide yang kami inginkan sehingga kami hanya dapat menambahkan
lebih banyak slide di sini

dan kemudian kami memiliki bagian opsional ini di mana kami dapat menentukan dan
mengontrolnya

empat slide empat slide sehingga kita dapat memiliki anak panah ini

ke kiri ke kanan jika kita jelas ingin karena kita juga bisa menghapusnya

mereka dan kemudian kami ingin melihat mereka seperti di sini mereka pergi dan
slide yang adil

bergerak otomatis jadi terserah Anda apakah kami ingin menggunakannya dan

jelas seperti biasanya di bootstrap kita juga bisa secara terprogram memindahkan
slide kita

- kiri - kanan selanjutnya sebelumnya menggunakan javascript

oke guys selanjutnya komponen yang sangat menarik yang juga diketahui dari

bootstrap untuk dan itu dekat dan ini adalah tampilannya yang kami gunakan

gulir mata-mata untuk menunjukkan status pengguna saat ini elemen yang dia baca

momen sehingga Anda dapat melihat ini adalah semacam mini bagi kami untuk pengguna
itu

jenis agenda dan sementara dia membaca dengan baik dia bergerak ke bawah itu
menunjukkan bahwa dialah yang

keadaan saat ini untuk melihat jadi jelas kita bisa klik untuk pergi untuk
memberikan elemen jadi di mana

kami ingin yang satu ini bertingkat sehingga seperti yang Anda lihat kami memiliki
item ini satu dan

sub-item di sini jadi ini sangat keren dengan yang sering Anda lihat di berbagai

dokumen atau teknologi yang berbeda misalnya Google Docs menggunakan itu dan

sekali lagi ini sedikit lebih kompleks tetapi masih cukup mudah saya buat

file baru untuk yang satu itu dan ini karena kita harus menambahkan yang kita
inginkan

untuk menambahkan ini ke bagian dua - penghargaan sehingga mata-mata data dan
target data - elemen yang

kami ingin memata-matai dan biasanya itu akan menjadi tubuh

ini tidak selalu terjadi dan karena kami memiliki contoh lain di contoh sebelumnya

jadi saya baru saja membuat file baru hanya untuk mata-mata gulir untuk
menunjukkan ini kepada Anda
 Contoh jadi pada dasarnya ini jelas adalah sesuatu yang harus sesuai dengan ini

ID dan ya maksud saya ini adalah elemen yang sangat berguna dan kami menggunakan
ini semua

dari waktu ke waktu ketika datang ke anjing kami untuk MD bootstrap fitur pembunuh
lain

dari bootstrap adalah mur dan bar baru yang dimaksudkan untuk membantu kita
membangun a

alat navigasi jadi mari kita mulai dengan bilah navigasi terlebih dahulu seperti
yang Anda lihat sekarang bilah

Biasanya bilah-bilah ini yang dapat Anda lihat di atas halaman terkadang di bagian
bawah

dan bootstrap sekali lagi membuatnya sangat mudah digunakan

komponen yang seperti siap pakai jadi yang bisa kita lakukan di sini adalah kita
bisa meletakkannya

link minggu sebanyak yang kita inginkan, kita dapat meletakkan bola drop-down yang

komponen bootstrap lain beberapa panel pencarian dan apa itu apa

luar biasa adalah betapa mudahnya disesuaikan jadi jika kita mengubah wadah kelas
ini menjadi

wadah yang saya maksud berisi cairan ke wadah

kita akan mengencangkan bilah navigasi ke tengah sehingga lebih ke tengah

jadi tidak mengambil seluruh spesifikasi di dalamnya sekarang jika kita ingin
mengubahnya jika kita mau

ingin mengubah dan teks ini di sini untuk menyarankannya dengan logo kami saja

perlu mengubah yang satu ini dan menambahkan gambar dengan kelas yang tepat dan
kita akan mendapatkan file

logo di sini yang juga sangat keren adalah itu

kita dapat dengan mudah mengubah warna navbar ini seperti yang biasa kita lakukan
dengan yang lain

elemen jadi misalnya sekarang dikatakan cahaya latar belakang navbar ringan tapi
apa

yang bisa kita lakukan adalah kita bisa mengubahnya menjadi misalnya navbar dark
dan

latar belakang gelap atau sebenarnya warna bootstrap lain dan booming itu akan

secara otomatis mengubah dan menyesuaikan semua gaya lainnya agar terlihat rapi
dan

bersih jadi ini adalah bar yang cukup tetapi seperti yang saya sebutkan juga
menawarkan kami

elemen yang disebut nafs dan yang pada dasarnya merupakan dasar yang baik untuk
semua

navigasi yang mungkin dapat kami pikirkan sehingga kami dapat menggunakannya untuk
membuat versi kami sendiri

navigasi atau beberapa sub navigasi jadi saya akan meletakkan ini di dalam wadah

dan cukup sederhana yang harus kita lakukan, kita hanya perlu membuat yang tidak
berurutan

daftar elemen dengan kelas yang cukup dan di dalam yang meletakkan elemen dengan
kelas

cukup item katakanlah saya ingin memiliki tiga dari mereka dan di dalamnya kita

akan menempatkan lagi tautan dengan beberapa kelas kelas cukup tautan sehingga
tautan yang cukup -

tautan kami akan melakukannya seperti itu dan kami akan mengatakan itu tautan 1
dan kami

juga dapat dengan mudah menandai diberikan 8 item sebagai aktif

jadi seperti yang Anda lihat, kami memiliki tautan di sini

dan meskipun kelas aktif ini tidak melakukan apa pun di sini, tetapi ini akan
sangat efektif

berguna di komponen lain komponen lain yang tersedia untuk kita yaitu

disebut keran jadi izinkan saya menempelkan markup dari anjing bootstrap dan mari

melihat tampilannya sehingga hampir sama tetapi sekarang kami menambahkan kami

memperluas fungsionalitas ini dengan opsi untuk mengubah konten di bawah secara
dinamis

tab berbeda sekarang jadi sekarang kelas ini aktif menunjukkan kepada kita mana
yang sebenarnya

aktif dan jelas untuk itu kami juga dapat menambahkan beberapa kelas khusus untuk
ditampilkan

mana yang saat ini kami jelajahi oleh pengguna dan yang ini juga

tersedia dalam pilihan vertikal seperti ini biar saya taruh beberapa biar tambah
margin di sini

jadi kami bisa melihatnya lebih baik

oke jadi ini yang vertikal sehingga Anda bisa melihatnya sangat keren

sama sekali komponen yang sangat keren untuk dibuat misalnya beberapa halaman
pengaturan tempat kita

dapat memiliki pengaturan yang berbeda tanpa perlu mengkodekannya sendiri sekarang
 ketika kita berbicara tentang bilah navigasi dan navigasi, sangat sering kita
tidak ingin menggunakan

hanya gambar tetapi juga beberapa ikon jadi yang paling keren tentang sepatu bot
4/5 adalah itu

mereka benar-benar mengerahkan banyak upaya dan perhatian untuk mengembangkan ikon
mereka sendiri

diatur jadi sebelumnya kita biasanya harus menggunakan beberapa set lain seperti
font awesome but

dengan file bootstrap sepertinya mereka dan mereka benar-benar memolesnya dan

mereka sudah ada. Saya pikir enam ratus tujuh puluh ikon tersedia untuk itu

contoh apa yang dapat kita lakukan dengan navbar kita di sini kita dapat
menambahkan ikon tambahan di sini

yang akan drop down pada saat yang sama jadi kita berbicara tentang drop down
sedikit

sedikit sebelumnya jadi mari kita tambahkan dan saya hanya menambahkan dan drop
down lain di sini jadi saya

akan mendapatkan yang ini hanya drop down Saya hanya akan menyalin dan menempel di
sini dan apa

Yang akan saya lakukan adalah saya akan mendapatkan drop-down ini dari sini dan
bukannya kata saya

hanya akan meletakkan ikon di sini dan mari kita ubah yang ini menjadi katakanlah

proyek dan pengaturan dan log out dan apa yang juga bisa kita lakukan adalah kita
bisa menambahkan

ikon lain di sini

sebelumnya dan sekarang kita dapat memiliki menu drop-down keren ini di bilah
navigasi kita

ada seperti yang saya sebutkan ada lebih dari 600 ikon yang tersedia dan saya
benar-benar

merasa bahwa mereka benar-benar keren, maksud saya di sini Anda dapat melihatnya
mereka cukup

kecil selalu ada VGA seperti yang Anda lihat sehingga dapat diskalakan sehingga
apa yang dapat kami lakukan

kami dapat mengubah ukuran mereka - ini adalah putaran lima dan sekarang kami
mendapatkannya banyak

lebih besar kita jelas bisa mewarnainya karena itu SVG kita jadi ya saya pikir ada

benar-benar langkah maju yang baik dari bootstrap karena itu mereka menaruh banyak
perhatian
 mengembangkan kumpulan ikon ini dan akhirnya kumpulan terakhir komponen yang

kita akan menutupi dalam mobil kecelakaan ini akan menjadi bentuk jadi bootstrap 5
menawarkan kita

pilihan yang bagus cara yang bagus untuk menjaga formulir kita dalam gaya rapi
bersih jadi apa yang kita miliki

di sini kami memiliki kelas untuk masukan untuk kotak centang radio dan juga
beberapa pembantu

seperti 5 input penanganan dan beberapa lainnya seperti pemetik kunci inggris juga
dilengkapi

beberapa validasi yang telah ditentukan sebelumnya, jadi jika Anda melihat
formulir ini di sini, kami dapat dengan mudah menambahkannya

validasi untuk menyesuaikan bagian dari java script jadi mari kita lihat bagaimana
ini

terlihat dari perspektif kode saya jadi saya tidak akan membahas semuanya

karena seperti yang Anda lihat ada banyak kode dan sudah hampir 1/2

jam untuk kursus ini jadi saya hanya ingin membuatnya tetap singkat tetapi seperti
yang Anda lihat bisa

dengan mudah mencapai hasil ini dengan menerapkan ini

bentuk label bentuk kontrol formulir teks ke kontrol input dan label kami sehingga
itu

apa yang pada dasarnya Anda lakukan dan bootstrap akan memberikan gaya yang bagus
ini

penampilan yang bagus untuk melakukannya, yang penting untuk disebutkan adalah ini
untuk perantara ini

kotak centang sehingga yang seperti tidak dicentang bukan seperti 10 80 atau
sesuatu

seperti itu yang harus Anda lakukan dengan melalui JavaScript jadi Anda harus
menambahkan yang Anda miliki

untuk menambahkan kelas yang dilakukan sendiri ini ke elemen ini menggunakan
javascript, bukan

tersedia melalui HTML yang agak disayangkan tapi mungkin itu akan diubah

di masa mendatang atau mungkin ada beberapa batasan teknis yang tidak memungkinkan

mereka untuk melakukannya dan meminta validasi yang kami sebutkan ini sangat

implementasi sederhana untuk for untuk validasi sehingga seperti yang Anda lihat
pada dasarnya

untuk setiap elemen di informasikan itu memverifikasi apakah itu divalidasi dan

seperti yang Anda lihat, ini menggunakan HTML HTML ini sebagai opsi yang
diperlukan di sini dan dapat kita gunakan

umpan balik tidak valid ini untuk masing-masing untuk setiap elemen secara
terpisah sehingga kami dapat menentukan

kesalahan yang berbeda di sini jadi ya saya pikir itu sangat keren dan sangat
berguna

terutama untuk proyek baru terima kasih banyak telah menonton dan saya harap Anda

menyukai video ini dan sekarang Anda tahu apa yang baru, Anda dapat melihat apa
yang dapat Anda harapkan

di bootstrap 5 dan jika Anda belum pernah mendengar tentang bootstrap sebelumnya,
sekarang Anda

tahu apa itu dan bagaimana cara menggunakannya, jadi jika Anda menyukai video ini,
silakan tinggalkan

seperti di bawah video ini dan berlangganan saluran kami jangan lupa untuk
menghidupkan

pemberitahuan karena kami melakukan banyak tutorial seperti itu berbeda

teknologi dan apa yang bahkan lebih penting jika Anda ingin mendapatkannya

diberitahu tentang rilis baru bootstrap Anda dapat meninggalkan pikiran Anda di
sini di halaman

dari mana kami tidak tahu bootstrap itu jadi jika Anda ingin mendapatkan
notifikasi

tentang rilis alfa atau beta berikutnya atau yang stabil biarkan saja email Anda
di sini

kami akan mengirimkan pemberitahuan kepada Anda saat bootstrap baru akan dirilis
dan

jelas jika akan ada beberapa tutorial baru, sesuatu akan berubah

beberapa sintaks atau apapun maka kami hanya akan memberi tahu Anda sehingga Anda
tidak akan melakukannya

lewatkan saja karena bootstrap saat ini merupakan kerangka kerja terbesar yang
digunakan di web

pengembangan jadi pasti layak untuk mengetahui apa yang terjadi terima kasih lagi
guys

untuk menonton dan sampai jumpa di video berikutnya