Cara Menghapus Sebagian Border dengan Mudah Menggunakan Bootstrap

Masih membahas mengenai bootstrap, dan masih mengulik efek cantik apa yang dapat kita gunakan menggunakan bootstrap 4 ini, di kesempatan kali ini saya masih membahas yang hakekatnya gampang pun kita gunakan CSS lazimnya tanpa bootstrap tapi dengan menggunakan bootstrap kita lebih di permudahkan lagi, dengan memberi class bawaan yang di sediakan oleh boostrap kita telah dapat memperoleh efek yang terdapat di boostrap contohnya seperti sekarang ini ini kita akan belajar cara menghapus sebahagian border dengan gampang menggunakan bootstrap, sederhana bukan, yang sederhana itu lah yang biasanya indah hehe, nulis apa si, oke jangan kemana-mana simak terus ya teman-teman.





Sebelum kita menggunakan bootstrap atau sewaktu kita menggunakan css, bagi menghilangkan kita lumayan menggunakan class baru, dimana border atau border mana yang mana yang ingin kita hapus, jadi kita mesti bikin class terlebih dahulu supaya border yang lain tak kena efeknya pun, lalu di file CSS kita style lagi misal border atas yang ingin kita hapus, berarti kita gunakan border-top: none,  hal ini jadi kerjaan dua kali betul tak, nah jikalau gunakan boostrap terbaru atau boostrap 4 ini yang sedang saya gunakan dengan menambah class=”border-top-0, border yang atas akan terhapus secata otomatis keren bukan, oke seketika bagi belajar cara menghapus sebahagian border dengan gampang menggunakan bootstrap saya contohkan, teman-teman perhatikan ya:



<!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>
    <title>cara menghapus sebahagian border dengan gampang menggunakan bootstrap</title>
    <span style=color: #0000ff><-e-style type=text/css>
      .tes{
        border: 5px solid red;
      }
    <-e-/style></span>
  </head>
  <body>
  <div class=container>
    <div class=row>
      <div class=col-md-12>
        <h1>cara menghapus sebahagian border dengan gampang menggunakan bootstrap</h1>
      </div>
      <div class=col-md-2>
        <span <span style=color: #ff0000>class=border</span> <span style=color: #0000ff>tes</span>> Contoh 1</span>
      </div>
      <div class=col-md-2>
        <span <span style=color: #ff0000>class=border-0</span> <span style=color: #0000ff>tes</span>> Contoh 2</span>
      </div>
      <div class=col-md-2>
        <span <span style=color: #ff0000>class=border-top-0</span> <span style=color: #0000ff>tes</span>> Contoh 3</span>
      </div>
      <div class=col-md-2>
        <span <span style=color: #ff0000>class=border-right-0</span> <span style=color: #0000ff>tes</span>> Contoh 4</span>
      </div>
      <div class=col-md-2>
        <span <span style=color: #ff0000>class=border-bottom-0</span> <span style=color: #0000ff>tes</span>> Contoh 5</span>
      </div>
      <div class=col-md-2>
        <span <span style=color: #ff0000>class=border-left-0</span> <span style=color: #0000ff>tes</span> >  Contoh 6</span>
      </div>
    </div>
  </div>
    <!-- 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>


Perlu teman-teman perhatikan sebelum saya menggunakan efek menghilangkan border yang terdapat di bootstrap 4 ini, kita mesti memberi efek di si kontennya tersebut, coba teman-teman perhatikan saya menggunakan class tes bagi memberikan efek border dengan warna merah, jadi nanti kita akan tau efek menghilangkan border bekerja atau tak, oke seketika saja bagaimana hasilnya:



dan



teman-teman dapat lihat ya, oke saya rasa lumayan jelas belajar kita mengenai cara menghapus sebahagian border dengan gampang 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