TWITTER BOOTSTRAP
Twitter 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.
Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.
Situs web resmi twitter bootstrap http://getbootstrap.com/
SEJARAH BOOTSTRAP
Bootstrap diciptakan oleh 2 orang programmer di Twitter, yaitu Mark Otto dan Jacob Thornton pada tahun 2011. Saat itu para programer 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 tergerakuntuk menciptakan satu tool ataupun framework yang dapat digunakan bersama dilingkungan in ternal Twitter.
Sejak diluncurkan pada bulan Agustus 2011, Bootstrap telah berevolusi dari sebuah 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 merelease versi 2.0 yang didalamnya sudah memasukkan fitur responsive layout. Sejak itu, popularitas Bootstrap tak tertahankan lagi. Bootstrap merupakan project GitHub yang paling banyak dilihat dengan lebih dari 54.000 user dan juga yang paling banyak di copy (forked) yaitu sekitar 18.500 kali.
Sekarang banyak orang melayari internet melalui SmartPhone, seperti update status, upload gambar, dan tidak terkecuali mengakses sebuah website. Dengan banyaknya orang yang mengakses website melalui mobile device, secara automaticnya permintaan untuk dibuatkan website yang bersesuaian dengan berbagai-bagai device pun akan meningkat.
Dengan keadaan seperti itu, developer / pembina website mungkin akan ‘kebanjiran’ projek untuk membuatkan website yang dapat diakses oleh berbagai device (Android, Blackberry, IPhone, IPad, dan sebagainya). Untuk mengatasi masalah itu, maka munculah Responsive Web Design.
APAKAH ITU RESPONSIVE DESIGN?
Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device.
CARA MENGAKTIFKAN FITUR RESPONSIVE BOOTSTRAP
Berikut Template dasar HTML dengan Bootstrap
Pada skrip tersebut kita lihat bahwa pertama kita tambahkan satu meta data dengan nama viewport. Viewport adalah bagian dari sebuah alat (notebook, desktop PC, handphone, tablet, dsg) yang dapat menampilkan halaman web (window).
Meta tag viewport ini umumnya digunakan untuk mengatur tampilan browser pada mobile device dan juga tablet.
Pada tag content="width=device-width" untuk mengatur lebar tampilan awal browser disesuaikan dengan lebar layar mobile device.
Kemudian pada tag "initial-scale=1.0" untuk mengatur level zoom dari tampilan pada saat ditampilkan, semakin besar nilai initial-scale, semakin besar tampilanya (zoom in).
Selanjutnya, plugin javascript di Bootstrap membutuhkan jQuery. Oleh karena itu, link ke jQuery merupakan standart pada template HTML pada Bootstrap.
Mengapa link ke javascript diletakkan dibawah (pada bagian tag body) dengan tujuan untuk mempercepat browser dalam memproses halaman web, hal ini sesuai dengan rekomendasi dari http://developer.yahoo.com/performance/rules.html.
Berikut Skrip Template Dasar Bootstrap Responsive
Dengan menambahkan tag <link href="css/bootstrap-responsive.min.css">, maka sekarang template bootstrap sudah mempunyai fitur responsive. Karena masih sederhana hanya menampilkan teks Hello, World!, jadi belum terasa fitur responsive-nya.
Twitter 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.
Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.
Situs web resmi twitter bootstrap http://getbootstrap.com/
SEJARAH BOOTSTRAP
Bootstrap diciptakan oleh 2 orang programmer di Twitter, yaitu Mark Otto dan Jacob Thornton pada tahun 2011. Saat itu para programer 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 tergerakuntuk menciptakan satu tool ataupun framework yang dapat digunakan bersama dilingkungan in ternal Twitter.
Sejak diluncurkan pada bulan Agustus 2011, Bootstrap telah berevolusi dari sebuah 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 merelease versi 2.0 yang didalamnya sudah memasukkan fitur responsive layout. Sejak itu, popularitas Bootstrap tak tertahankan lagi. Bootstrap merupakan project GitHub yang paling banyak dilihat dengan lebih dari 54.000 user dan juga yang paling banyak di copy (forked) yaitu sekitar 18.500 kali.
Sekarang banyak orang melayari internet melalui SmartPhone, seperti update status, upload gambar, dan tidak terkecuali mengakses sebuah website. Dengan banyaknya orang yang mengakses website melalui mobile device, secara automaticnya permintaan untuk dibuatkan website yang bersesuaian dengan berbagai-bagai device pun akan meningkat.
Dengan keadaan seperti itu, developer / pembina website mungkin akan ‘kebanjiran’ projek untuk membuatkan website yang dapat diakses oleh berbagai device (Android, Blackberry, IPhone, IPad, dan sebagainya). Untuk mengatasi masalah itu, maka munculah Responsive Web Design.
APAKAH ITU RESPONSIVE DESIGN?
Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device.
CARA MENGAKTIFKAN FITUR RESPONSIVE BOOTSTRAP
Berikut Template dasar HTML dengan Bootstrap
Pada skrip tersebut kita lihat bahwa pertama kita tambahkan satu meta data dengan nama viewport. Viewport adalah bagian dari sebuah alat (notebook, desktop PC, handphone, tablet, dsg) yang dapat menampilkan halaman web (window).
Meta tag viewport ini umumnya digunakan untuk mengatur tampilan browser pada mobile device dan juga tablet.
Pada tag content="width=device-width" untuk mengatur lebar tampilan awal browser disesuaikan dengan lebar layar mobile device.
Kemudian pada tag "initial-scale=1.0" untuk mengatur level zoom dari tampilan pada saat ditampilkan, semakin besar nilai initial-scale, semakin besar tampilanya (zoom in).
Selanjutnya, plugin javascript di Bootstrap membutuhkan jQuery. Oleh karena itu, link ke jQuery merupakan standart pada template HTML pada Bootstrap.
Mengapa link ke javascript diletakkan dibawah (pada bagian tag body) dengan tujuan untuk mempercepat browser dalam memproses halaman web, hal ini sesuai dengan rekomendasi dari http://developer.yahoo.com/performance/rules.html.
Berikut Skrip Template Dasar Bootstrap Responsive
Dengan menambahkan tag <link href="css/bootstrap-responsive.min.css">, maka sekarang template bootstrap sudah mempunyai fitur responsive. Karena masih sederhana hanya menampilkan teks Hello, World!, jadi belum terasa fitur responsive-nya.
0 komentar:
Posting Komentar