Daftar Isi:
- Kode Bootstrap untuk Membuat Tombol
- Kode Bootstrap untuk Membuat Bilah Alat Navigasi
- dan Glyph Icons menyediakan mesin terbang yang digunakan di Bootstrap.
Video: Cara membuat link data dari excel otomatis ke word 2024
Contoh berikut menunjukkan bagaimana membuat komponen web secara cepat.
Tombol adalah elemen dasar pada banyak halaman web, namun biasanya bisa sulit diatur dan bergaya. Seperti yang ditunjukkan di sini, tombol bisa memiliki berbagai jenis dan ukuran.
Kode Bootstrap untuk Membuat Tombol
Atribut
Deskripsi | Tipe tombol | btn-defaultbtn-primarybtn-successbtn-danger |
Tipe tombol standar dengan efek hover |
|
Tombol biru dengan efek hover
Tombol hijau dengan efek hover
Tombol merah dengan efek hover Tombol ukuran btn-lgbtn-defaultbtn-sm |
Tombol besar ukuran tombol |
Ukuran tombol default
|
Tombol kecil ukuran
Untuk membuat sebuah tombol, tuliskan HTML berikut ini: Mulailah dengan elemen |
tombol
- elemen HTML.
Pada tanda
tombol -
sudah termasuk
type = "button".
Sertakan atribut kelas dengan nilai atribut kelas - btn
, dan tambahkan awalan kelas tambahan berdasarkan efek yang Anda inginkan.
Untuk menambahkan gaya tambahan, terus tambahkan nama awalan - class
ke atribut kelas
.
Tombol default besar
Tombol Kesuksesan Default
Tombol default default
Tombol bahaya kecil
Tombol default kecil
Tipe dan ukuran tombol bootstrap.
Periksa jenis tombol, ukuran tombol, dan tombol pilihan lainnya.
halaman web dengan beberapa halaman atau tampilan biasanya memiliki satu atau lebih toolbar untuk membantu pengguna dengan navigasi. Berikut adalah beberapa pilihan toolbar.
Kode Bootstrap untuk Membuat Bilah Alat Navigasi
Atribut
Deskripsi | Jenis Toolbar | nav-tab |
nav-pil |
Tabbed navigation toolbar
|
Tipe tombol Toolbar
dropdown |
menu dropdown caret |
menu drop-down Tombol atau tab sebagai
|
Drop-down item menu
Untuk membuat toolbar navigasi pil atau tombol padat, tuliskan HTML berikut ini: Mulailah daftar tanpa registrasi menggunakan elemen |
ul
- .
Di tag pembuka
, sertakan - class = "nav-pil"
Buat tombol dengan menggunakan tag
. Sertakan - class = "active"
untuk menentukan tab mana pada toolbar utama yang akan muncul secara visual disorot saat mouse melayang di atas tombol.
Untuk membuat menu drop-down, sajikan daftar unordered. Lihat kode di samping "Lainnya" dengan awalan kelas - ,
"caret"
, dan"menu tarik-turun"
.Anda dapat menautkan ke halaman web lain di menu drop-down Anda dengan menggunakan tag
.Kode berikut membuat bilah alat menggunakan Bootstrap:
Tentang
Olahraga
dan nilai bekerja sama untuk menambahkan menu drop-down ke elemen seperti tautan. Lihat opsi toolbar tambahan.
Menambahkan ikon
Ikon sering digunakan dengan tombol untuk membantu menyampaikan beberapa jenis tindakan. Misalnya, program email Anda kemungkinan menggunakan tombol dengan ikon tempat sampah untuk menghapus email. Ikon dengan cepat mengkomunikasikan tindakan yang disarankan kepada pengguna tanpa banyak penjelasan.
Ikon-ikon ini disebut
mesin terbang,
dan Glyph Icons menyediakan mesin terbang yang digunakan di Bootstrap.
Bootstrap mendukung lebih dari 200 mesin terbang, yang dapat Anda tambahkan ke tombol atau bilah alat menggunakan tag
. Contoh kode berikut ini membuat tiga tombol dengan satu bintang, penjepit kertas, dan alat pemotong sampah. Bintang Lampirkan
Sampah
Tombol bootstrap dengan ikon.
Periksa di sini untuk nama-nama semua mesin terbang Bootstrap.