Mempercantik Tampilan Web Dengan Ui Framework Twitter Bootstrap

Membuat website gampang-gampang susah, terutama ketika berurusan sama tampilan. Terkadang hampir sebagian besar waktu mengerjakan website kita habiskan di bab ini. Ya, berurusan dengan css dan html memang cukup menciptakan putus asa terutama ketika dikejar deadline. Namun aku rasa Framework yang satu ini sanggup mempermudah programmer dalam mempercantik webnya. namanya ialah Twitter Bootstrap.
Contoh halaman web yang memakai twitter bootstrap

Menurut Wikipedia, Twitter Bootstrap ialah sebuah alat bantu untuk menciptakan sebuah tampilan halaman website yang sanggup mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibentuk dengan alat bantu ini mempunyai tampilan halaman yang sama / seolah-olah dengan tampilan halaman Twitter atau desainer juga sanggup mengubah tampilan halaman website sesuai dengan kebutuhan.
Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang sanggup menciptakan 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 memakai JavaScript.

Penggunaannya pun cukup simpel dan sanggup dimodifikasi sesuai dengan harapan kita. Berikut beberapa langkah yang sanggup dicoba.
  • Download dan ekstrak twitter bootstrap dari situs resminya, klik disini.
  • Simpan pada direktori website yang kita buat. berikut struktur file dari twitter bootstrap:



  • Tambahkan twitter bootstrap pada bab header dari halaman website kita.
    <!DOCTYPE html> <html>   <head>     <title>Contoh Penggunaan Bootstrap/title>     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <!-- Bootstrap -->     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://code.jquery.com/jquery.js"></script>     <script src="js/bootstrap.min.js"></script>   </head>   <body>     <h1>Hello, world!</h1>   </body> </html>  
  • Selesai, kita sanggup pribadi memakai twitter bootstrap.
Berikut beberapa pola tampilan komponen html yang memakai framework ini:

Bagaimana? menarik dan bagus kan? ini salah satu modifikasi tampilan twitter bootstrap:

Silahkan kunjungi website resminya, disana tersedia semua petunjuk penggunaan, serta pola contoh yang lainnya. Happy Codding All.

Terima kasih sudah meluangkan waktu untuk mengunjungi blog ini.

Belum ada Komentar untuk "Mempercantik Tampilan Web Dengan Ui Framework Twitter Bootstrap"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel