Percantik Tampilan Web dengan CSS Framework Metro UI

 Di kesempatan kali ini , saya akan membahas sedikit tentang
mempercantik tampilan web kita dengan CSS Framework Metro UI . Metro UI sendiri merupakan salah satu jenis CSS Framework

yang merupakan pengembangan dari CSS
Framework Bootstrap .

Metro UI 

Nah , Metro UI mengusung tema seperti Windows 8 , jadi kita
bisa melihat Flat Design nya Windows 8 pada website kita jika menggunakan CSS
Framework ini . Hehehe

Berikut ini saya tampilkan beberapa tampilan yang ditawarkan oleh Metro UI :

Navigation Bar

Nah , gambar diatas merupakan contoh Navigation Bar yang ditawarkan oleh Metro UI .

Side Bar

  Kemudian selanjutnya merupakan Side Bar ...

Carousel

Window

Calendar

Nah beberapa gambar diatas merupakan beberapa tampilan yang bisa kita dapatkan dengan menggunakan Metro UI , jadi buat teman-teman yang berminat mempelajari Metro UI , atau mungkin ingin menambahkan beberapa fungsi tambahan dari Metro UI .

Silahkan mengunji :

http://metroui.org.ua/

Nah buat teman-teman , silahkan mencoba ... :D



Terima Kasih

Belajar Instalasi Bootstrap

Sedang pengen share cara penggunaan bootstrap di web , siapa tau bisa bermanfaat dan sekaligus buat bahan pengingat klo kapan-kapan lupa cara pakenya :D

Nah , langsung aja deh penjelasannya ...

Untuk menggunakan Bootstrap kita bisa menggunakan dengan 2 cara , yaitu :

1. Akses langsung ke internet.

Untuk cara yang satu ini sangat mudah dalam penggunaannya , tetapi kekurangnya kita harus terkoneksi ke internet karena kita mengakses file-file bootstrapnya secara langsung via Internet.

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

2. Download file nya dan kita akses melalui file lokal kita .

Cara yang kedua ini sedikit lebih ribet dari cara yang pertama , karena kita harus menyesuaikan projek kita dengan lokasi file bootstrap yang sudah kita download .

    Berikut ini akan saya coba sampaikan beberapa langkah-langkah yang kita perlukan untuk melakukan instalasi Bootstrap ke projek kita .

-   Download File Bootstrap di http://getbootstrap.com/getting-started/#download

Struktur file bootstrap

  - Buat file contoh , untuk mempermudah silahkan meniru contoh code HTML dibawah ini :

  - Selanjutnya simpan file kita di folder bootstrap yang barusan kita download , maka kurang lebih letaknya akan seperti ini :

index.html merupakan nama file yang barusan kita buat dengan menggunakan kode HTML diatas.   

Nah setelah dijalankan di browser , maka hasilnya kurang lebih akan seperti gambar dibawah :

 

Nah demikian , panduan singkat dari saya tentang panduan instalasi Bootstrap ke projek kita , untuk lebih dalam tentang Bootstrap silahkan teman-teman eksplorasi sendiri di Official Website nya :

http://getbootstrap.com/

Nah , demikian post dari saya tentang Instalasi Bootstrap nya , jika ada pertanyaan , kritik dan saran , silahkan disampaikan , jangan sungkan untuk menyampaikan pendapat

Terima Kasih .