MAKALAH
PENGANTAR TEKNOLOGI INFORMASI (PTI)
TENTANG BOOTSTRAP
OLEH
WINDA AULIA RAHMI
14
205 118
DOSEN
PEMBIMBING
KEUKEU R
PRGRAM STUDI MANAJEMEN
INFORMATIKA JURUSAN SYARIAH
SEKOLAH TINGGI AGAMA
ISLAM NEGERI (STAIN)
BATUSANGKAR
2014
KATA PENGANTAR
Alhamdulillah,
puji syukur penulis ucapkan kepada Allah SWT yang telah melimpahkan rahmat dan
karunia-Nya, sehingga dengan izin nya penulis dapat menyelesaikan makalah ini
dengan baik.
Shalawat
beriringkan salam penulis ucapkan agar disampaikan kepada Nabi Muhammad SAW
yang telah membawa manusia dari zaman berilmu pengetahuan dan penuh kebaikan
sampai saat sekarang ini.
Berkat
rahmat dan karunia Allah akhirnya penulis dapat menyelesaikan makalah yang
berjudul BOOTSTRAP. Makalah
ini dibuat sebagai tugas mata kuliah Pengantar Teknologi Informasi.
Penulis
menyadari sepenuh nya bahwa makalah ini jauh dari kesempurnaan. untuk itu
kritik dan saran pembaca sangatlah penulis harapkan demi perbaikan pada makalah
selanjutnya. Akhir kata semoga makalah
ini dapat bermafaat bagi kita semua,
penulis khususnya pembaca.
Batusangkar, 7
November 2014
Penulis
DAFTAR ISI
KATA
PENGANTAR................................................................................ i
DAFTAR
ISI................................................................................................ ii
BAB I PENDAHULUAN
A. LatarBelakang................................................................................. 1
B. RumusanMasalah............................................................................ 1
C. TujuanMasalah................................................................................ 1
BAB II PEMBAHASAN
A. Pengertian
Bootstrap.......................................................................
B. Sejarah
Bootstrap............................................................................
C. PengembanganBootstrap
DenganPerangkatLunak.....................
D. AlatAlatDalamMeningkatkan
Bootstrap.......................................
E. Kelebihan Bootstrap.......................................................................
F. Kelemahan
Bootstrap......................................................................
G. Cara
Mendownload Bootstrap.......................................................
BAB III PENUTUP
A. Kesimpulan.......................................................................................
B. Saran.................................................................................................
DAFTAR
PUSTAKA.......................................................................
BAB I
PENDAHULUAN
A.
LATAR
BELAKANG
Bootstrap merupakan framework untuk membangun desain web
secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan
menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop,
tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan
sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk
tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan
dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap
kita juga bisa membangun web dinamis ataupun statis.
Dengan Bootstrap, developer web bisa menghemat waktu
dalam mendesain tampilan aplikasi. Di Bootstrap sudah tersedia CSS, HTML dan
juga JQuery Plugin untuk typography, forms, buttons, tables, grids, navigation
dan berbagai komponen interface lainnya. Bootstrap pertama kali dirilis pada
Agustus 2012 dan berlisesni open source. Bootstrap bisa didownload secara
gratis di GitHub.
Kelebihan utama dari Bootstrap adalah Responsive Layout
dan 12-column grid system. Dengan Responsive Layout maka aplikasi web yang
didesain dengan menggunakan Bootstrap akan langsung menyesuaikan dengan lebar
dari media perambahnya. Sehingga tampilan web akan tetap rapih dibuka dengan
media apapun baik itu handphone, tablet, laptop ataupun PC desktop. Jadi,
tampilan tidak akan terganggu dengan resolusi dari layar. Sedangkan 12-column
grid system sederhananya adalah Bootstrap akan membagi lebar layar menjadi 12
bagian. Sehingga pembagian kolom per kolom tampilan web akan menjadi lebih
mudah.
B.
RUMUSAN
MASALAH
1. Apa
pengertian dari bootstrap ?
2. Bagaimana
sejarah bootstrap ?
3. Bagaimana
cara menggunakan bootstrap pada HTML sederhana ?
4. Bagaimana cara Mendesain web menjadi lebih mudah?
5. Bagaiman
cara belajar bootstrap bagi pemula ?
6. Apa
saja kelebihan dan kelemahan dari bootstrap ?
C.
TUJUAN
Adapun tujuan
dari peulisan makalah ini adalah:
a. Menyelesaikan
tugas penulisan dalam mata kuliah pengantar teknologi informasi
b. Menjelaskan
pengertian bootstrap.
c. Menjelaskan
sejarah dari bootstrap.
d. Menjelaskan
cara menggunakan bootstrap pada html sederhana.
e. Menjelaskan
cara belajar bootstrap bagi pemula.
f. Menjelaskan
kelebihan dan kelemahan dari bootstrap.
BAB II
PEMBAHASAN
A.
PENGERTIAN
Bootstrap
merupakan framework untuk membangun desain web secara responsif. Artinya,
tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari
browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur
ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita
sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan
apabila dirender oleh mobile browser maka tampilan dari web yang kita buat
tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun
web dinamis ataupun statis.
Adapun
pengertian Bootstrap adalah sebuah alat bantu untuk membuat
sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang
pengembang website ataupun pendesain halaman website. Sesuai
namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman
yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat
mengubah tampilan halaman website sesuai dengan kebutuhan.
Bootstrap
adalah salah satu framework yang mudah digunakan untuk membuat layout sebuah
halaman website. Dengan memanfaatkan bootstrap, kita bisa dengan mudah membuat
sebuah halaman web yang responsive.
Bootstrap adalah Boot atau booting. Dalam perangkat keras
berarti proses mengaktifkan komputer sampai diambil alih oleh sistem operasi.
Proses boot ini dikenal dengan dua cara, yaitu warm boot dan cold
boot.Warm boot, berarti mengaktifkan kembali, tanpa harus dimatikan
terlebih dahulu, misalnya dengan menekan tombol reset, atau memencet sekaligus
tombol CTRL+ALT+DEL pada sistem operasi Disk Operating System (DOS).
Bootstrap
loader
adalah sebuah program yang cukup sederhana untuk dipanggil secara manual dengan
pertolongan sakelar. Program ini mampu memanggil program pemanggil lain yang
lebih kompleks sehingga dapat menjalankan program buatan sendiri.
Bootstrapping
adalah
pemuatan dan execution program bootstrap loader.Bootstrap ButtonAdalah tombol
atau sakelar yang pertama kali akan ditekan apabila hendak menyalakan komputer.
Penekanan tombol ini akan menyebabkan sistem operasi berhubungan dengan memori.
Bootstrap
program
adalah kode yang disimpan di code ROM yang dapat menempatkan kernel,
memasukkannya kedalam memori, dan memulai eksekusinya
B.
SEJARAH
BOOTSTRAP
Awalnya
dibuat oleh seorang desainer dan pengembang di Twitter, Bootstrap telah menjadi
salah satu kerangka front-end yang paling populer dan proyek-proyek open source
di dunia.
Bootstrap
diciptakan di Twitter pada pertengahan 2010 oleh @ mdo dan @ lemak. Sebelum
menjadi kerangka kerja open-source, Bootstrap dikenal sebagai Twitter
Blueprint. Beberapa bulan ke dalam pembangunan, Twitter diadakan pertamanya
Hack Week dan proyek meledak sebagai pengembang dari semua tingkat keahlian
melompat tanpa bimbingan eksternal. Ia menjabat sebagai panduan gaya untuk
pengembangan alat internal di perusahaan tersebut selama lebih dari setahun
sebelum dirilis ke publik, dan terus melakukannya hari ini.
Awalnya
dirilis pada Jumat, 19 Agustus, 2011, kami sudah sejak memiliki lebih dari dua
puluh rilis, termasuk dua penulisan ulang besar dengan v2 dan v3. Dengan
Bootstrap 2, kami menambahkan fungsionalitas responsif terhadap seluruh
kerangka sebagai stylesheet opsional. Membangun bahwa dengan Bootstrap 3, kita
menulis ulang perpustakaan sekali lagi untuk membuatnya responsif secara
default dengan ponsel pendekatan pertama
C. CARA MENGGUNAKAN BOOTSTRAP
PADA SEBUAH HTML SEDERHANA.
langkah detil untuk menggunakan boostrap pada sebuah HTML sederhana
a. Langkah 1: File HTML Awal
Untuk mulai melihat bagiamana Bootstrap memberikan fitur-fitur rancangan antarmuka indah ke halaman website, kita akan membuat sebuah file HTML sederhana terlebih dahulu. Buat sebuah file HTML, dan isikan file tersebut dengan kode berikut:
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Sebuah file HTML Sederhana</title>
6. </head>
7. <body>
8. <h1>File HTML</h1>
9.
10. <p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung
melalui <i>browser</i>.</p>
11.
12. <blockquote>
13. Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar
ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
14. <small>Lao Tzu</small>
15. </blockquote>
16. </body>
17. </html>
Simpan file dengan nama bootstrap.html, dan buka file HTML yang baru dibuat pada browser.
Sampai titik ini, halaman HTML kita akan menampilka sebuah tampilan. Checkpoint: Sampai titik ini,
kita telah memiliki sebuah file HTML, yaitu bootstrap.html.
b. Langkah 2: Download dan Ekstrak Bootstrap
Untuk menggunakan Boostrap pada aplikasi kita,
tentunya kita harus memiliki Bootstrap terlebih dahulu. Buka website resmi
Bootstrap, http://twitter.github.io/bootstrap/, dan klik tombol “Download Bootstrap” untuk memulai download Bootstrap.
Selesai download, anda akan memiliki file
bootstrap.zip yang berisi file-file yang dibutuhkan untuk
menggunakan Bootstrap. Ekstrak file tersebut pada tempat yang sama dengan bootstrap.html, sehingga sekarang kita memiliki beberapa file
dengan isi dari masing-masing direktori yaitu:
a)
Direktori “
css” memiliki empat buah file
di dalamnya, yaitu: 1.
bootstrap.css2.
bootstrap.min.css3.
bootstrap-responsive.css4.
bootstrap-responsive.min.css
b)
Direktori “
img memiliki dua buah file di
dalamnya, yaitu: 1.
glyphicons-halflings.png2.
glyphicons-halflings-white.png
c)
Direktori “
js” memiliki dua buah file di
dalamnya, yaitu: 1.
bootstrap.js2.
bootstrap.min.js
Jika seluruh file yang ada telah
sama, maka kita telah siap menggunakn Bootstrap!
Checkpoint:
Sebelum masuk ke langkah selanjutnya, pastikan file yang ada pada direktori
percobaan anda telah sama dengan daftar file yang ada di atas.
c. Langkah 3: Memasukkan
Bootstrap ke dalam HTML
Langkah terakhir sangat sederhana, karena kita hanya
perlu memasukkan CSS Bootstrap ke dalam file
bootstrap.html, dan kita dapat langsung melihat perubahan yang
dibuat oleh Bootstrap.file bootstrap.html dan tambahkan kode berikut sebelum baris ke 6 (</head>):1. <link rel="stylesheet" href="css/bootstrap.css">
Catatan: file bootstrap.css merupakan file CSS yang belum dikompilasi, dan digunakan hanya
pada tahap pengembangan untuk mempermudah debugging. Jika ingin menggunakan Bootstrap
pada website produksi yang akan benar-benar dikunjungi pengguna, disarankan untuk menggunakan
bootstrap.min.css untuk meminimalkan download pengguna.sehingga isi dari file bootstrap.html menjadi seperti berikut:
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Sebuah file HTML Sederhana</title>
6.
7. <link rel="stylesheet" href="css/bootstrap.css">
8. </head>
9. <body>
10. <h1>File HTML</h1>
11.
12. <p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung
melalui <i>browser</i>.</p>
13.
14. <blockquote>
15. Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar
ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
16. <small>Lao Tzu</small>
17. </blockquote>
18. </body>
19. </html>
kemudian buka kembali
bootstrap.html pada browsr, dan kita dapat langsung melihat perubahan pada
halaman, terutama pada font dan posisi dari kutipan Lao Tzu:
Ya, dengan hanya menambahkan satu baris kode saja halaman web anda telah
dipermak secara otomatis oleh Bootstrap! Selanjutnya, kita akan mencoba
beberapa fitur-fitur lain dari Bootstrap.
1) Fitur Bootstrap: Layout
Salah satu hal yang menjadi momok bagi para pengembang web ialah menyusun layout dengan rapi. Untuk menyusun elemen-elemen dengan rapi, biasanya pengembang harus mengerti konsep-konsep yang kompleks pada CSS: float, box model, positioning, dan lainnya. Untungnya, Bootstrap menyediakan banyak
2) Penampung Halaman
Umumnya sebuah halaman website memiliki bagian penampung utama yang berisikan keseluruhan konten website tersebut. Bagian penampung digunakan untuk membatasi lebar dokumen, sehingga konten pada website masih dapat dibaca dengan mudah.
Membuat penampung seperti website di atas merupakan pekerjaan yang sangat mudah dengan menggunakan Bootsrap. Kita cukup “membungkus” elemen-elemen dokumen ke dalam sebuah
1) Fitur Bootstrap: Layout
Salah satu hal yang menjadi momok bagi para pengembang web ialah menyusun layout dengan rapi. Untuk menyusun elemen-elemen dengan rapi, biasanya pengembang harus mengerti konsep-konsep yang kompleks pada CSS: float, box model, positioning, dan lainnya. Untungnya, Bootstrap menyediakan banyak
class CSS standar yang dapat digunakan
untuk menyusun elemen-elemen dokumen HTML dengan rapi dan mudah. Agar tidak
membuang-buang waktu, mari kita lihat fitur Bootstrap untuk layout! 2) Penampung Halaman
Umumnya sebuah halaman website memiliki bagian penampung utama yang berisikan keseluruhan konten website tersebut. Bagian penampung digunakan untuk membatasi lebar dokumen, sehingga konten pada website masih dapat dibaca dengan mudah.
Membuat penampung seperti website di atas merupakan pekerjaan yang sangat mudah dengan menggunakan Bootsrap. Kita cukup “membungkus” elemen-elemen dokumen ke dalam sebuah
div dengan atribut class bernilai container. Langsung saja, bungkus seluruh
kode HTML yang ada di dalam body pada bootstrap.html ke dalam elemen
div, sehingga isi
dari bootstrap.html menjadi seperti
berikut:1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Sebuah file HTML Sederhana</title>
6.
7. <link rel="stylesheet" href="css/bootstrap.css">
8. </head>
9. <body>
10. <div class="container">
11. <h1>File HTML</h1>
12.
13. <p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung
melalui <i>browser</i>.</p>
14.
15. <blockquote>
16. Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar
ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
17. <small>Lao Tzu</small>
18. </blockquote>
19. </div>
20. </body>
21. </html>
Seperti biasa, buka
bootstrap.html pada
browser untuk melihat bagaimana elemen-elemen HTML sekarang memiliki batas
lebar dan berada di tengah browser (klik gambar untuk memperbesar).
3)
Baris dan Kolom
Desain dari sebuah halaman HTML seringkali
dikembangkan dengan menggunakan pembagian kolom, yang dikenal dengan nama grid system. Untuk mengakomodir hal ini, Bootstrap juga
memberikan fitur pembagian halaman ke dalam 12 kolom secara otomatis, dan
tentunya kita bebas menentukan lebar kolom yang diinginkan.
Adapun
class yang diberikan oleh Bootstrap untuk memasukkan elemen ke dalam kolom
ialah span[jumlahkolom], dengan nilai jumlahkolom adalah 1 sampai 12. Jadi, kita ingin membagi
halaman menjadi tiga kolom sama besar, kita dapat menggunakan tiga buah span4 dan mengisikan konten di dalam penampung span4 tersebut. Elemen-elemen kolom sendiri harus
ditampung di dalam sebuah class dengan nilai row. Singkatnya, dengan menggunakan Bootstrap, kita
dapat menyusun elemen-elemen halaman dalam baris dan kolom dengan rapi.
Untuk memudahkan pengertian, mari kita langsung
praktekkan saja dengan menambahkan elemen tiga kolom ke dalam
bootstrap.html! Tambahkan kode berikut tepat setelah </blockquote> pada bootstrap.html:1. <div class="row">
2. <div class="span4">
3. <h2>Kolom Pertama</h2>
4. <p>Kolom pertama pada baris pertama yang memiliki lebar 4.</p>
5. </div>
6. <div class="span4">
7. <h2>Kolom Kedua</h2>
8. <p>Kolom kedua pada baris pertama yang memiliki lebar 4.</p>
9. </div>
10. <div class="span4">
11. <h2>Kolom Ketiga</h2>
12. <p>Kolom ketiga pada baris pertama yang memiliki lebar 4.</p>
13. </div>
14. </div>
dan buka
bootstrap.html pada browser
untuk melihat bagaimana kita telah membagi isi dari konten pada baris tersebut
pada halaman web.
Selanjutnya, kita dapat menambahkan baris sebanyak yang diinginkan
untuk mengorganisasikan elemen-elemen halaman sesuai dengan kemauan kita. Misalnya,
kita dapat menambahkan baris baru dengan pembagian elemen yang berbeda setelah
kode di atas, seperti berikut:
1. <div class="row">
2. <div class="span8">
3. <h2>Kolom Pertama</h2>
4. <p>Kolom pertama baris kedua, yang memiliki lebar 8. Lorem ipsum dolor sit amet.
Lorem nec dapibus egestas sit cursus. Urna dictumst?</p>
5.
6. </div>
7. <div class="span4">
8. <h2>Kolom Kedua</h2>
9. <p>Kolom kedua baris kedua, yang memiliki lebar 4.</p>
10. </div>
11. </div>
Tentunya masih terdapat banyak fitur-fitur untuk menyusun elemen
pada Bootstrap, misalnya fitur responsive
design. Karena tulisan ini hanya merupakan pengenalan, kita
tidak akan mebahas fitur-fitur lain secara mendalam.
4)
Komponen Antarmuka
Selain penyusunan elemen konten dokumen web dengan
mudah, hal lan yang dibutuhkan oleh banyak pengembang web ialah
komponen-komponen antarmuka yang umum ditemui dalam sebuah website. Misalnya,
karena sebuah website dinamis telah menjadi hal yang lumrah, hampir semua
website sekarang akan membutuhkan elemen navigasi untuk membantu pengunjung
website menelusuri konten yang ada di dalam web. Sebuah tombol juga seringkali
kita temui, baik yang digunakan untuk navigasi maupun untuk hal-hal lainnya.
Untungnya, Bootstrap menyediakan banyak
komponen-komponen dasar yang dapat kita gunakan. Misalnya, untuk membuat menu
website, kita cukup menuliskan kode HTML sesuai dengan aturan yang diberikan
bootstrap pada dokumentasinya, dan
secara otomatis kita akan mendapatkan menu yang cukup bagus.
Mari kita coba lihat tampilan menu standar dari
Bootstrap. Tambahkan kode berikut tepat setelah
<body>:1. <div class="navbar">
2. <div class="navbar-inner">
3. <a class="brand" href="#">BootstrapTest</a>
4. <ul class="nav">
5. <li class="active"><a href="#">Utama</a></li>
6. <li><a href="#">Menu1</a></li>
7. <li><a href="#">Menu2</a></li>
8. </ul>
9. </div>
10. </div>
Contoh lain lagi, kita dapat menambahkan tombol dengan memberikan
class yang tepat pada elemen button.
Tambahkan kode berikut tepat setelah <h1>File HTML</h1>:1. <p>
2. Contoh tombol-tombol yang disediakan oleh Bootstrap:
3. </p>
4. <p>
5. <button class="btn btn-danger">Tombol Merah</button>
6. <button class="btn btn-primary">Tombol Biru</button>
7. <button class="btn btn-success">Tombol Hijau</button>
8. </p>
D.
Cara Belajar Bootstrap Untuk Pemula
Untuk memulai belajar Bootstrap,kita harus
mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar
tersebut. Baiklah langsung saja.
Persiapan:
1. Kita Harus memiliki file distribusi Bootstrap
Untuk
menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file
atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com.
Pada halaman tersebut, terdapat tombol Download Bootstrap sebagaimana terlihat
pada gambar diatas, langsung saja! klik tombol tersebut. Kemudian pilih lagi Download
Bootstrap
Setelah
didownload, kemudian extract menggunakan program seperti 7zip
(Gratis) atau winRAR (shareware).
Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows
dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke
folder lain.
2. Download jQuery Library
Untuk Bekerja Offline
Untuk
bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar
dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery
library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam
file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini
dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa
koneksi internet). Silahkan download jQuery library dengan menuju situs resmi jQuery
Download, pilih jQuery 1.x
kemudian, download dengan mengklik link Download the compressed,
production jQuery 1.11.1
3. Anda harus memiliki code editor.
Code
editor penting sekali untuk memanipulasi file yang akan kita kembangkan
khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada
bootstrap. Jangan pernah menggunakan Word processor (Microsoft Word, dll)
ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut
tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri
nantinya.
Ada
banyak sekali code editor yang tersebar di internet yang dapat kita gunakan
baik yang gratis maupun yang berbayar. Sebagai pemula, mungkin kita bisa memulai
dengan menggunakan Notepad++. Aplikasi ini gratis dan banyak digunakan oleh
developer. Download aplikasi Notepad++
Memulai...
Memulai...
Setelah semua dipersiapkan saatnya memulai untuk belajar
bootstrap. Baik, ikuti tahap-tahapnya berikut ini:
1. Buat Folder Baru
Buatlah
folder baru, beri nama misalkan "Belajar_Bootstrap".
2. Copy seluruh file
Bootstrap ke dalam Folder Baru Tersebut
Copy
folder css, fonts dan js yang ada pada Bootstrap
yang telah kita download tadi, ke dalam folder baru tersebut
(Belajar_Bootstrap)
3. Copy file jQuery ke dalam
folder js
Copy
dan Gabungkan file jquery-1.11.1.min.js yang telah kita
download kedalam folder js punya bootstrap tadi, hal ini dilakukan
untuk mempermudah proses pembelajaran.
4. Buat file html
Buat
file baru dengan notepadd++ kemudian copy code snippet yang saya sediakan
dibawah ini, kemudian save dan berilah nama seperti: index.html atau default.html
dan simpanlah file tersebut ke folder "Belajar_Bootstrap" yang telah
dibuat diatas. Berikut kodenya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3.3.0 Starter Template - by dul.web.id</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- AWAL CONTENT -- hapus dari sini kebawah (sampai AKHIR CONTENT) -->
<div class="container">
<h1>Apa Kabar Dunia?</h1>
<!-- Small modal -->
<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-
modal-sm">Klik Aku</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
class="sr-only">Close</span></button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
<div class="modal-body">
Hai... salam kenal dari<strong>dul</strong>. Jika dialog ini muncul dan Anda bisa
baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar</div>
</div>
</div>
</div>
</div>
<!-- AKHIR CONTENT - dari sini kebawah jgn dihapus -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
E.
KELEBIHAN DAN KELEMAHAN DARI BOOTSTRAP
a) Kelebihan bootstrap
1)
Tidak perlu harddisk, karena
dapat digantikan perannya oleh Ethernet card dan BOOT Lan Memiliki log file
sehingga dapat dilihat sewaktu-waktu penyebab error dengan melihat logfile
tersebut.
2)
Responsive Layout dan 12-column grid system.
Dengan Responsive Layout maka aplikasi web yang didesain dengan menggunakan
Bootstrap akan langsung menyesuaikan dengan lebar dari media perambahnya.
3)
tampilan web akan tetap rapi
dibuka dengan media apapun baik itu handphone, tablet, laptop ataupun PC
desktop.
Harus dilakukan secara manual sehingga resiko menimbulkan masalah
cukup besar. Pengiriman pesan yang tidak dapat diandalkan karena menggunakan
UDP. OS sekarang misalnya Windows sudah tidak memasukkan BOOTP dalam
konfigurasi jaringannya.
BAB III
PENUTUP
A.
KESIMPULAN
Bootstrap
merupakan suatu aplikasi dimana tampilan web akan tetap rapih dibuka dengan media apapun
baik itu seperti handphone, tablet, laptop ataupun PC desktop.
. Dengan memanfaatkan bootstrap, kita bisa dengan mudah membuat sebuah halaman
web yang responsive.dan dengan bootstrap kita juga bisa membangun web dinamis
ataupun statis.
Bootstrap memiliki kelebihan yaitu Tidak
perlu harddisk, karena dapat digantikan perannya oleh Ethernet card dan BOOT
Lan Memiliki log file sehingga dapat dilihat sewaktu-waktu penyebab
error dengan melihat logfile tersebut.adapun kelemahan dari bootstrap tersebut yaitu
Harus dilakukan secara manual sehingga resiko menimbulkan masalah cukup besar.
Pengiriman pesan yang tidak dapat diandalkan karena menggunakan UDP.
B.
SARAN
Segala bentuk aplikasi maupun data
dari bootstrap yang sudah ada semuanya sangat bermanfaat bagi kita, namun
beberapa orang yang belum mengenal lebih dalam tentang bootstrap. Adapun orang
yang tidak mengetahui bagaimana cara menggunakan bootstrap ini.dalam makalah
ini saya menuliskan bagaimana cara menggunakan nya.namun masih belum lengkap. Sebagai
penulis banyak harapan kepada kita semua untuk mengembangkan ilmu yang ada
untuk menghasilkan pemikiran-pemikiran yang baru.
DAFTAR PUSTAKA
Tidak ada komentar:
Posting Komentar