Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
Diterbitkan olehHamdani Dharmawijaya Telah diubah "7 tahun yang lalu
1
Modul 10 STMIK IKMI CIREBON Oleh Dita rizki amalia
2
Introduction to Bootstrap
Materi Pokok 1. Materi Pokok Introduction to Bootstrap
3
2. Pengantar Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan. Pengantar
4
3. Capaian Pembelajaran Mata Kuliah
Kemampuan dalam menggunakan Bootstrap Capaian Pembelajaran
5
4. Kemampuan Akhir Mahasiswa mampu menggunakan Bootsrap
6
5. Kegiatan Belajar a. Uraian dan Contoh 1) Tentang Bootstrap
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. Kegiatan Belajar
7
2) Cara sederhana untuk memahami prinsip penggunaan bootstrap a) Download bootstrap, untuk segmen kali ini saya coba dengan versi dist, ekstrak file ke dalam folder yang sudah kita sediakan. b) Open folder, karena disitu baru tersedia directory css, fonts, dan js, maka kita tambahkan index.html Kegiatan Belajar
8
2) Cara sederhana untuk memahami prinsip penggunaan bootstrap c) Isi file index.html dengan elemen sederhana atau elemen dasar html 5, seperti di bawah ini : Kegiatan Belajar
9
2) Cara sederhana untuk memahami prinsip penggunaan bootstrap d) Masukan bootstrap kedalam index.html dengan cara menambahkan sebuah link yang menuju ke directory css, sebagaimana berikut : Kegiatan Belajar
10
3) Cara menggunakan class css bootstrap Perlu kita ingat bahwa bootstrap menggunakan 12 grids dalam design templatenya, untuk membagi grids tersebut kita akan menggunakan span, namun untuk kasus ini kita akan coba terapkan pada 2 span yaitu : • Header • Navbar Dalam hal ini kita akan membuat sebuah navigasi, maka terlebih dahulu kita integrasikan index.html kita dengan css navbar dari bootstrap dengan cara menambahkan link untuk menuju ke directory- css-navbar dari bootstrap sebagaimana di bawah ini : <link href="navbar.css" rel="stylesheet"> Jadikan elemen paling bawah pada tag <head>…</head> Kegiatan Belajar
11
3) Cara menggunakan class css bootstrap Contoh :
Kegiatan Belajar
12
3) Cara menggunakan class css bootstrap Selanjutnya kita akan memasang sebuah navigasi dengan cara menambahkan beberapa kode dengan berkorelasi pada css navbar yang telah disediakan oleh bootstrap, dalam hal ini saya telah mengadobsi beberapa kode navbar yang telah disediakan oleh bootstrap. Letakan kode navbar di bagian paling bawah pada elemen <body>…</body> Kegiatan Belajar
13
3) Cara menggunakan class css bootstrap Contoh :
Kegiatan Belajar
14
3) Cara menggunakan class css bootstrap Contoh :
Kegiatan Belajar
15
4) Cara menggunakan koleksi icon pada bootstrap
Kegiatan Belajar
16
4) Cara menggunakan koleksi icon pada bootstrap <span class="glyphicon glyphicon-search"></span> Masih dengan index.html kita, sehingga perhatikan kode warna biru pada elemen ini : <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="./">Intermeso</a></li> </ul> </div><!--/.nav-collapse --> </div> </body> </html> Kegiatan Belajar
17
4) Cara menggunakan koleksi icon pada bootstrap Ganti dengan kode warna biru di bawah ini : <ul class="nav navbar-nav navbar-right"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star-empty"></span><a href="./">Intermeso</a> </button> </ul> </div><!--/.nav-collapse --> </div> Kegiatan Belajar
18
5) Cara mengintegrasikan Javascript di bootstrap Individu atau dikompilasi Plugin dapat dimasukkan secara individual menggunakan bootstrap.js atau bootstrap.min.js. Pada html sebelumnya kita telah memiliki sebuah menu dropdown akan tetapi belum aktif dikarenakan html kita belum terintegrasi dengan javascript dari bootstrap beserta jquery, coba perhatikan dibawah ini : Kegiatan Belajar
19
5) Cara mengintegrasikan Javascript di bootstrap Masih dengan index
5) Cara mengintegrasikan Javascript di bootstrap Masih dengan index.html kita sebelumnya, sehingga pada segmen kali ini kita akan mengintegrasikan sebuah javascript yang ada di directory dengan cara meletakan elemen javascript paling bawah pada tag <head>. Sebagaimana telah dijelaskan sebelumnya tentang dependensi plugin, maka untuk integrasi javascript bootstrap harus diiringi dengan integrasi javascript jQuery, jika salah satunya tidak ada maka plugin tidak akan bekerja. Sehingga dalam hal ini terlebih dahulu kita lengkapi directory js kita dengan cara download jQuery.js di sini , sehingga nampak seperti ini : Kegiatan Belajar
20
5) Cara mengintegrasikan Javascript di bootstrap Sekarang kita integrasikan index.html kita dengan menambahkan link, sebagaimana berikut ini : Kegiatan Belajar
21
Buatlah form menu dengan mengunakan bootstrap seperti berikut ini:
b. Latihan Buatlah form menu dengan mengunakan bootstrap seperti berikut ini: Kegiatan Belajar
22
c. Rangkuman Penggunaan bootstrap sekaligus menggabungkan tiga unsur bahasa pemrograman web yaitu: 1) HTML5 2) CSS 3) JavaScript Dengan adanya boostrap kita bisa memperindah tampilan dari web karena sudah berupa template yang lebih menarik. Kegiatan Belajar
23
Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya!
d. Tes formatif Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! Bootstrap css Kegiatan Belajar
24
Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya!
d. Tes formatif Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! Kode form.html Kegiatan Belajar
25
Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya!
d. Tes formatif Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! Kode form.html Kegiatan Belajar
26
Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya!
d. Tes formatif Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! Kode form.html Kegiatan Belajar
27
Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya!
d. Tes formatif Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! Kode form.html Kegiatan Belajar
28
e. Umpan Balik dan Tindak Lanjut
Mahasiswa mendengar, mencatat , dan mengerjakan latihan tentang Bootstrap. Kegiatan Belajar
29
6. Kunci Jawaban tes formatif
30
7. Referensi [1] Agung, Gregorius. , HTML5 + CSS 3, PT
7. Referensi [1] Agung, Gregorius., HTML5 + CSS 3, PT. Elex Media Komputindo, [2] Lee, Christopher, Mos Wonted CSS Tips and Triks, ANDI Yogyakarta, 2012 [3] Hidayatullah,Priyanto, Pemrograman Web. INFORMATIKA Bandung,2014 Referensi
Presentasi serupa
© 2024 SlidePlayer.info Inc.
All rights reserved.