1 Membuat Tempelate Menggunkanan Boostrap Jihadul Akbar, S.Kom PUSTIK STMIK LOMBOK 3/30/20172 Tentang Modul Bootstrap adalah kerangka front-end yang p...
Tentang Modul Bootstrap adalah kerangka front-end yang paling populer dalam waktu terakhir. Sangat ringan, handal dalam membuat kerangka front-end mobile yang cepat dan pengembangan web lebih mudah. Menggunakan HTML, CSS dan Javascript. Modul ini akan mengajarkan Anda dasar-dasar Bootstrap yang Anda dapat gunakan untuk membuat proyek web dengan mudah. Modul ini dibagi menjadi beberapa bagian seperti Struktur dasar Bootstrap, CSS Bootstrap, Bootstrap Komponen Layout dan Bootstrap Plugins. Setiap Ulasan ini Mengandung bagian-bagian terkait topik dengan sederhana dan contoh yang berguna. Modul Ini Untuk Modul ini telah dipersiapkan untuk siapa saja yang memiliki pengetahuan dasar tentang HTML dan CSS dan memiliki dorongan untuk mengembangkan website. Setelah menyelesaikan modul ini Anda akan bisa mengembangkan proyek-proyek web menggunakan Twitter Bootstrap
Pendahuluan Apa itu Boostrap ? Bootstrap adalah HTML, CSS, dan kerangka JS yang paling populer untuk mengembangkan web responsif, mengutamakan agar website bisa diakses melalui pragakat mobile. Sejarah Bootstrap di buat dan dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter. Dirilis sebagai produk open source pada bulan Agustus 2011 pada GetHub. Kenapa harus menggunkanan Bootstrap ? 1. 2. 3. 4.
Pendekatan pertama pada perangkat Mobile Bowser Suport Mudah untuk di terapkan Responsive Design
Apa saja yang ada dalam paket Bootstrap ? 1. Sistem Kolom (Grid System) Dengan menggunkana struktur grid system memudahkan dalam membuat layout halaman website yang akan anda buat. 2. Cascading Style Sheet (CSS) Bootstrap hadir dengan fasilitas pengaturan global CSS. Pundamental HTML style dengan banyak kelas yang dapat digunakan untuk mengatur berbagai macam bagian. 3. Komponen Bootstrap memiliki banyak komponen yang dapat digunakan kembali untuk membangun halaman web memberikan icon, dropdown, navigasi, peringatan, pop-overs, dan lebih banyak. 4. JavaScript Bootstrap memiliki banyak fungsi
dari jQuery. Anda dapat dengan mudah
memasukkan semua, atau satu per satu. 5. Meyesuaikan Kita bisa mengembangakan CSS, Komponen dan Javascript sesuai dengan kebutuhan.
Persiapan Download Bootstrap Untuk mendapatkan bootstrap kita bisa download di http://getbootstrap.com/
Struktur File
Cara menambahkan Bootstrap pada halaman web Tambahkan link dibawah ini pada bagian tag head
Untuk menggunakan JavaScript bootstrap, kita harus menambahkan jQuery terlebih dahulu baru kita menambah Javascript bawaan dari Bootstrap. Karna dalam paket boostrap tidak termasuk Jquery maka kita harus download terlebih dahulu pada link https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
Dan simpan di dalam direktori bootstrap/js/ . Tempat penaruhan dari JavaScript adalah sebelum bagian akhir tag body <script src="js/jquery.min.js"> <script src="js/bootstrap.min.js">
Membuat tempelate sederhana <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> Menggunakan Boostrap CSS
Membuat Form <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> Membuat Form <script src="js/jquery.min.js"> <script src="js/bootstrap.min.js">
Hasilnya adalah
Membuat Tombol <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> Membuat Tombol <script src="js/jquery.min.js"> <script src="js/bootstrap.min.js">
Hasilnya adalah :
Membuat Menu <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> Membuat menu <script src="js/jquery.min.js"> <script src="js/bootstrap.min.js">
Hasilnya adalah
Membuat Halaman Profil Dengan Booststrap File Profil <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
Perkenalkan Saya
Saya Adalah Jihadul Akbar
Saya Adalah ?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
