Cara menggunakan how to use bootstrap
Pembahasan kali ini adalah tutorial tentang Bootstrap 5 dan cara menggunakan nya dalam membuat website. Perlu di ketahui, sebuah situs memerlukan tampilan yang menarik, enak di setiap browser, mobile friendly dan seo friendly. Oleh karena itu, dalam pembuatan halaman harus menggunakan html, css dan js yang mendukung. Show
Penggunaan css framework adalah sebuah pilihan, hal ini berlaku ketika tidak ingin lagi untuk memikirkan kesulitan yang berulang setiap saat. Bayangkan jika setiap projek web berulang membuat sebuah framework, oleh karena itu lebih baik jika menggunakan sebuah framework yang memberikan kemudahan membuat halaman. Bootstrap adalah CSS FrameworkTwitter Bootstrap Bootstrap adalah sebuah CSS Framework yang di gunakan untuk membuat halaman HTML pada situs internet. Sebuah framework yang sangat populer saat ini dan banyak di gunakan para web designer dan website developer. Pertama kali di buat oleh designer dan developer di Twitter pada pertengahan tahun 2010 oleh @mdo dan @fat. Di publikasikan kepada khalayak umum pada 19 Agustus 2011 sampai dengan sekarang sebagai sebuah Open Source Framework. Pada versi ke-3 telah menerapkan responsive secara standar dan lebih mengedepankan mobile first atau perangkat mobile terlebih dahulu. Setelah itu, dalam versi ke-4 terjadi perubahan dalam penggunaan SASS dan penggunaan Flexbox di CSS. Hal ini di maksudkan untuk mengarahkan komunitas web development menggunakan properti CSS terbaru, mengurangi ketergantungan, dan lebih menerapkan teknologi baru untuk browser modern saat ini. Bootstrap Icons Ekstensi tambahan dari css framework ini adalah Bootstrap Icons sebagai pustaka ikon yang lengkap. Meskipun bukan di set sebagai default, anda dapat menggunakannya sebagai tambahan. Bagi Anda yang sering menggunakan Font Awesome, Feather atau Octicons, tentunya kumpulan ikon ini adalah alternatif bagi Anda yang ingin menggunakan ikon sebagai pelengkap pada tampilan pengguna. Versi TerbaruPada versi yang masih dalam pengembangan saat ini, fokus dalam meningkatkan basis versi 4. Mengedepankan fitur dan komponen, menghilangkan suport untuk browser lama, tidak menggunakan jQuery, dan menerapkan teknologi CSS Custom Properties yang lebih maju. Sampai saat tutorial ini di buat, versi terbaru sudah memasuki tahap ke v5.1.3. Dalam versi terbaru ini, jQuery bukan lagi sebagai depedensi yang masuk dalam kebutuhan wajib. Di versi sebelumnya, jQuery di gunakan sebagai kebutuhan wajib untuk menjalankan fungsi script. Update: Saat ini, Bootstrap sudah memasuki versi ke 5.2.0 Twitter Bootstrap 5 CSS FrameworkPengenalan Dasar Bootstrap untuk PemulaSebelum masuk ke tutorial dan pembuatan website, berikut adalah pengenalan dasar bootstrap yang perlu anda ketahui sebagai pemula. Hal utama yang perlu anda ketahui dengan mempelajari dasar penggunaan dan fasilitas yang di tawarkan dari css framework ini. LayoutDalam membuat tampilan, layout sangat berperan penting sebelum melangkah ke bagian lain. Pada Bootstrap, pengaturan tampilan terbagi dalam beberapa bahasan seperti: Breakpoints, Containers, Grid, Columns, Gutters, Utilities, Z-Index, CSS Grid. ComponentsBeberapa komponen bootstrap telah tersedia dan dapat di gunakan sesuai kebutuhan, seperti : Accordion, Dropdown, Badge, Buttons, Card, Carousel, Navbar, Modal, Table, Form dan masih banyak lagi. CustomizeBootstrap juga menawarkan anda untuk membuat tampilan atau pengaturan custom, sehingga tampilan tidak perlu standar tapi bisa sesuai dengan keinginan. Hal ini bisa anda lakukan dengan merubah variable atau pengaturan lainnya melalui editor menggunakan Sass dan Node. Anda harus belajar atau mengetahui cara menggunakan Sass dan Node terlebih dahulu. Masih banyak yang bisa anda temukan pada framework ini untuk memperkaya tampilan halaman website yang anda inginkan, dan hal ini tergantung dari kebutuhan dan keinginan Anda. Baca juga: Animasi Navigasi Bootstrap Saat Layar Scroll Kebawah Belajar Cara Menggunakan Bootstrap 5 dalam Tutorial Membuat Website SederhanaTutorial belajar bootstrap kali ini adalah cara menggunakan bootstrap yang berguna untuk web designer dan web developer. Akan tetapi tidak menutup kemungkinan juga bagi Anda yang ingin belajar bootstrap 5 dalam membuat halaman website sederhana. 1. Menggunakan Editor HalamanPastikan terlebih dahulu sebelum belajar anda memiliki editor halaman web yang bisa mengubah berkas html, css, dan js. 2. Instalasi Bootstrap 5Menggunakan framework ini mengharuskan instalasi terlebih dahulu dengan download bahan-bahan yang akan di gunakan. Unduh bisa langsung dengan mengunjungi halaman web Bootstrap. Download Bootstrap 5Anda di berikan kemudahan dalam download dengan pilihan sumber yang telah di kompres atau tanpa kompres. Compiled CSS & JSDownload Source CodeBerkas ini memerlukan perangkat untuk membangun halaman menggunakan NPM. Unduh dan instalasi terlebih dahulu Node.js sebelum menggunakan berkas download. Cara membuat halaman HTML menggunakan Bootstrap dan NodeJS akan di terangkan pada bahasan berikutnya. Unduh Bonus Contoh Web BootstrapUntuk melihat contoh web Bootstrap, tentunya framework telah menyediakan juga berkas contoh untuk di download. Ekstrak berkas zip contoh halaman dan gunakan semestinya sebagai acuan pembuatan halaman. Unduh Cara Penggunaan Bootstrap 5 Versi Online menggunakan CDNBerikut adalah cara penggunaan Bootstrap 5 secara Online tanpa menyimpan data pada folder bisa dengan membuat link melalui versi CDN. Tentunya hal ini perlu menyimpan baris link css dan js pada halaman html yang anda miliki. Cascading Style SheetBisa menggunakan CSS versi CDN dengan menyisipkan baris kode. JavascriptUntuk JS versi CDN, bisa di sisipkan baris kode dan tempatkan di bagian bawah halaman html. Penempatan javascript disarankan disimpan sebelum kode penutup |