Ikhtisar Bootstrap
Bootstrap adalah kerangka kerja front-end yang membantu Anda merancang antarmuka web dengan komponen JavaScript dan siap pakai CSS untuk elemen umum seperti navigasi, formulir, dan tombol. Ini juga memiliki sistem tata letak kisi responsif yang menyesuaikan situs Anda untuk perangkat dengan ukuran layar berbeda, seperti ponsel dan tablet. Dengan menggunakan sistem tata letak Bootstrap, Anda dapat membuat satu situs yang terlihat bagus di perangkat apa pun yang mungkin digunakan pelanggan Anda.
Power Pages templat menggunakan komponen Bootstrap standar dengan gaya kustom minimal. Dengan menggunakan template ini, Anda dapat dengan mudah mengubah tema (font, warna, dan sebagainya) agar sesuai dengan merek dan preferensi Anda secara konsisten di seluruh situs Anda.
Power Pages mendukung Bootstrap versi 3.3.6 dan Bootstrap versi 5. Bootstrap versi 5 menawarkan fitur pengalaman pengguna (UX) yang ditingkatkan dan komponen baru seperti dukungan akordeon, offcanvas, dan RTL.
Untuk situs baru Power Pages , Anda harus menyiapkan Bootstrap versi 5 di lingkungan Anda. Anda juga dapat memigrasikan situs web Bootstrap versi 3 yang ada ke versi 5.
Sesuaikan Bootstrap
Untuk menyesuaikan Bootstrap, Anda mengubah nilai variabel dan kemudian mengunduh versi Bootstrap yang dikompilasi dengan nilai kustom Anda.
Kekuatan variabel Bootstrap adalah bahwa mereka mendefinisikan semua gaya dalam kerangka kerja, bukan hanya satu elemen. Misalnya, variabel @font-size-base menentukan ukuran default teks di situs Anda—teks isi, judul, dan semua elemen teks lainnya. Judul H1 dapat didefinisikan sebagai 300 persen dari @font-size-base. Dengan mengatur variabel yang satu ini, Anda mengontrol seluruh skala tipografi situs web Anda secara konsisten.
Anda dapat membuat versi khusus Bootstrap melalui situs resmi Bootstrap atau menggunakan situs pihak ketiga yang mungkin menawarkan antarmuka yang lebih mudah atau tema yang telah dirancang sebelumnya. Situs penyesuai Bootstrap resmi memiliki informasi lebih lanjut tentang kustomisasi Bootstrap.
Saat Anda mengunduh versi Bootstrap yang disesuaikan, itu berisi struktur direktori berikut:
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
Bergantung pada aplikasi penyesuai yang Anda gunakan, struktur direktori mungkin hanya berisi bootstrap.min.css. Ini adalah file yang berisi penyesuaian Anda. File lainnya sama untuk semua versi kustom Bootstrap dan sudah disertakan di situs web Anda.