selamat datang diblog afi

Kamis, 30 Juni 2016

Bootstrap Tutorial & Tools list

Assalamualaikum Wr.Wb
Selamat sore, pada kesempatan kali saya akan membahas tentang boostrap. Bagi kalian yang belum tahu apa itu boostrap, kegunaan boostrap, hasil yang diperoleh dari belajar boostrap, dan masih banyak lagi mengenai boostrap. Sebelum kita bicara lebih jauh, kita harus tahu apa itu boostrap. Cekidot !!!
A. Pengertian Boostrap
Bootstrap adalah sebuah front-end framework web gratis dan open-source untuk merancang situs web dan aplikasi web. Ini berisi HTML- dan desain berbasis CSS template untuk tipografi, bentuk, tombol, navigasi dan komponen antarmuka lainnya, serta ekstensi JavaScript opsional. Tidak seperti banyak kerangka web, menyangkut dirinya dengan pembangunan front-end saja.
B. Latar Belakang:
Bootstrap diciptakan oleh dua orang programmer di Twitter, yaitu mark octo dan jacob thornton pada tahun 2011, pada sat itu para programmer di Twitter menggunakan berbagai macam tool dan library yang mereka kenal dan suka untuk melaksanakan pekerjaan mereka, sehingga tidak ada standarisasi dan akibatnya sulit untuk dikelola sehingga Mark Otto dan jacob Thornton bergerak untuk menciptakan satu tool ataupun framework yang dapat digunakan bersama di ingkungan internal twitter.

Oleh karena faktor hostoris tersebut, walaupun nama resmi hanyalah Bootstrap namun terkenal di kalangan developer sebagai Twitter Bootstrap.

Sejak diluncurkan pada bulan Agustus 2011, Bootstrap telah berevolusi dari proyek yang hanya berbasis CSS menjadi sebuah tool ataupun framework yang lebih lengkap yang juga berisi javascript Plugin, Icon, Forms, dan Button.

Pada januari 2012, Bootstrap merealease versi 2.0 yang didalamnya sudah memasukkan fitur responsive layout, sejak itu popularitas Bootstrap tak tertahankan lagi dan sampai saat ini Bootstrap merupakan projek GitHub yang paling  banyak di copy (forked) yaitu seitar18.500 kali 


C. Alat & Bahan:
  • Pc Laptop
  • Text Editor
  • Browser
D. Sebelum kalian mempelajari boostrap lebih jauh, kalian harus paham betul mengenai boostrap. Kalian dapat mempelajari boostrap lebih jauh dengan mengunjungi link referensi berikut :


Interactive Tutorial
Blog about bootstrap 
Bootstrap in bahasa Indonesia 
Bootstrap Video Series 

Bootstrap Resources


E. Hasil dan Kesimpulan
     Bootstrap alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website.

Semoga informasi di atas bisa membantu kalian saat kesulitan  dalam belajar Bootstrap. Sekian semoga bermanfaat dan terimakasih.
Wassalamualaikum Wr.Wb
No comments

Rabu, 29 Juni 2016

Pengertian Dan Cara Menggunakan Bootstrap

Assalamu'alaikum Wr.Wb

Kali ini saya akan membagi sedikit tutorial tentang cara menggunakan bootstrap

A. Pengertian Dan Cara Menggunakan Bootstrap

     Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembangan front-end website. bootstrap merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer. pada saat ini hampir semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat tombol, grid, navigasi dan lainnya.

B. Latar Belakang
 
     Bootstrap telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang menggunakan bootstrap yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.

C. Alat dan Bahan
  • Laptop
  • CSS Bootstrap 
D. Maksud dan Tujuan

     interface twitter di bangun dengan menggunakan bootstrap. Bootstrap berisi kumpulan class yang siap pakai. misalnya anda ingin membuat sebuah tombol dengan cepat dan tana harus merancang dan mengetikkan syntax css untuk membuat sebuah tombol, maka dengan bootstrap anda dapat membuatnya dengan sangat cepat, yaitu hanya dengan menambahkan class “btn”

E. Tahapan Pelaksanaan Kegiatan

1. Membuat Table Dengan Bootstrap








 2. Membuat Tampil Gambar dengan Bootstrap





 3. Membuat Tombol dengan Bootstrap

 4. Membuat Jumbroton dengan Bootstrap

 5. Membuat Pesan Alert dengan Bootstrap



 6. Membuat Icon dengan Bootstrap

 7. Membuat Pagination dengan Bootstrap

 8. Membuat Breadcrumb dengan Bootstrap

 9. Membuat List dengan Bootstrap





 10. Membuat Panel dengan Bootstrap



F. REFERENSI
http://www.malasngoding.com/ 
https://en.wikipedia.org/ 

G. Hasil dan Kesimpulan

     Adapun beberapa kelebihan bootstrap adalah sebagai berikut:
  • Penggunaan bootstrap sangat menghemat waktu.
  • Tampilan bootstrap yang sudah cukup terlihat modern.
  • Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet dan smartphone.
  • Sangat ringan karena bootstrap di buat dengan sangat terstruktur.
  • Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan bantuan framework css bootstrap.
Sekian dari saya semoga bermanfaat,
Wassalamu'alaikum Wr.Wb
No comments

Pengertian Dan Cara Menggunakan Bootstrap

Assalamu'alaikum Wr.Wb.

Kali ini saya akan membagi sedikit tutorial tentang cara menggunakan bootstrap

A. Pengertian Dan Cara Menggunakan Bootstrap

     Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembangan front-end website. bootstrap merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer. pada saat ini hampir semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat tombol, grid, navigasi dan lainnya.

B. Latar Belakang
 
     Bootstrap telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang menggunakan bootstrap yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.

C. Alat dan Bahan
  • Laptop
  • CSS Bootstrap 
D. Maksud dan Tujuan

     interface twitter di bangun dengan menggunakan bootstrap. Bootstrap berisi kumpulan class yang siap pakai. misalnya anda ingin membuat sebuah tombol dengan cepat dan tana harus merancang dan mengetikkan syntax css untuk membuat sebuah tombol, maka dengan bootstrap anda dapat membuatnya dengan sangat cepat, yaitu hanya dengan menambahkan class “btn”

E. Tahapan Pelaksanaan Kegiatan

1. Membuat Table Dengan Bootstrap








 2. Membuat Tampil Gambar dengan Bootstrap





 3. Membuat Tombol dengan Bootstrap

 4. Membuat Jumbroton dengan Bootstrap

 5. Membuat Pesan Alert dengan Bootstrap



 6. Membuat Icon dengan Bootstrap

 7. Membuat Pagination dengan Bootstrap

 8. Membuat Breadcrumb dengan Bootstrap

 9. Membuat List dengan Bootstrap





 10. Membuat Panel dengan Bootstrap



F. REFERENSI
http://www.malasngoding.com/ 
https://en.wikipedia.org/ 

G. Hasil dan Kesimpulan

     Adapun beberapa kelebihan bootstrap adalah sebagai berikut:
  • Penggunaan bootstrap sangat menghemat waktu.
  • Tampilan bootstrap yang sudah cukup terlihat modern.
  • Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet dan smartphone.
  • Sangat ringan karena bootstrap di buat dengan sangat terstruktur.
  • Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan bantuan framework css bootstrap.
Sekian dari saya semoga bermanfaat,
Wassalamu'alaikum Wr.Wb
No comments