Sumber : http://www.getbootstrap.com | http://www.w3schools.com
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.
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">
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
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 |
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.
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>
<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>
<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>
<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>
<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>
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)”
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>
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>
Jika kamu sudah memahami CSS, Javascript, dan JQuery dengan baik, maka belajar Bootstrap akan menjadi lebih mudah.
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.
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.
Latihan bisa dilakukan dengan membuat berbagai macam template, seperti:
Untuk belajar lebih lanjut tentang Bootstrap, anda bisa mendaftar kursus komputer paket web master atau paket web desain di Kursus Komputer YMII Cileungsi.