Tutorial CSS Bootstrap 4 (Part2)

Pada artikel yang lalu, kita telah membahas tentang CSS Bootstrap 4(part1). Dalam artikel ini kita akan melanjutkan pembahasan kemarin tentang CSS dan pilihan JavaScript yang penting untuk setiap website berbasis Bootstrap.

Kita akan membahas topik-topik berikut :

  • Navbar
  • Nav
  • Form
  • Media Object
  • Progress bar
  • Carousel
  • Tooltip dan Popover
  • Modal

Navbar

Navbar adalah salah satu fitur yang menonjol dari setiap website berbasis Bootstrap. Kode inti termasuk styling untuk logo situs dan link navigasi dasar.

Untuk membuat navbar, ikuti langkah berikut:

  1. Buat tag <nav> dengan class .navbar bersama dengan class .navbar-dark bg-inverse (ini akan menjadi skema warna navbar).
  2. Dibagian dalam tag <nav> lekakan tag anchor dengan class .navbar-brand. Yang akan menjadi logo dari navabar.
  3. Tambahkan list unordered dengan class .nav bersama dengan class .navbar-nav.
  4. Untuk setiap list item tambahkan class .nav-item dan class .nav-link untuk setiap linknya.

Anda dapat mengecek contoh kode dan hasilnya dibawah ini :

<nav class="navbar navbar-dark bg-inverse">
   <!-- Brand -->
   <a class="navbar-brand" href="#">Logo</a>
 
   <!-- Links -->
   <ul class="nav navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Contact</a>
      </li>
   </ul>
</nav>

Menempatkan kode tersebut secara bersamaan akan mendapatkan hasil seperti gambar berikut :

1

Catatan : Anda dapat menggunakan class .active untuk menentukan link sebagai halaman yang saat ini sedang aktiv dan menambahkan <span> dengan class .sr-only untuk screen reader.

Skema Warna Navbar

Jika Anda ingin menambahkan warna background yang berbeda untuk navbar Anda, Anda dapat menggunakan kombinasi dari link warna class modifier dan warna background yang sederhana utilitas (seperti bg-primary, bg-warning).

Berikut adalah beberapa contohnya :

<nav class="navbar navbar-light bg-faded">
  <!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e74c3c;">
  <!-- Navbar content -->
</nav>

Menggunakan class dan style berikut dengan kode kita sebelumnya, Anda akan mendapatkan hasil sebagai berikut :

2

Navbar Alignment

Jika Anda ingin menyelaraskan elemen navbar, Anda dapat menggunakan class .pull-left atau .pull-right untuk melakukannya.

Lihat kode dibawah ini :

<nav class="navbar navbar-light bg-danger">
   <!-- Brand -->
   <a class="navbar-brand" href="#">Logo</a>
 
   <!-- Links -->
   <ul class="nav navbar-nav pull-right">
      <li class="nav-item">
         <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item active">
         <a class="nav-link" href="#">Profile <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Contact</a>
      </li>
   </ul>
</nav>

Kode diatas akan menampilkan gambar dibawah ini :

3

Navbar Dropdown

Dropdown menu merupakan komponen penting dari setiap bar navigasi. Anda dapat menambahkan dropdown untuk salah satu elemen li dari list navbar-nav dengan menambahkan class .dropdown. Anda juga perlu menambahkan data atribut data-toggle=”dropdown” bersama dengan aria-haspopup=”true” untuk menunjukan apakah elemen ini dapat menampilkan jendela pop-up serta aria-expanded=”false” untuk menunjukan keadaan elemen dapat dillipat. Untuk setiap item dari link dropdown Anda harus menambahkan class .dropdown-item untuk menambahkan style diatasnya.

Lihat contoh kode di bawah ini :

<nav class="navbar navbar-light bg-danger">
 
   <!-- Brand -->
   <a class="navbar-brand" href="#">Logo</a>
 
   <!-- Links -->
   <ul class="nav navbar-nav pull-right">
      <li class="nav-item">
         <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Profile
</a>
         <div class="dropdown-menu" aria-labelledby="Preview">
            <a class="dropdown-item" href="#">Dropdown Link 1</a>
            <a class="dropdown-item" href="#">Dropdown Link 2</a>
            <a class="dropdown-item" href="#">Dropdown Link 3</a>
         </div>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Contact</a>
      </li>
   </ul>
</nav>

Periksa output gambar di bawah ini :

4

Fixed Navbar

Anda juga dapat memposisikan navbar Anda dalam posisi fix baik keatas atau bawah layar pada scroll mouse dengan menggunakan .navbar-fixed-top atau .navbar-fixed-bottom. Periksa struktur kode dibawah ini :

<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
<!-- Content Here! -->
</nav>
 
<nav class="navbar navbar-fixed-bottom navbar-dark bg-danger">
<!-- Content Here! -->
</nav>

Responsive Navbar

Untuk menambahkan navbar responsif, Anda dapat menggunakan class .navbar-toggler pada tombol bersama dengan atribut data-toggle=”collapse” dan data-target dengan id dari navbar. Kemudian Anda dapat menambahkan salah satu class .navbar-toggleable-*. Navbar ini akan collapse pada lebar viewport yang diberikan tergantung pada ukuran layar yang Anda set pada class .navbar-toggleable-*. Anda dapat menggunakan salah satu class berikut :

  • navbar-toggleable-xs
  • navbar-toggleable-sm
  • navbar-toggleable-md
  • navbar-toggleable-lg
  • navbar-toggleable-xl

Mari kita lihat ini dalam aksinya :

<nav class="navbar navbar-light bg-primary">
<!-- Toggle Button -->
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#nav-content">
☰
</button>
 
<!-- Nav Content -->
<div class="collapse navbar-toggleable-lg" id="nav-content">
   <a class="navbar-brand" href="#">Logo</a>
   <ul class="nav navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Contact</a>
      </li>
   </ul>
</div>
</nav>

Lihat hasil gambar di bawah ini :

5

Nav

Bootstrap 4 menyediakan berbagai pilihan untuk elemen styling navigasi. Semuanya berbagi markup sama dan class dasar .nav baik dalam tag <ul> atau <nav>. Anda juga perlu menambahkan class .nav-item untuk setiap list item dan class .nav-link untuk setiap tag anchor.

Bootstrap juga menyediakan class helper, .active untuk menentukan halaman aktif. Mari kita mencobanya di kedua tag <ul> dan <nav>.

<!-- Using <ul> --> 
<ul class="nav">
   <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Profile</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Portfolio</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
   </li>
</ul>
<br/>
<!-- Using <nav> -->
<nav class="nav">
   <a class="nav-link active" href="#">Home</a>
   <a class="nav-link" href="#">Profile</a>   
   <a class="nav-link" href="#">Portfolio</a>
   <a class="nav-link" href="#">Contact</a>
</nav>

Menempatkan kode tersebut secara bersaman akan menampilkan seperti gambar berikut ini :

6

Tabular Navigation

Untuk membuat menu tab navigasi, Anda harus mulai dari list unordered dasar dengan class .nav besama dengan class .nav-tabs. Anda juga perlu menambahkan class .nav-item untuk setiap list item dan class .nav-link untuk setiap link. Selain itu, Anda juga dapat menambahkan class .active untuk menentukan halaman aktif.

<ul class="nav nav-tabs">
   <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Profile</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Portfolio</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
   </li>
</ul>

Lihat hasilnya pada gambar di bawah ini :

7

Basic Pill Navigation

Untuk membuat pill navigasi menggunakan .nav-pills sebagai ganti dari .nav-tabs.

<ul class="nav nav-pills">
   <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Profile</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Portfolio</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
   </li>
</ul>

Lihat hasilnya pada gambar di bawah ini :

8

Vertical Pill

Untuk membuat pill vertikal Anda hanya perlu menambahkan .nav-stacked pada class .nav-pills.

<ul class="nav nav-pills nav-stacked">
   <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Profile</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Portfolio</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
   </li>
</ul>

Dengan kode di atas Anda akan mendapatkan hasil seperti gambar di bawah ini :

9

Dropdown

Menu navigasi juga dapat memiliki sintaks mirip dengan menu dropdown. Hanya menambahkan class .dropdown pada elemen <li> diikuti oleh class dan data-atribut. Lihatlah kode dibawah ini :

<ul class="nav nav-tabs">
   <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Profile</a>
   </li>
   <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Portfolio
      </a>
      <div class="dropdown-menu" aria-labelledby="Preview">
         <a class="dropdown-item" href="#">Website</a>
         <a class="dropdown-item" href="#">Photography</a>
         <a class="dropdown-item" href="#">Video</a>
      </div>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
   </li>
</ul>

Lihat hasilnya pada gambar di bawah ini :

10

Form

Salah satu fitur yang tidak kalah hebat dari Bootstrap 4 adalah kemampuan untuk membuat form dengan mudah. Bootstrap membuatnya mudah hanya dengan menggunakan markup HTML sederhana dan class extended untuk style yang berbeda dari form.

Untuk menambahkan form Bootstrap, cukup tambahkan class .form-control pada salah satu komponen form seperti tag <input>, <textarea> dan <select>.

Anda juga perlu untuk membungkus setiap komponen form untuk tag <fieldset> bersama dengan class .form-group.

Berikut adalah contoh kodenya :

<form>
   <fieldset class="form-group">
      <label for="first_name">Full Name</label>
      <input type="text" class="form-control" id="full_name" name="full_name">
   </fieldset>
   <fieldset class="form-group">
      <label for="last_name">Email</label>
      <input type="email" class="form-control" id="email" name="email">
   </fieldset>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form dasar output :

11

Pilihan Form Style

Anda juga dapat menambahkan warna untuk setiap fieldset. Ada tiga class yang dapat Anda gunakan :

  • has-success
  • has-warning
  • has-error

Class-class ini dapat digunakan pada tag <fieldset> dan <div>. Selain itu Anda juga dapat menambahkan icon dengan menggunakan class form-control-*. Lihat daftarnya disini.

Mari kita lihat dalam aksinya :

<fieldset class="form-group has-success">
   <label class="control-label" for="username">Success</label>
   <input type="text" class="form-control form-control-success">
</fieldset>
   
<fieldset class="form-group has-error">
   <label class="control-label" for="phone">Error</label>
   <input type="text" class="form-control form-control-error">
</fieldset>
   
<fieldset class="form-group has-warning">
   <label class="control-label" for="password">Warning</label>
   <input type="email" class="form-control form-control-warning">
</fieldset>

12

Horizontal Form

Bootstrap datang dengan ketetapan format form horizontal. Yang satu ini berdiri terpisah dari form yang lain tidak hanya pada markup, tetapi juga dalam tampilan form.

Untuk menggunakan form horizontal Bootstrap, gunakan class .form-horizontal pada tag <form>. Anda juga perlu menambahkan class .form-control-label pada tag <label> untuk menampilkan center vertikal.

Catatan : Jangan lupa untuk menentukan berapa banyak kolom setiap komponen form harus menjangkau melalui .col-*-*.

Lihat contoh dibawah ini :

<form action="" class="form-horizontal">
   <div class="container">
      <div class="form-group row">
         <label for="full name" class="col-xs-3 form-control-label">Full Name</label>
         <div class="col-xs-9">
            <input type="text" class="form-control" id="full_name" name="full_name">
         </div>
      </div>
      <div class="form-group row">
         <label for="email" class="col-xs-3 form-control-label">Email</label>
         <div class="col-xs-9">
            <input type="email" class="form-control" id="email" name="email">
         </div>
      </div>
      <div class="form-group row">
         <div class="col-xs-offset-3 col-xs-9">
            <button type="submit" class="btn btn-primary">Submit</button>
         </div>
      </div>
   </div>
</form>

Kode di atas akan memiliki hasil seperti ini:

13

Inline Form

Untuk membuat form dimana semua elemen ini adalah inline dan label left-aligned, cukup tambahkan class .form-inline pada tag <form> dan menggunakan class .form-group dalam tag <div> atau <fieldset> untuk mengatur setiap set field. Lihat contoh kode berikut :

<form action="" class="form-inline">
   <div class="form-group">
      <label for="full_name">Full Name</label>
      <input type="text" class="form-control" id="full_name" name="full_name">
   </div>
   
   <div class="form-group">
      <label for="email">Email</label>
      <input type="email" class="form-control" id="email" name="email">
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

Kode di atas akan memiliki hasil seperti ini :

14

Media Object

Situs sosial media seperti Facebook dan Twitter menggunakan media object. Tujuan dari media object adalah untuk membuat kode dalam mengembangkan blok informasi lebih pendek.

Bootstrap Media Object menyelaraskan teks dan media object yang berdekatan satu sama lain. Hal ini memberikan pengguna pilihan untuk float cepat baik ke kanan atau ke kiri.

Anda dapat membuat Media Object dalam tiga langkah :

  • Buat <div> dengan class .media.
  • Masukan class .media-object untuk setiap elemen yang ingin Anda float seperti <img> dan <video>. Untuk menyelaraskan elemen media Anda dapat menambahkan salah satu class berikut dengan elemen induk untuk mengontrol posisi media object (.media-middle, .media-bottom, .media-left, .media-right). Secara default media object ditetapkan untuk posisi top-align.
  • Buat <div> yang lain dalam class .media dan kemudian masukan class .media-body. Selain itu, Anda perlu menambahkan .media-heading dengan tag heading dalam <div> .media-body.

Mari kita coba contoh :

<div class="media">
   <a class="media-left" href="#">
      <img class="media-object" src="http://goo.gl/sLxT6P" width="100" alt="">
   </a>
   <div class="media-body">
      <h4 class="media-heading">Media Heading</h4>
      <p> Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web. </p>
   </div>
     
   <div class="media">
      <a class="media-left" href="#">
         <img class="media-object" src="http://goo.gl/sLxT6P" width="100" alt="">
      </a>
   <div class="media-body">
      <h4 class="media-heading">Media Heading</h4>
      <p>Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
   </div>
</div>

Dengan kode di atas, Anda akan mendapatkan hasil yang sama persis seperti gambar di bawah :

15

Nested Media Object

Anda juga bisa nest media object hanya dengan menambahkan struktur media object lain di dalam <div> dengan class .media-body. Lihat kode dibawah ini :

<div class="media">
   <a class="media-left" href="#">
      <img class="media-object" src="http://goo.gl/sLxT6P" width="100" alt="">
   </a>
   <div class="media-body">
      <h4 class="media-heading">Media Object</h4>
      <p>Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
      <!-- Nested Media Object -->
      <div class="media">
         <a class="media-left" href="#">
            <img class="media-object" src="http://goo.gl/sLxT6P"  width="80" alt="">
         </a>
         <div class="media-body">
            <h4 class="media-heading">Nested Media Object</h4>
            <p>Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
         </div>
      </div>
   <!-- Nested Media Object -->
   </div>
</div>

Meletakan semua secara bersamaan, Anda akan mendapatkan hasil seperti gambar dibawah :

16

Progress Bar

Progress bar menampilkan asset yang sedang loading, proses sedang berlangsung atau penanda bahwa ada aksi yang terjadi didalam sebuah halaman. Progress bar bootstrap secara default memiliki background abu-abu terang dan progress bar biru.

Untuk membuat progress bar, menggunakan tag HTML5 <progress> dengan class .progress. Didalamnya, masukan value atribut dari 0 sampai 100 untuk menunjukan dimana progress bar. Lihat kode dibawah ini :

<progress class=”progress” value=”75″ max=”100″>75%</progress>

Lihat gambar di bawah :

17

Variasi Warna

Bootstrap 4 Progress bar dapat menggunakan berbagai class warna yang identik dengan tombol dan class alert untuk style yang konsisten dengan menggunakan class .progress-*. Lihat contoh dibawah ini :

class="progress progress-success" value="10" max="100">10%</progress>
<progress class="progress progress-info" value="30" max="100">30%</progress>
<progress class="progress progress-warning" value="65" max="100">65%</progress>
<progress class="progress progress-danger" value="100" max="100">100%</progress>

18

Striped dan Animated Progress Bar

Untuk membuat progress bar bergaris hanya menambahkan class .progress-striped pada tag <progress>. Anda juga dapat membuat animasi menggunakan class .progress-animated dengan tag yang sama. Lihat contoh kode dibawah ini :

<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>
<progress class="progress progress-striped progress-animated progress-danger" value="75" max="100">75%</progress>

Kode di atas akan menampilkan seperti gambar di bawah ini :

19

Plugin Bootstrap JavaScript

JavaScript menambahkan interaktivitas ke setiap website di web. Tooltip, image slideshow, drop-down menu dan popover hanya beberapa contoh fitur situs populer yang bisa dibuat dengan menggabungkan JavaScript dengan CSS.

Pada bagian ini, kita akan belajar bagaimana menggunakan plugin JavaScript melalui Bootstrap 4 untuk membuat fitur situs canggih.

Ada dua cara untuk memasukan plugin JavaScript Bootstrap ini. Yang pertama adalah dengan mendownload bootstrap.js atau bootstrap.min.js disini. Yang kedua adalah dengan menggunakan CDN dan link ke file HTML Anda. Mari kita lihat aksinya. Harap perhatikan bahwa Anda harus menambahkan link jQuery bersama dengan file bootstrap.js.

Menggunakan Source File Bootstrap

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

Menggunakan Link CDN Bootstrap

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

Carousel

Bootstrap 4 carousel adalah cara responsif dan fleksibel untuk menambahkan slide ke website Anda. Selain menjadi responsif, memungkinkan Anda untuk menambahkan gambar, video atau hanya tentang jenis konten.

Untuk membuat carousel, ikuti langkah berikut :

  • Buat wrapper <div> dan tambahkan .carousel dan .slide dengan ID sendiri. Anda juga perlu atribut data-ride=”carousel” untuk membuat animasi carousel mulai ketika load halaman.
  • Buat ordered list untuk indikator kontrol kita (lingkaran kecil dibagian tengah bawah) dan tambahkan class carousel-indicators pada <ol> kemudian kita juga perlu menambahkan data-taget=”#id” bersama dengan data-slide-to=”#” untuk menentukan slide untuk berjalan ketika mengklik sebuah titik tertentu. Jangan lupa untuk menambahkan class .active pada elemen pertama; ini akan menjadi item start dari carousel.
  • Sekarang buat <div> container untuk content scrollable (dimana Anda akan menempatkan content Anda), tambahkan .carousel-inner didalamnya dan memberikan setiap item yang .carousel-item. Anda juga dapat menambahkan <div> baru dalam elemen yang tepat setelah menambahkan gambar dan memberikan class .carousel-captain.
  • Untuk button Previous dan Next, kita akan menggunakan class anchor dengan class .left dan carousel-control untuk tombol “Previous”, dan class .right dan carousel-control untuk tombol “Next”.

Kode berikut membuat carousel Bootstrap :

<div id="carousel -generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-generic" data-slide-to="1"></li>
    <li data-target="#carousel-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="http://goo.gl/RKA5bV" alt="First slide">
      <div class="carousel-caption">
      <h3>This is a caption!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
    </div>
    <div class="carousel-item">
      <img src="http://goo.gl/cLZ8gN" alt="Second slide">
       <div class="carousel-caption">
      <h3>This is a caption!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
    </div>
    <div class="carousel-item">
      <img src="http://goo.gl/ZbqeTw" alt="Third slide">
      <div class="carousel-caption">
      <h3>This is a caption!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
    </div>
  </div>
  <a class="left carousel-control" href="#carousel- generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel- generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Anda dapat secara manual memanggil carousel dengan JavaScript, menggunakan kode berikut :

$('.carousel').carousel()

Method

Metode berikut ini untuk kode carousel :

Option

Menginisialisasi carousel dengan pilihan opsional obyek dan mulai bergerak melalui item :

$('.carousel').carousel({

interval: 2000

})

Cycle

Siklus melalui item carousel dari kiri ke kanan :

.carousel('cycle')

Pause

Carousel  berhenti dari pergerakannya melalui item :

.carousel('pause')

Number

Siklus carousel dengan frame tertentu (0 berbasis, mirip dengan array):

.carousel('number')

Prev

Siklus ke item sebelumnya :

.carousel('prev')

Next

Siklus ke item berikutnya :

.carousel('next')

Tooltip dan Popover

Tooltips digunakan untuk menggambarkan link atau memberikan informasi tertentu tentang sebuah kata atau singkatan. Plugin ini awalnya didasarkan pada plugin jQuery.tipsy yang ditulis oleh Jason Frame. Namun, dalam Bootstrap 4, pindah ke Tether, plugin kelompok ketiga. Jika Anda ingin menggunakan ini Anda hanya dapat mencakup tether.min.js sebelum bootstrap.js.

Untuk menambahkan tooltip, tambahkan data-toggle=”tooltip” dan title=”Some tooltip text!” ke tag anchor atau button. Title anchor akan menjadi teks tooltip.

Anda juga perlu menambahkan kode JavaScript berikut didalam <script> untuk trigger tether.js :

 

$(function () {

$('[data-toggle="tooltip"]').tooltip()

})

Contoh berikut menunjukan bagaimana melakukan di Bootstrap dan tether.js :

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
 
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Text Link Default</a>
<a href="#" data-toggle="tooltip" title="Some tooltip text!" data-placement="top">Text Link Top</a>

23

Untuk pop-over, Anda hanya dapat menambahkan data-attributes untuk button Anda :

  • data-container=”body”
  • data-toggle=”popover”
  • data-placement=”top” – juga top, bottom, left atau right
  • data-content=”Your content here”

Lihat contoh kode berikut :

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

24

Modal

Modal adalah jendela pop-out yang berlapis atas induknya. Tujuannya adalah untuk menampilkan content dari source terpisah yang dapat memiliki beberapa interaksi atau action tanpa meninggalkan jendela induknya.

Untuk membuat jendela modal statis, periksa kode ini :

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Click here to see demo!
</button>
 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
  <!-- Your Content here! -->    
<p>This is where your content goes! </p>
 </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Ada dua atribut data yang dapat memanggil modal melalui link atau tombol :

  • data-toggle=”modal” – membuka jendela modal langsung
  • data-target=”#myModal” akses ke id dari modal

Di dalam bagian modal, kita memiliki <div> yang memiliki ID yang sama dengan nilai atribut data-target yang digunakan untuk memanggil modal, dalam contoh menggunakan class .myModal.

Berikut ini adalah beberapa kelas / atribut yang digunakan :

  • class modal menentukan isi <div>
  • role=”dialog” atribut untuk aksesibilitas orang-orang untuk menggunakan screen reader
  • class .modal-dialog membuat lebar dan margin dari modal
  • class .modal-header untuk style modal header
  • class .close style tombol close
  • class .modal-body menangani style untuk body modal
  • class .modal-footer menangani style untuk footer dari modal tersebut; area ini selaras secara default

Setelah semua kode disave, Anda akan mendapatkan hasil seperti gambar dibawah :

25

Harap diperhatikan bahwa Anda juga dapat mengontrol ukuran modal dengan menambahkan class .modal-sm untuk modal kecil atau class .modal-lg untuk modal besar dalam <div> yang memiliki class .modal-dialog.

Menggunakan JavaScript

Anda juga dapat menggunakan Bootstrap modal window melalui JavaScript dengan memanggil metode Bootstrap modal() dengan modal “id” atau selector “class”. Lihat kode dibawah ini :

<script type="text/javascript">
$(document).ready(function(){
    $(".btn").click(function(){
        $("#myModal").modal('show');
    });
});
</script>

Anda selalu dapat merujuk ke dokumentasi disini jika Anda ingin lebih banyak pilihan untuk modal.

Penutup

Seperti kerangka CSS lainnya, kekuatan Bootstrap datang bukan hanya dari creator saja tetapi juga dari plugin eksternal lain yang mendukungnya.

Pada artikel ini, Anda telah belajar tentang fitur tambahan Bootstrap 4 termasuk juga JavaScript. Anda juga dapat menyesuaikan style default CSS dari setiap komponen. Namun, dianjurkan bahwa Anda menambahkan custom CSS tambahan atau berkas JavaScript jika Anda ingin membuat perubahan bukan mengedit file inti.

Harap diperhatikan bahwa saat penulisan ini, Bootstrap 4 CSS adalah dalam proses rilis alpha; Oleh karena itu, sangat disarankan untuk tidak menggunakannya dalam produksi. Kami harap Anda belajar dari tutorial ini dan jangan lupa untuk menambahkan komentarnya serta jangan lupa pula untuk sharing.

Comments

comments