Cara Cepat Belajar Bootstrap

Bootstrap adalah framework CSS  dan javascript yang sangat populer dan open source. Bootstrap dapat memudahkan kita dalam mendesain web. Kita tidak perlu lagi membuat css dari nol sehingga pengembangan menjadi lebih cepat.

Saya akan sedikit bercerita tentang bootstrap dan template bootstrap. Bootstrap menyediakan file css dan js saja, sehingga bootstrap tidak lah sama dengan template. Template merupakan karya orang yang banyak diinternet baik geratis maupun berbayar. Jika anda berfikir membuat web secara instan maka downloadlah template bootstrap. Namun jika anda ingin mengembangkan template sendiri maka downloadlah framework bootstrap untuk mempercepat pembuatannya.

Sebelum belajar bootstrap anda harus terlebih dahulu paham hal berikut.
  • Mengerti penulisan HTML
  • Mengerti penulisan CSS eksternal
  • Mengerti penulisan JS eksternal
Alangkah baiknya anda juga belajar jQuery sembari belajar bootstrap. Ketika belajar bootstrap baiknya kita lupakan dulu PHP dan mulai mendesain tampilan. Ada beberapa hal yang paling terkenal tentang kemampuan bootstrap.
  • Responship terhadap layar
  • Mudah dipelajari
  • Dokumentasi lengkap
Baik, saya akan membagikan tips belajar bootstrap secara cepat. Menurut saya ada dua hal yang harus anda ketahui untuk belajar bootstrap dengan cepat.
  1. Layout
  2. Dokumentasi
Hal terpenting dalam membuat desain tampilan web adalah membuat layout. Jika anda pernah belajar membuat layout dengan tabel html maka cukup mudah untuk memahami layout di bootstrap. Baris dan kolom pada layout tabel dikenal dengan istilah grid di bootstrap. Bedanya bootstrap responship terhadap ukuran layar sedangkan tabel tidak. Terakhir anda cukup mengunjungi dokumentasi bootsrap dan terus belajar sambil mengingatnya sampai luar kepala.

Langsung saja, anda dapat mendownload bootstrap melalui web resminya.

Jika anda telah mendownloadnya maka selanjutnya buat folder di htdocs.
Saya menempatkan boostrap di dalam folder test di htdocs. Folder hasil extrak dari download tadi adalah folder css dan js. Pada kesempatan ini sebenarnya kita hanya menggunakan file bootstrap.css untuk yang lain anda dapat mempelajarinya sendiri. 

<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4">
Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.Ini adalah kolom pertama.
</div>
<div class="col-4">
Ini adalah kolom kedua. Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.Ini adalah kolom kedua.
</div>
<div class="col-4">
Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.Ini adalah kolom ketiga.
</div>
</div>
</div>
</body>
</html>

Hasilnya seperti ini,
Nah, anda baru saja belajar grid yang terdiri dari satu baris dan tiga kolom. Jika anda sudah belajar tabel di HTML begini cara mengingatnya.
  1. class="container" => <table>
  2. class="row" => <tr>
  3. class="col-4" => <td>
untuk class kolom terdiri dari 1 sampai 12. Untuk col-12 berati lebar kolom selebar layar (full) dan mengecil sampai col-1.

 extra small  Small  Medium  larger  extra large
 col-  col-sm-  col-md  col-lg-  col-xl-
 None (auto)  540px  720px  960px  1140px
 Sumber: https://getbootstrap.com/docs/4.5/layout/grid/
anda dapat membaca lengkapnya di sana

<div class="col-md-3 col-6">

Arti kode di atas adalah jika dibuka dilayar medium maka lebarya 3/12 yaitu 1/4 ukuran layar. sedangkan jika lebar layar extra small maka 6/12 yaitu 1/2 ukuran layar. ini lah yang membuat bootrstrap responship terhadap layar.

Lalu bagaimana cara untuk colspan atau marger cell ? tidak perlu hawatir begini caranya


<div class="col-2">
</div>
<div class="col-10">
</div>

maka lebar kolom pertama 2/12 dan lebar kolom ke dua 10/12. Lalu bagaimana untuk rowspan? anda dapat menambahkan properti height css pada kolom dan memanfaatkan teknik layout di dalam layout.

Setelah anda paham membuat layout anda dapat membaca dokumentasi yang anda butuhkan dan copas contoh kode nya ke dalam layout. Ingat ya lihat dokumentasi di halaman resmi bootstrap.

<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
<div class="row" >
<div class="col-12" style="padding: 0px">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
</div>
</div>
<div class="row">
<div class="card col-lg-2 col-12 shadow rounded" style="min-height: 500px">
Selamat Datang di Belajar Web Medan.
</div>
<div class="card col-lg-10 col-12 shadow rounded" style="min-height: 500px">
Mari belajar pemrograman web di sini
</div>
</div>
<div class="row">
<div class="col-lg-12 col-12 d-flex justify-content-center">
Copyright &copy; Belajar Web Medan 2020
</div>
</div>
</div>
</body>
</html>

Hasilnya seperti ini.


Diatas adalah contoh sederhana template yang dibuat menggunakan bootstrap. Semoga bermanfaat 😀

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE