Apa itu Bootstrap???
Cara Mendownload Bootstrap
Hingga saat ini Bootstrap sudah merilis versi 4, tetapi masih versi alpha. Untuk versi yang stabil, Bootstrap v3.3.7 dapat di download secara gratis melalui website resminya di http://getbootstrap.com/getting-started/#download. Untuk download file Bootstrap, pilih tombol download yang paling kiri (seperti gambar dibawah)
Besar file bootstrap dalam bentuk zip sekitar 360KB. Setelah selesai download, ekstrak filenya, seharusnya terdapat tiga folder yaitu css, js dan fonts. Lebih jelasnya list file yang terdapat dalam folder/direktori bootstrap seperti gambar dibawah ini:
Mengintegrasikan Bootstrap dengan jQuery
Untuk menggunakan bootstrap kita terlebih dahulu harus mendownload jQuery karena komponen-komponen bootstrap seperti navigasi, modal, dropdown menu, dan lain sebagainya berjalan dengan menggunakan jQuery. jQuery dapat di download di situs resminya http://jquery.com/download/
Di sini saya download jQuery versi v3.2.0, simpan filenya di direktori bootstrap atau pada folder JS, sehingga susunan direktori bootstrap setelah di tambahkan file jQuery seperti gambar berikut:
Cara menggunakan Bootstrap
Untuk menggunakan Bootstrap maka file CSS bootstrap harus kita panggil terlebih dahulu di dalam dokumen HTML dan di letakkan sebelum tag „head tutup‟ ataupun </head> dan file jQuery, javascript kita tempatkan sebelum „body tutup‟ atau </body>.Sebenarnya file javascript tidak masalah di letakkan sebelum tag </head> tetapi, saya sarankan diletakkan sebelum tag </body> untuk meningkatkan waktu respon website (performance). Ketika website ditampilkan maka sebaiknya konten html yang di render terlebih dahulu baru kemudian file javascript sehingga ketika waktu tunggu/load file javascript, memungkinkan pengunjung melihat konten yang disediakan dalam website.
Contoh Penggunaan bootstrap seperti kode berikut ini:
Cara Menjalankan Bootstrap
Untuk melihat hasil atau menjalankan file bootstrap adalah dengan menggunakan browser
(IE, Mozilla, Chrome, dll). Caranya dengan mengklik 2x pada file dokumen html yang
sudah di buat. Hasilnya di browser adalah sebagai berikut:
Sumber : E-Book Roberto Kaban
Desain Website Responsive dengan Bootstrap
Bootstrap merupakan sebuah framework CSS yang yang paling banyak diminati oleh para developer website. Dengan menggunakan bootstrap kita dengan mudah dapat mendesign tampilan website yang responsif. Responsif maksutnya, lebar halaman website akan disesuaikan secara otomatis berdasarkan perangkat yang digunakan untuk mengaksesnya, baik itu ketika diakses menggunakan PC, Laptop, Tablet ataupun Smartphone maka website akan menyesuaikan dengan lebar perangkat yang di gunakan pengunjung.
Dalam mendesign layout, bootstrap menyediakan fitur grid(12 grid). Grid ini ibarat kolom dalam sebuah tabel, kita dapat membagi-bagi layout sebuah halaman website menjadi beberapa bagian dengan mudah dan cepat. Selain kemampuan menghasilkan tampilan website yang responsif, bootstrap juga menyediakan class-class CSS yang sudah terintegrasi dengan javascript dan jQuery.
Jadi untuk merancang design form, membuat button/tombol, Navigasi, Dropdown Menu, membuat Modal, membuat Carousel ataupun slider content, dan lain sebagainya maka tinggal di panggil class-class yang sudah disediakan sehingga mempermudah kita untuk menciptakan website yang memiliki design menarik(terkini), profesional dan ringan ketika di akses. Salah satu sosial media yang menggunakan framework CSS bootstrap adalah Twitter karena Bootstrap sebenarnya dibuat oleh pengembang twitter dan awalnya bootstrap juga dikenal dengan sebutan “Bootstrap Twitter”
Dalam mendesign layout, bootstrap menyediakan fitur grid(12 grid). Grid ini ibarat kolom dalam sebuah tabel, kita dapat membagi-bagi layout sebuah halaman website menjadi beberapa bagian dengan mudah dan cepat. Selain kemampuan menghasilkan tampilan website yang responsif, bootstrap juga menyediakan class-class CSS yang sudah terintegrasi dengan javascript dan jQuery.
Jadi untuk merancang design form, membuat button/tombol, Navigasi, Dropdown Menu, membuat Modal, membuat Carousel ataupun slider content, dan lain sebagainya maka tinggal di panggil class-class yang sudah disediakan sehingga mempermudah kita untuk menciptakan website yang memiliki design menarik(terkini), profesional dan ringan ketika di akses. Salah satu sosial media yang menggunakan framework CSS bootstrap adalah Twitter karena Bootstrap sebenarnya dibuat oleh pengembang twitter dan awalnya bootstrap juga dikenal dengan sebutan “Bootstrap Twitter”
Cara Mendownload Bootstrap
Hingga saat ini Bootstrap sudah merilis versi 4, tetapi masih versi alpha. Untuk versi yang stabil, Bootstrap v3.3.7 dapat di download secara gratis melalui website resminya di http://getbootstrap.com/getting-started/#download. Untuk download file Bootstrap, pilih tombol download yang paling kiri (seperti gambar dibawah)
Besar file bootstrap dalam bentuk zip sekitar 360KB. Setelah selesai download, ekstrak filenya, seharusnya terdapat tiga folder yaitu css, js dan fonts. Lebih jelasnya list file yang terdapat dalam folder/direktori bootstrap seperti gambar dibawah ini:
Mengintegrasikan Bootstrap dengan jQuery
Untuk menggunakan bootstrap kita terlebih dahulu harus mendownload jQuery karena komponen-komponen bootstrap seperti navigasi, modal, dropdown menu, dan lain sebagainya berjalan dengan menggunakan jQuery. jQuery dapat di download di situs resminya http://jquery.com/download/
Di sini saya download jQuery versi v3.2.0, simpan filenya di direktori bootstrap atau pada folder JS, sehingga susunan direktori bootstrap setelah di tambahkan file jQuery seperti gambar berikut:
Cara menggunakan Bootstrap
Untuk menggunakan Bootstrap maka file CSS bootstrap harus kita panggil terlebih dahulu di dalam dokumen HTML dan di letakkan sebelum tag „head tutup‟ ataupun </head> dan file jQuery, javascript kita tempatkan sebelum „body tutup‟ atau </body>.Sebenarnya file javascript tidak masalah di letakkan sebelum tag </head> tetapi, saya sarankan diletakkan sebelum tag </body> untuk meningkatkan waktu respon website (performance). Ketika website ditampilkan maka sebaiknya konten html yang di render terlebih dahulu baru kemudian file javascript sehingga ketika waktu tunggu/load file javascript, memungkinkan pengunjung melihat konten yang disediakan dalam website.
Contoh Penggunaan bootstrap seperti kode berikut ini:
 | ||||
Untuk melihat hasil atau menjalankan file bootstrap adalah dengan menggunakan browser
(IE, Mozilla, Chrome, dll). Caranya dengan mengklik 2x pada file dokumen html yang
sudah di buat. Hasilnya di browser adalah sebagai berikut:
Selamat mencoba
Desain Website Responsive dengan Bootstrap
No comments:
Post a Comment