BAB 5 – BUTTON BOOTSTRAP

Tujuan Pembelajaran

Peserta mampu:

  1. Membuat tombol Bootstrap.
  2. Memahami jenis tombol.
  3. Mengatur ukuran tombol.

A. Button Dasar

<button class="btn btn-primary">
Simpan
</button>

B. Jenis Tombol

<button class="btn btn-primary">
Primary
</button>

<button class="btn btn-success">
Success
</button>

<button class="btn btn-danger">
Danger
</button>

Praktik 1

Buat halaman:

Tambah Data
Edit Data
Hapus Data

Dengan warna berbeda.


C. Ukuran Tombol

Besar

<button class="btn btn-primary btn-lg">
Login
</button>

Kecil

<button class="btn btn-primary btn-sm">
Login
</button>

D. Tombol Outline

<button class="btn btn-outline-primary">
Login
</button>

Praktik 2

Buat:

  • Tombol Login
  • Tombol Registrasi
  • Tombol Logout

Menggunakan outline button.


Latihan Bab

  1. Apa fungsi btn?
  2. Apa fungsi btn-primary?
  3. Apa fungsi btn-outline-success?
  4. Apa fungsi btn-lg?
  5. Apa fungsi btn-sm?

Tugas Praktik Bab

Buat menu aplikasi kasir:

Tambah Barang

Edit Barang

Hapus Barang

Cetak Laporan

Menggunakan tombol Bootstrap.

Similar Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *