Sumber : http://www.getbootstrap.com | http://www.w3schools.com

Apa itu Bootstrap 4?

Bootstrap adalah framework CSS untuk membaut tampilan web. Bootstrap meneydiakan class dan komponen yang siap dipakai, sehingga kita tidak perlu menulis kode CSS dari nol.

Bootstrap awalnya dikembangkan oleh developer Twitter, lalu dibuat open source agar semua orang dapat berkontribusi di dalamnya.

Bootstrap kini sudah mencapai versi 4 dengan fiturnya lebih canggih dari yang sebelumnya.

Dan setiap versi nya pemanggilan atau penggunaan serta tampilan nya berbeda pula.

Menyiapkan Bootstrap

Untuk menyiapkan project Bootstrap ada beberapa cara pertama dengan melakukan pemanggilan Bootstrap CDN yaitu pemanggilan source online yang sudah di sediakan pada web Bootstrap pada cara ini tidak direkomendasikan untuk penggunaan devlop pada aplikasi yang berjalan pada localhost karna pengguna di harusan online dan terkoneksi pada Internet jika tidak maka tidak akan bisa.

Cara kedua yaitu dengan melakukan penginstalan pada terminal atau npm. Dan sejenisnya.

Cara ketiga dengan mendownload source pada web Bootstrap cara ini biasanya yang paling banyak digunakan untuk pembuatan via local yang tidak menggunakan Internet.

Cara pengguna Bootstrap sama hal nya dengan pemanggilan css pada umumnya yaitu dengan cara penggunaan

<link rel="stylesheet" href="css/bootstrap.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />

Tag <meta neme="viewport"> berfungsi untuk menyesuaikan tampilan web terhadap layar pengguna. Jadi jika dibuka di layar yang lebih kecil, ia akan melakukan sekala sesuai ukuran lebar layarnya. Tag ini wajib, bila kita ingin membuat web yang responsif.

menyisipkan Bootstrap melalui CDN:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Struktur dalam Bootstrap

Project Bootstrap/

├── css

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap-grid.css

│   ├── bootstrap-grid.css.map

│   ├── bootstrap-grid.min.css

│   ├── bootstrap-grid.min.css.map

│   ├── bootstrap.min.css

│   ├── bootstrap.min.css.map

│   ├── bootstrap-reboot.css

│   ├── bootstrap-reboot.css.map

│   ├── bootstrap-reboot.min.css

│   └── bootstrap-reboot.min.css.map

└── js

    ├── bootstrap.bundle.js

    ├── bootstrap.bundle.js.map

    ├── bootstrap.bundle.min.js

    ├── bootstrap.bundle.min.js.map

    ├── bootstrap.js

    ├── bootstrap.js.map

    ├── bootstrap.min.js

    └── bootstrap.min.js.map

2 directories, 20 files

CSS files

Bootstrap includes a handful of options for including some or all of our compiled CSS.

CSS files	Layout	Content	Components	Utilities
bootstrap.css bootstrap.min.css	Included	Included	Included	Included
bootstrap-grid.css bootstrap-grid.min.css	Only grid system	Not included	Not included	Only flex utilities
bootstrap-reboot.css bootstrap-reboot.min.css	Not included	Only Reboot	Not included	Not included

JS files

Similarly, we have options for including some or all of our compiled JavaScript.

JS files	Popper	jQuery
bootstrap.bundle.js bootstrap.bundle.min.js	Included	Not included
bootstrap.js bootstrap.min.js	Not included	Not included

Pada table di atas kita bisa mengetahui source mana yang di butuhkan  untuk pengembangan aplikasi web kita dan file atau source mana yang tidak perlu di gunakan biasanya untuk penggunaan file atau source yaitu Bootstrap.min.css.

Kenapa menysipkan bootstrap.min.css bukan boostrap.css?

Pertanyaan bagus.

File bootstrap.min.css adalah file yang sudah dikompres —ukurannya lebih kecil—dan siap digunakan untuk produksi (production).

Sedangkan file bootstrap.css biasanya digunakan untuk development. Jika kita ingin memodifikasi Bootstrap, kita bisa lakukan dari file ini.

Terakhir, kita membuat tag untuk menyisipkan javascript Bootstrap.

<!-- Menyisipkan JQuery dan Javascript Bootstrap -->
<script src="js/bootstrap.min.js"></script>	

Sebenarnya ini masih belum cukup, karena Bootstrap juga butuh JQuery.

Contoh lengkpanya seperti ini:

<script type="text/javascript" src="js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

Namun, karena kita belum punya JQuery, nanti saja kita tambahkan.

Kenapa harus menyisipkan file Javascript dari Bootstrap, Bukannya Bootstrap hanya framework untuk CSS?

Beberapa dari komponen Bootstrap seperti Dropdown, Modal, Crousel, dsb. membutuhkan Javascript untuk melakukan animasi.

Berikut penggunaan class pada Bootstrap

Navigation Bar (navbar)

<div class=”navbar”></div>

• Digunakan untuk membuat header untuk
• navigasi (biasanya berada di bagian atas website)
•  Navbar dapat berwarna terang atau gelap.
• Navbar dapat selalu terlihat di posisi atas atau bawah
• Navbar bisa rata kanan
• Navbar dapat otomatis berkembang/menyempit.

Navbar Basic

<nav class="navbar navbar-default">
<!--ganti navbar-default menjadi navbar-inverse untuk membalik warna-->
<!--tambahkan navbar-fixed-top atau navbar-fixed-bottom untuk posisi tetap -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li> 
<li><a href="#">Page 3</a></li> 
</ul>
</div>
</div>
</nav>

Navbar Inverse & Fix Position

<nav class="navbar navbar-default"> 

<!--ganti navbar-default menjadi navbar-inverse untuk membalik warna--> 

<!--tambahkan navbar-fixed-top atau navbar-fixed-bottom untuk posisi tetap --> 

<div class="container-fluid"> 

<div class="navbar-header"> 

<a class="navbar-brand" href="#">WebSiteName</a> 

</div> 

<div> 

<ul class="nav navbar-nav"> 

<li class="active"><a href="#">Home</a></li> 

<li><a href="#">Page 1</a></li> 

<li><a href="#">Page 2</a></li>  

<li><a href="#">Page 3</a></li>  

</ul> 

</div> 

</div> 

</nav> 

Navbar Right

<nav class="navbar navbar-inverse"> 

<div class="container-fluid"> 

<div class="navbar-header"> 

<a class="navbar-brand" href="#">WebSiteName</a> 

</div> 

<div> 

<ul class="nav navbar-nav navbar-right"> 

<li class="active"><a href="#">Home</a></li> 

<li><a href="#">Page 1</a></li> 

<li><a href="#">Page 2</a></li>  

<li><a href="#">Page 3</a></li>  

</ul> 

</div> 

</div> 

</nav> 

Navbar Dropdown

<nav class="navbar navbar-inverse"> 

<div class="container-fluid"> 

<div class="navbar-header"> 

<a class="navbar-brand" href="#">WebSiteName</a> 

</div> 

<div> 

<ul class="nav navbar-nav"> 

<li class="active"><a href="#">Home</a></li> 

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 

<ul class="dropdown-menu"> 

<li><a href="#">Page 1-1</a></li> 

<li><a href="#">Page 1-2</a></li> 

<li><a href="#">Page 1-3</a></li> 

</ul> 

</li> 

<li><a href="#">Page 2</a></li> 

<li><a href="#">Page 3</a></li> 

</ul> 

</div> 

</div> 

</nav> 

Jumbotron

MerupakankelaspadaBootstrap yang digunakanuntukmenampilkankotakbesaryang biasanyadigunakanuntukmenarikperhatian.

Ukuranteksyang beradadalamkelasJumbotronakandiperbesar.

Contoh:

<div class="container"> 

<div class="jumbotron"> 

<h1>Bootstrap Tutorial</h1>  

<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing 

responsive, mobile-first projects on the web.</p>  

</div> 

<p>This is some text.</p>  

<p>This is another text.</p>  

</div> 

“Info Kursus Komputer Ms Office silahkan hubungi 0858 8188 6578 (Mas Tris)”

Carousel

• Bootstrap menyediakansebuahplugin untukmenampilkanCarousel.
• Carousel merupakanserangkaiangambaryang tampilsecarabergantian

Contoh Carousel

<div id="myCarousel" class="carousel slide" data- 

ride="carousel"> 

<!-- Indicators --> 

<ol class="carousel-indicators"> 

<li data-target="#myCarousel" data-slide-to="0"  

class="active"></li> 

<li data-target="#myCarousel" data-slide-to="1"></li> 

<li data-target="#myCarousel" data-slide-to="2"></li> 

</ol> 

<!-- Wrapper for slides --> 

<div class="carousel-inner" role="listbox"> 

<div class="item active"> 

<img src="img_chania.jpg" alt="Chania"> 

</div> 

<div class="item"> 

<img src="img_chania2.jpg" alt="Chania"> 

</div> 

<div class="item"> 

<img src="img_flower.jpg" alt="Flower"> 

</div> 

</div> 

<!-- Left and right controls --> 

<a class="left carousel-control" href="#myCarousel"  

role="button" data-slide="prev"> 

<span class="glyphicon glyphicon-chevron-left" aria- 

hidden="true"></span> 

<span class="sr-only">Previous</span> 

</a> 

<a class="right carousel-control" href="#myCarousel"  

role="button" data-slide="next"> 

<span class="glyphicon glyphicon-chevron-right" aria- 

hidden="true"></span> 

<span class="sr-only">Next</span> 

</a> 

</div> 

Anda dapat menambahkan caption pada gambar di  Carousel 

Contoh: 

<div class="item"> 

<img src="img_chania2.jpg" alt="Chania"> 

<div class="carousel-caption"> 

<h3>Chania</h3> 

<p>The atmosphere in Chania has a touch of Venice.</p> 

</div> 

</div> 

Grid System

• Bootstrap memungkinkanlebarlayardibagimenjadi12 kolom.
• Andadapatmengelompokkanbeberapakolommenjadisatu.
• Terdapat4 kelas: xs(phones), sm(tablets), md (desktops), danlg(larger desktops)

Berikut ini adalah tabel ukuran gride system

Grid System

<div class="row"> 

<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 

<div class="col-xs-0 col-md-4">.col-xs-0 .col-md-4</div> 

</div> 

<div class="row"> 

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 

</div> 

<div class="row"> 

<div class="col-xs-6">.col-xs-6</div> 

<div class="col-xs-6">.col-xs-6</div> 

</div> 

Tips Belajar Bootstrap

Jika kamu sudah memahami CSS, Javascript, dan JQuery dengan baik, maka belajar Bootstrap akan menjadi lebih mudah.

1. Bagaimana Cara Meghapal Class Bootstrap?

Sebenarnya saya juga tidak begitu hapal semua sintak dan class dari Bootstrap.

Namun, beberapa class sudah saya ingat diluar kepala.

Hal ini karena saya sering mengetiknya. Bukan copas. Tapi kadang kalau sedang lupa ya copas langsung dari dokumentasi. 

Intinya: bila kamu ingin menghapal, sering-sering saja diketik dan hindari copas.

Agar lebih mudah, silahkan download  dokumentasi di getboostrap.com agar bisa dibaca secara offline.

2. Bagaimana Melakukan Eksperimen?

Cara terbaik untuk melakukan eksperimen adalah menggunakan Inspect Element. Karena di sana kita dapat menggubah langsung HTML dan class-nya serta dapat melihat langsung hasilnya.

3. Dengan Latihan?

Latihan bisa dilakukan dengan membuat berbagai macam template,   seperti:

• Admin Template atau Dashboard
• Template Blog
• Landing Page
• membuat project
• dan sebagainya…

Untuk belajar lebih lanjut tentang Bootstrap, anda bisa mendaftar kursus komputer paket web master atau paket web desain di Kursus Komputer YMII Cileungsi.