Cara Sederhana Membuat Efek Shadow Menggunakan Bootstrap

Di artikel kali ini kita akan belajar bagaimana Cara Sederhana Merancang Efek Shadow Menggunakan Bootstrap. Seandainya rekan rekan telah pernah belajar mengenai HTML CSS pasti berikutnya akan mengenal Framework Bootstrap. Jadi Framework Bootstrap sendiri amat gampang dan simple pada menggunakan. Sehingga ketika kita membutuhkan komponent bagi layout telah terdapat di Bootstrap. Baiklah pada kasus kali ini saya membahas mengenai merancang efek shadow menggunakan Bootstrap.



Seketika saja rekan rekan membuka blog Bootstrap lalu pilih button get start kemudia copy saja code struktur htmlnya.



<!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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css>

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=https://code.jquery.com/jquery-3.4.1.slim.min.js></script>
    <script src=https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js></script>
    <script src=https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js></script>
  </body>
</html>


Seandainya telah tambahkan code dibawah ini di bagian <body>



<div class=container my-5>
      <div class=col-md-6 offset-3>
        <h5 class=bg-info p-3 text-white font-weight-bold>Merancang Efek Shadow Menggunakan Bootstrap</h5>
        <div class=shadow-none my-2 py-3>Tanpa Efek Shadow</div>
        <div class=shadow my-5 py-3>Efek Shadow</div>
        <div class=shadow-sm my-4 py-3>Efek Shadow Small</div>
        <div class=shadow-lg my-4 py-3>Efek Shadow Large</div>
      </div>


Jadi di Framework Bootstrap kita hanya menambahkan class=”shadow” bagi memberikan efek shadow. Disini saya menambahkan class yang dimanfaatkan seperti :




  • class=”shadow-none” tampilan tanpa shadow


  • class=”shadow” tampilan dengan shadow


  • class=”shadow-sm” tampilan dengan efek shadow ukuran small


  • class=”shadow-lg” tampilan dengan efek shadow ukuran large



Rekan-rekan seketika saja simpan code diatas kemudia buka di browser karenanya akan seperti berikut tampilannya.



Pada



Demikian pembahasan di kesempatan kali ini, semoga bermanfaat dan hingga jumpa dengan pembhasan lainnya.



terima kasih.




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