Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai pengenalan bootstrap.
PENGERTIAN
Bootstrap adalah framework ataupun tools untuk membuat aplikasi web ataupun website yang bersifat responsive secara cepat, mudah dan gratis. Kata Responsive disini berarti bahwa tampilan web (lebar dan susunan isinya) dapat berubah otomatis sesuai dengan lebar layar yang menampilkannya.
Salah satu website besar yang menggunakan framework bootstrap adalah Twitter. Tentu kalian sudah tidak asing lagi dengan Twitter? Interface twitter dibangun dengan menggunakan bootstrap. Mengapa bisa demikian? Karena Bootstrap sendiri dikembangkan oleh developer twitter sehingga Bootstrap juga disebut "Twitte Bootstrap" . Dengan bootstrap, kita dapat membuat website responsive dengan cepat dan mudah dapat berjalan sempurna pada browser-broser modern seperti Firefox, Google Chrome, Safari, Opera, Dan iNternet Explorer.
Bootstrap adalah framework ataupun tools untuk membuat aplikasi web ataupun website yang bersifat responsive secara cepat, mudah dan gratis. Kata Responsive disini berarti bahwa tampilan web (lebar dan susunan isinya) dapat berubah otomatis sesuai dengan lebar layar yang menampilkannya.
Salah satu website besar yang menggunakan framework bootstrap adalah Twitter. Tentu kalian sudah tidak asing lagi dengan Twitter? Interface twitter dibangun dengan menggunakan bootstrap. Mengapa bisa demikian? Karena Bootstrap sendiri dikembangkan oleh developer twitter sehingga Bootstrap juga disebut "Twitte Bootstrap" . Dengan bootstrap, kita dapat membuat website responsive dengan cepat dan mudah dapat berjalan sempurna pada browser-broser modern seperti Firefox, Google Chrome, Safari, Opera, Dan iNternet Explorer.
Apa itu Bootstrap?
- Bootstrap adalah kerangka front-end gratis untuk pengembangan web lebih cepat dan lebih mudah
- Bootstrap termasuk HTML dan CSS desain template berbasis tipografi, bentuk, tombol, tabel, navigasi, kata modal, komidi putar gambar dan banyak plugin JavaScript opsional lainnya, serta
- Bootstrap juga memberikan Anda kemampuan untuk dengan mudah membuat desain responsif
Apa itu Desain Web Responsif?
Desain web responsif adalah tentang menciptakan situs web yang secara otomatis menyesuaikan diri untuk terlihat baik pada semua perangkat, dari ponsel kecil untuk desktop besar.
Sejarah Bootstrap
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada bulan Agustus 2011 pada GitHub.
Pada Juni 2014 Bootstrap adalah proyek No.1 di GitHub!
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada bulan Agustus 2011 pada GitHub.
Pada Juni 2014 Bootstrap adalah proyek No.1 di GitHub!
Mengapa Menggunakan Bootstrap?
Keuntungan dari Bootstrap:
Keuntungan dari Bootstrap:
- Mudah digunakan: Siapa saja dengan pengetahuan hanya dasar dari HTML dan CSS dapat mulai menggunakan Bootstrap
- Fitur responsif: CSS responsif Bootstrap ini menyesuaikan dengan ponsel, tablet, dan desktop
- Pendekatan Mobile-pertama: Dalam Bootstrap 3, gaya mobile-first merupakan bagian dari kerangka inti
- Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera)
Dimana Mendapatkan Bootstrap?
Ada dua cara untuk mulai menggunakan Bootstrap di situs web Anda sendiri.
Kamu bisa:
Ada dua cara untuk mulai menggunakan Bootstrap di situs web Anda sendiri.
Kamu bisa:
- Ambil Bootstrap dari getbootstrap.com
- Sertakan Bootstrap dari CDN sebuah
MAKSUD
DAN TUJUAN
Bootstrap
berisi kumpulan class yang siap pakai. misalnya sobat ingin membuat
sebuah tombol dengan cepat dan tanpa harus merancang dan mengetikkan
syntax css untuk membuat sebuah tombol, maka dengan bootstrap kita
dapat membuatnya dengan sangat cepat, yaitu hanya dengan menambahkan
class “btn” . Akan saya jelaskan kembali agar lebih jelas tentang
kelebihan Bootstrap untuk membangun sebuah website, berikut
kelebihanya
- Penggunaan bootstrap yang menghemat waktu
- Tampilan terlihat modern
- Tidak perlu susah payah mengatur Script, tinggal memanggil class maka sudah jadi script tersebut
- Mobile Friendly maksudnya tampilan Bootstrap sangat responsive, yaitu tampilan Bootstrap sudah mendukung segala jenis resolusi, baik itu PC, Laptop, Tablet, Smartphone dan lain - lain
- Sangat ringan karena bootstrap dibuat dengan sangat terstruktur
- Dan masih banyak lagi kelebihan Bootstrap yang dapat sobat temukan nanti jika sudah menggunakan Bootstrap
ALAT
DAN BAHAN
Laptop / PC / Notebook
CSS
Boostrap (getbootstrap.com)
Sublime Text (text editor)
Buat Halaman Web Pertama Dengan Bootstrap
1. Tambahkan doctype HTML5
Bootstrap menggunakan elemen HTML dan properti CSS
yang memerlukan doctype HTML5.
Selalu menyertakan DOCTYPE HTML5 pada awal
halaman, bersama dengan atribut lang dan set karakter yang benar:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head></html>
2. Bootstrap 3 adalah ponsel pertama
Bootstrap 3 ini dirancang untuk menjadi responsif
terhadap perangkat mobile. gaya Mobile-pertama adalah bagian dari
kerangka inti.
Untuk memastikan render yang tepat dan sentuhan
zooming, tambahkan berikut <meta>tag dalam <head>elemen.
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-widthbagian menetapkan lebar
halaman untuk mengikuti layar-lebar perangkat (yang akan bervariasi
tergantung pada perangkat).
The initial-scale=1bagian menetapkan tingkat zoom
awal saat halaman pertama dimuat oleh browser.
3. Wadah
Bootstrap juga membutuhkan elemen yang mengandung
untuk membungkus isi situs.
Ada dua kelas kontainer untuk memilih dari:
.containerkelas menyediakan
responsif wadah lebar tetap
.container-fluidkelas menyediakan
wadah lebar penuh , yang mencakup seluruh lebar viewport
Catatan: Wadah tidak nestable (Anda tidak dapat menempatkan wadah di dalam wadah lain).
Dua Dasar Bootstrap Pages
Contoh berikut menunjukkan kode untuk halaman
Bootstrap dasar (dengan wadah lebar tetap responsif):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Contoh berikut menunjukkan kode untuk halaman
Bootstrap dasar (dengan wadah lebar penuh):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Cara
Menggunakan Bootstrap
Langkah
pertama yang harus sobat lakukan adalah menginstall Bootstrap.
Silahkan sobat download Bootstrap pada website resminya
http://getbootstrap.com/
Sampai
saat ini Bootstrap sudah mencapai versi ke empat.Berikut ini struktur
isi Bootstrap ketika sudah di download
bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css│ ├── bootstrap.min.css.map│ ├── bootstrap-theme.css│ ├── bootstrap-theme.css.map│ ├── bootstrap-theme.min.css│ └── bootstrap-theme.min.css.map├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/├── glyphicons-halflings-regular.eot├── glyphicons-halflings-regular.svg├── glyphicons-halflings-regular.ttf├── glyphicons-halflings-regular.woff└── glyphicons-halflings-regular.woff2
Cara
Install Bootstrap
Ada
beberapa cara menginstall Bootstrap. Anda bisa menginstall Bootstrap
dengan composer, bower, menggunakan npm, secara offline dan online.
Berikut contoh perintah untuk menginstall bootstrap dengan Bootstrap
bower install bootstrap
Untuk
menginstall Bootstrap menggunakan npm
npm install bootstrap
Install
Bootstrap dengan composer
composer require twbs/bootstrap
Tetapi
cara ini jarang digunakan oleh kebanyakan orang, cara yang paling
banyak digunakan oleh orang adalah dengan cara offline dan online
Cara
Install Bootstrap Secara Online
Sobat
bisa memilih salah satu dari tiga contoh berikut untuk menginstall
bootstrap secara online. syntax berikut bisa sobat letakkan pada
bagian <head> pada halaman HTML anda sama seperti menghubungkan
HTML dengan CSS dan Javascript
<!-- Latest compiled and minified CSS →<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Cara
Install Bootstrap Secara Offline
Cara
offline inilah yang paling banyak digunakan oleh orang, karena kita
dapat mengoperasikan atau menggunakan bootstrap tanpa harus
terkoneksi dengan internet alias harus Online. Karena framework
Bootstrap sudah terletak di PC kita sendiri. Berbeda dengan install
Bootstrap secara online karena file - file Bootstrap berada di pada
server luar.
Setelah
sobat mendownload framework CSS Bootstrap extract pada file project
anda.
Kemudian
untuk menghubungkan atau menginstall bootstrap buat sebuah file HTML
atau PHP yang akan kita hubungkan dengan Bootstrap. Disini saya
membuat sebuah file dengan nama index.html.
Bootstrap
juga memerlukan jquery karena untuk bagian Javascript Bootstrap
memerlukan jquery, jadi jangan lupa untuk menambahkan juga file
jquery pada folder js Bootstrap atau letakkan sesuai keinginan anda
asalkan direktori saat menghubungkan file css dan js sesuai.
Ketikkan
script berikut pada text editor dan simpan dengan extensi html / php
<!DOCTYPE html><html><head><title>Bootstrap Part 1 : Pengenalan dan Penggunaan Bootstrap</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/bootstrap.js"></script></head><body><h1>Mengenal Dan Cara Menggunakan Bootstrap</h1><button class="btn btn-danger">TOMBOL MERAH</button><button class="btn btn-primary">TOMBOL BIRU</button></body></html>
Coba
perhatikan pada script diatas. Untuk menghubungkan file html atau php
sobat dengan bootstrap.css memerlukan script berikut
<link rel="stylesheet" type="text/css"
href="css/bootstrap.css">
Kemudian
hubungkan file html atau php sobat dengan bootstrap.js dan jquery.js.
Ingat letakkan jquery.js pada bagian atas karena bootstrap bekerja
menggunakan bantuan jquery bukan jquery menggunakan bootstrap.
<script type="text/javascript"
src="js/jquery.js"></script>
<script type="text/javascript"
src="js/bootstrap.js"></script>
Kemduian
class "btn" pada element <button> merupakan Class
Bootstrap yang dapat digunakan untuk membuat tombol. Dan "btn-danger"
, "btn-primary" adalah untuk menentukan warna dari tombol
tersebut.
Perhatikan
letak direktori file css dan js Bootstrap dan Jquery sobat ketika
menghubungkanya. Sobat tidak perlu menghubungkan seluruh isi
Bootstrap tetapi sobat hanya perlu menghubungkan file bootstrap.css
dan bootstrap.js
REFERENSI
No comments:
Post a Comment