Langsung ke konten utama

Tutorial CSS Bootstrap sederhana


Apakah kalian pernah dengar framework pada CSS? ya framework, apa itu framework? framework sendiri adalah kerangka kerja untuk mengembangkan applikasi agar lebih mudah menata rangka design. Framework sangat membantu developer untuk mempersingkat penulisan kode yang akan diketik. Contoh framework pada css adalah Bootstrap.

BootstrapImage

Apa itu Bootstrap. Bootstrap adalah salah satu framework pada css, banyak front end developer menggunakan framework bootstrap karena kemudahan yang diberikan bootstrap. Kalian bisa menggunakan bootstrap pada kode html yang kalian buat. Biasanya Bootstrap ditulis didalam class pada html, oh ya sebelum kalian memberikan atribut class pada HTML kalian wajib menyalin kode CDN ( Content Delivery Network ) atau link package pada Bootstrap. 

Klik link website official Bootstrap disini lalu klik docs di website official Bootstrapnya, lalu cari ke introduction dan salin struktur CDN link HTML nya.

Berikut Contoh Penggunaan Bootstrap pada HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Judul Website<title>  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>

<body class="bg-dark">
    <h1 class="text-center mt-5">Hello, world!</h1>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</html>

Hello, world!


Apakah kalian sudah mengikuti langkah diatas? klo sudah diartikel ini akan saya jelaskan kenapa kita bisa memberi style warna dan posisi pada tag yang kita beri masing-masing classnya. Saya jelaskan dari class Body. 

1 ). pada body = class="bg-dark". Class "bg-dark" adalah class pada bootstrap yang memberikan style "background dark".

2 ). pada h1 = class="text-center". Class text-center sendiri memberikan style mirip seperti css artibut "text-align:center"

3 ). pada h1 class ke-2 = class="mt-5". Sama seperti class text-center, mt memberikan style css seperti artibut "margin-top", masih ada ms (margin-left), me (margin-right), mb (margin-bottom), dan m-auto (margin) untuk seluruh sisi, mt-5 angka 5 disini merupakan jarak margin yang diberikan ada 1-5 untuk jarak ukuran pada margin.


Mudah bukan, masih banyak style warna pada bootstrap yang bisa diterapkan di kode HTML, untuk text kalian dapat menulis properti seperti :

  • text-primary
  • text-dark
  • text-light
  • text-white
  • text-info
  • text-warning
  • text-danger
untuk style warna background :
  • bg-primary
  • bg-dark
  • bg-light
  • bg-white
  • bg-info
  • bg-warning
  • bg-danger
dan masih banyak style bootstrap lainnya kalian bisa baca dokumentasi official bootstrap untuk bereksperimen di website local kalian sendiri. Selamat mengkoding 😉.

Label

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar CSS pada HTML

CSS  atau dikenal sebagai "cascade style sheet" adalah sebuah dasar pemrograman yang digunakan untuk mempercantik tampilan pada sebuat website html. Cara kerja CSS adalah dengan cara menggabungkan konten pada HTML atau XHTML. ada 2 cara menggabungkan CSS dengan HTML atau XHTML. cara yang pertama adalah dengan menuliskan syntax langsung pada File HTML menggunakan Tag <style></style> langsung di bagian Head HTML menggunakan File terpisah seperti style.css Contoh 1 : !DOCTYPE html html head title Your Title title style body { background-color:red; } /style /head body h1 Hello, world! /h1 /body /html Hello, world! Contoh 2: disini saya memakai Visual Studio Code, bagi kalian yang belum mendownload Visual Stu...
Posting Komentar
Baca selengkapnya

Jenis-Jenis Router dan fungsinya

 1. Nirkabel Itu hadir di kantor, rumah atau stasiun kereta api, dll. Ini menciptakan sinyal nirkabel. Misalkan Anda berada di kantor, karena laptop berada dalam jangkauan, kita dapat terhubung ke Internet dengan sinyal nirkabel. Kami dapat memberikan keamanan untuk router dengan memberikan nama pengguna dan kata sandi. Ketika kami mencoba untuk terhubung ke router, ia meminta kata sandi dan nama pengguna. Nama pengguna dan kata sandi disertakan dengan perangkat. Untuk alasan keamanan, tidak ada informasi tentang pengguna yang terpengaruh. Saat kami mengunjungi tempat umum, kami dapat melihat bahwa jendela Wi-Fi mendukung penggunaan Internet di ponsel kami, dan Anda dapat melihat bahwa itu dilindungi kata sandi. Router WiFi tersedia untuk umum. N pengguna dapat terhubung ke sana. 2. Router berkabel Nama itu sendiri mendefinisikan artinya. Kabel untuk terhubung ke jaringan termasuk dalam cakupan pengiriman. Saat kita mengunjungi bank kecil, kampus atau kantor, kita dapat menemukan b...
Posting Komentar
Baca selengkapnya