7 Daftar Komponen Javascript Terbaik Twitter Bootstrap 3

Seotechman.com, Bogor 30/03/2019. Tahukan Anda bahwa Twitter Bootstrap merupakan kerangka kerja CSS terbaik di Internet saat ini. Ini juga dapat memungkinkan para pemula dengan mudah memahaminya, tanpa adanya pengetahuan tentang CSS.

Twitter Bootstrap memiliki satu set komponen JavaScript terbaik yang kuat. Komponen-komponen ini mudah digunakan dan berguna dalam proyek web Anda.

Nah, dalam tutorial ini saya akan membahas beberapa komponen JavaScript Bootstrap Twitter terbaik dan cara menggunakannya.

Hal pertama yang harus kita pahami adalah bahwa komponen JavaScript Bootstrap ditulis dalam jQuery. Jadi, disini kita perlu jQuery untuk bisa menjalankannya.

Setelah itu, Anda perlu mengunduh Bootstrap 3 dan menyalin isi folder dist dan menempelnya di dalam folder baru.

Anda pasti berpikir mengapa kita perlu mengaktifkan JavaScript untuk melihatnya? Ada banyak komponen Bootstrap JavaScript yang bergantung pada CSS agar berfungsi dengan baik.

Twitter Bootstrap 3 juga memungkinkan kita untuk menggunakan setiap modul alih-alih mengunduh semua komponen JavaScript. Kita akan melihat akhir tutorial ini bagaimana menggunakan modul tunggal dan bukan semua komponen.

Berikut ini beberapa komponen JavaScript Bootstrap Twitter yang paling utama:

7 Daftar Komponen Javascript Bootstrap Terbaik

• Modal
• dropdown
• ScrollSpy
• tab
• tooltip
• popover
• Alert

#1. Modal

Modal adalah prompt dialog seperti alih-alih sebuah peringatan. Pada modal terdapat fitur-fitur canggih seperti modal title, modal body, modal footer, close button dan close symbol di sudut kanan atas.

Ini dapat digunakan sebagai jendela konfirmasi di banyak aplikasi seperti sebelum melakukan pembayaran, atau menghapus akun, dll.

Contoh:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal </button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"> Modal title </h4></div>
<div class="modal-body">
<h1>Hello World! </h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> Close </button><button type="button" class="btn btn-primary"> Save changes </button></div>
</div></div>

Bootstrap Modal memiliki tiga bagian yaitu: header, body dan footer.

#2. DropDown

Membuat Bootstrap 3 menjadi sangat mudah. Anda hanya perlu memahami markup yang dibutuhkan.

Anda dapat menggunakan DropDown ini di bilah navigasi atau di dalam div mana pun yang Anda inginkan.

Contoh:

<div class="dropdown">
<a data-toggle="dropdown" href="#"> Show Links <b class="caret"> </b> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"> First Link </a></li>
<li> <a href="#"> Second Link </a></li>
<li role="presentation" class="divider"></li>
<li><a href="#"> Third Link </a></li></ul></div>

Pertama, Anda harus memberi class "dropdown" untuk setiap elemen induk yang ingin Anda perlakukan sebagai elemen drop down.

Dalam kasus saya, saya menggunakan elemen div. Ini juga dapat dijadikan elemen sebagai "dropdown". Maka dari itu Anda harus menempatkan tag "<a>" langsung di dalam elemen dropdown tersebut. 

Selanjutnya, tambahkan atribut baru seperti "data-toggle" lalu masukan ke dalam tag tautan dan beri nilai sebagai "dropdown". Terakhir, tambahkan daftar di bawah tag tautan. Anda harus menambahkan menu dropdown ke tag ul.

Untuk menambahkan pemisah antara elemen, tambahkan elemen baru dengan class sebagai "pembagi (divider)" ke dalam daftar.

jika Anda tidak nyaman dengan atribut data, cara lainya adalah Anda bisa menambahkan dropdown menggunakan jQuery.

Sebagai contoh:

Dropdown $ ('# MyDropDown') ()

#3. ScrollSpy

ScrollSpy adalah modul JavaScript yang menarik yang ditambahkan melalui daftar Bootstrap ini.

Lalu apa peran pentingnya? Peran pentingnya adalah untuk memperbarui item yang aktif di bilah navigasi saat Anda menggulir ke bawah area konten.

Untuk dapat menggunakan fitur ScrollSpy Anda harus menambahkan atribut data-spy = "scroll" dan data-target = "# top-navigation" ke elemen body. Navigasi atas adalah id dari bilah navigasi sebuah situs. Pastikan tautan di bilah navigasi adalah tautan internal.

#4. Tab

Tab Twitter Bootstrap 3 mengambil inspirasi dari tab jQuery lama, yang dimana Keduanya memiliki fungsi yang sama. Untuk menggunakan Bootstrap Tab Anda perlu menentukan dua bagian terpisah: navigasi tab dan area tab.

Markupnya seperti di bawah ini:

<! - Nav tabs ->
<ul class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab"> Home </a></li>
<li><a href="#profile" data-toggle="tab"> Profile </a></li>
<li><a href="#messages" data-toggle="tab"> Messages </a></li>
<li><a href="#settings" data-toggle="tab"> Settings </a></li></ul>
<div class="tab-content">
<div class="active tab-pane" id="home"> ... </div>
<div class="tab-pane" id="profile"> ... </div>
<div class="tab-pane" id="messages"> ... </div>
<div class="tab-pane "id="settings"> ... </div></div>

Sebuah menu navigasi yang dibuat menggunakan class "nav-tab", pada saat tambahan digunakan dan disetiap tautan harus mendefinisikan atribut "data-toggle" sebagai "tab".

Twitter ini memicu Tab JavaScript Bootstrap dan area tab masing-masing akan ditampilkan.

Pada area tab, terdiri dari satu set elemen div. Par induk harus memiliki class sebagai "tab-conten" dan anak harus memiliki class "tab-pane". Setiap tab-pane harus memiliki id yang sesuai dengan tautan internal yang ditentukan dalam tab navigasi.

#5. Tooltip

ToolTip adalah sebuah JavaScript yang sangat berguna dan juga kompatibel dalam lintas-browser!

Untuk menggunakan ToolTip, markupnya seperti ini:

<button id="myButton" type="button" class="btn btn-default " data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left"> Tooltip on left </button>

Markup di atas menampilkan tombol dengan fitur tooltip. Dengan atribut "data-toggle" yang digunakan oleh Bootstrap untuk mengidentifikasi elemen mana yang harus ditampilkan pada tooltip.

Atribut "data-original" digunakan untuk menentukan apa yang ada di dalam tooltip. Atribut "data-placement" digunakan untuk membantu bootstrap agar dapat tempat untuk menampilkan tooltip tersebut.

Untuk alasan kinerja, Bootstrap tidak akan menginisialisasi komponen ToolTip dan Popover secara default. Anda sendirilah yang harus menginisialisasi dengan menggunakan jQuery berikut:

Tooltip $ ('# MyButton') ()

#6. Popovers

Jika Anda pernah menjadi pembaca iBook hardcore, maka Anda akan mengerti apa itu popover.

Mereka adalah versi yang diperluas dari ToolTip dengan beberapa lebih banyak fungsi. Anda dapat menampilkan lebih banyak tag, tautan, divs tambahan, di dalam Popovers.

<button id="myPopover" type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-html="true" data-content="<a href =\"http: //www.google.com\">Go to google</a>" data-original-title="" title ="">Popover on left</button>

Cuplikan HTML di atas menampilkan tombol dengan fungsionalitas sembul. Ini juga memiliki set data khusus yang harus Anda pahami.

Atribut "data-toggle" mengidentifikasi elemen mana yang harus mengontrol popover.

Atribut "data-content" berisi data yang harus ditampilkan di dalam popover dan Atribut "data-placement".

Gunakan jQuery di bawah ini untuk menginisialisasi popover:

$ ( '# MyButton') popover ()

#7. Alerts

Alerts Twitter Bootstrap tidak seperti jendela sembulan. Mereka adalah satu set divs dengan warna latar yang telah ditentukan dan tombol pemberhentian. Markupnya seperti di bawah ini:

<div class="alert alert-warning fade in"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button><strong> Hello ! </strong>Best check yo self, you're not looking too good.</div>

Lansiran di atas memiliki latar belakang kuning pucat, karena merupakan pesan peringatan. Anda bisa mengubah warnanya menjadi warna danger (Merah).

Setiap div peringatan harus memiliki close button dengan seperangkat atribut data sebagaimana didefinisikan di atas. Atribut "data-dismiss" menyembunyikan div peringatan ketika diklik.

Kesimpulan:

Anda mungkin memiliki pemahaman yang lebih baik tentang cara menggunakan JavaScript dalam kode Anda sendiri. 

Komponen JavaScript ini adalah salah satu alasan utama mengapa kerangka Bootstrap Twitter begitu populer di web saat ini.

Karena ini telah menjadi sebuah kerangka kerja sejak lama, tidak hanya bagi para pengembang dengan nol pengetahuan CSS tetapi juga bagi para desainer untuk meningkatkan dan mengatur waktu, bagaimana dan kapan mereka harus mengganti desain mereka.

Demikian pembahasan hari ini tentang, 7 Daftar Komponen Javascript Terbaik Twitter Bootstrap 3.

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini