• Solo Great Sale

    Solo Great Sale Powered By Circle Card 2015

  • Solo Great Sale

    Solo Great Sale Powered By Circle Card 2015

  • Oracle Java Magazine

    As Cover of Oracle Java Magazine March/April 2012 issue

  • Launching jDuchess Indonesia

    Gunadarma University 2011

    www.jduchess.or.id

  • Launching jDuchess Indonesia

    Gunadarma University 2011

    www.jduchess.or.id

  • Launching Java 7

    Binus University 2011

  • Eclipse Democamp

    Microsoft Indonesia 2011

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Launching JENI 2.0

    ITB Bandung 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Java and Android Roadshow

    SMK PGRI 3 Malang 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Launching JENI 2.0

    ITB Bandung 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2011

  • Java and Android Roadshow

    SMK Plus Darussalam Kediri 2012

  • Oracle Academy Seminar

    LIKMI Bandung, 2012

  • Oracle Academy Seminar

    Indonesia University, 2012

  • Seminar Android

    Universitas Budi Luhur 2010

  • Java and Android Roadshow

    SMK Hasan Kafrawi Jepara 2012

  • Sosialisasi Kurikulum 2013

    LPMP Surabaya 2013

  • IOSA

    Indonesia Open Source Award 2011

  • Java Training

    SMKN 02 Sukabumi 2010

  • Sosialisasi Kurikulum

    SMKN 01 Tulungagung 2011

  • Sosialisasi Kurikulum 2013

    LPMP Surabaya 2013

Monday, January 14, 2013

Posted by Netty Herawaty
| 10:20 PM
Twitter Bootstrap adalah toolkit atau alat bantu untuk membangun web aplikasi secara cepat baik mempercepat pekerjaan developer web ataupun designer web. Sesuai namanya, web yang dibuat dengan Twitter Bootstrap ini memiliki tampilan halaman yang sama atau mirip dengan layout Twitter. Twitter Bootstrap dibangun dengan teknologi HTML, CSS, LESS dan Javascript.


Bagaimana cara menggunakan Twitter Bootstrap ?

1. Download Bootstrap disini.

2. Simpan di direktori Anda kemudian ekstrak folder bootstrap yang telah diunduh
Struktur foldernya seperti gambar dibawah ini


3. Memanggil Bootstrap CSS
Ada dua cara untuk menggunakan Twitter Bootstrap di HTML :

a. Memanggil CSS Bootstrap dengan menambahkan baris berikut sebelum </head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

b. Memanggil LESS Bootstrap (CSS Prepocessor yang digunakan untuk mempercepat dan mempermudah web development) dengan menambahkan baris dibawah ini
<link rel="stylesheet/less" href="/bootstrap/less/bootstrap.less">

4. Memanggil Bootstrap Javascript
Javascript dan CSS dalam Bootstrap merupakan suatu kesatuan untuk membuat sebuah desain web yang menarik dan interaktif. Untuk memanggilnya Javascript Bootstrap dapat menambahkan baris dibawah ini
<script src=”/bootstrap/js/bootstrap.js”></script>

Sehingga struktur basic HTML templatenya seperti dibawah ini
<!DOCTYPE html>

<html>

  <head>

    <title>Twitter Bootstrap</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

  </head>

  <body>

    <h1>Hello, world!</h1>

    <script src="http://code.jquery.com/jquery.js"></script>

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>




Reactions: