Cara Membuat Deskripsi dengan Rapi Menggunakan Bootstrap

Di kesempatan kali ini saya ingin berbagi bagaimana cara merancang penjelasan dengan rapi menggunakan bootstrap, disini saya akan menggunakan boostrap 4 ya teman-teman, oke kembali lagi dengan penjelasan, penjelasan memang hal yang simple dulu semenjak sebelum ada bootstrap saya menggunakan table bagi merancang penjelasan dengan rapi, bahkan konten-konten saya membuatnya dengan table, tapi karena sekarang ini table termasuk tag yang telah usang, atau alangkah baiknya tak di gunakan lagi, dan mesti di tinggalkan, apalagi sekarang ini ada boostrap lebih di permudahkan, oke bagaimana caranya benar-benar gampang kok teman-teman simak terus ya.





Bagi belajar cara merancang penjelasan dengan rapi menggunakan bootstrap, disini saya menggunakan boostrap dengan versi terbaru yaitu 4 ya, apakah teman-teman telah dapat menggunakannya, saya harap disini teman-teman telah dapat ya, caranya sama seperti kita menggunakan boostrap versi 3.7, supaya kita seketika masuk contoh pembuatannya. Disini kita akan merancang seperti contoh boostrap ini:



Pada



Seperti gambar di atas ya teman-teman, nanti tulisan saya seketika ambil saja di boostrapnya biar sama, seperti yang teman-teman lihat dari judul dan deskripsinya akan terlihat rapi dengan bantun grid di boostrap, tag dl, dt, dd, kita akan dapat merancang seperti gambar di atas, seperti halnya kita merancang list, seperti dl di ibaratkan seperti ul, yang kalau saya bilang seperti pengurungnnya, dt selaku judul dan dd selaku deskripsinya, oke supaya teman-teman tak tambah bingung perhatikan struktrur berikut ini:



<!DOCTYPE html>
<html lang=en>
  <head>
    <!-- Required meta tags -->
    <meta charset=utf-8>
    <meta name=viewport content=width=device-width, initial-scale=1, shrink-to-fit=no>

    <!-- Bootstrap CSS -->
    <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css integrity=sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M crossorigin=anonymous>
  </head>
  <body>
    <h1>cara merancang penjelasan dengan rapi menggunakan bootstrap</h1>
    <dl class=row>
      <dt class=col-sm-3>Description lists</dt>
      <dd class=col-sm-9>A description list is perfect for defining terms.</dd>

      <dt class=col-sm-3>Euismod</dt>
      <dd class=col-sm-9>
        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
        <p>Donec id elit non mi porta gravida at eget metus.</p>
      </dd>

      <dt class=col-sm-3>Malesuada porta</dt>
      <dd class=col-sm-9>Etiam porta sem malesuada magna mollis euismod.</dd>

      <dt class=col-sm-3 text-truncate>Truncated term is truncated</dt>
      <dd class=col-sm-9>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

      <dt class=col-sm-3>Nesting</dt>
      <dd class=col-sm-9>
        <dl class=row>
          <dt class=col-sm-4>Nested definition list</dt>
          <dd class=col-sm-8>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
        </dl>
      </dd>
    </dl>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <-e-script src=https://code.jquery.com/jquery-3.2.1.slim.min.js integrity=sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN crossorigin=anonymous><-e-/script>
    <-e-script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js integrity=sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4 crossorigin=anonymous><-e-/script>
    <-e-script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js integrity=sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1 crossorigin=anonymous><-e-/script>
  </body>
</html>


Kalau teman-teman sebelumnya telah pernah menggunakan boostrap pasti telah tak bingung lagi ya dengan struktur di atas, teman-teman perhatikan saja tag dl, dt, dd, hasilnya akan sama seperti gambar di atas ya teman-teman:



Pada



Oke saya rasa lumayan hingga disini dulu belajar kita mengenai cara merancang penjelasan dengan rapi menggunakan bootstrap, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more