Scribd Logo
Unggah

Selamat datang di Scribd!

  • Materi Twitter Bootstrap 2015

    Diunggah oleh

    Andy
    12 tayangan21 halaman

    Judul Asli

    materi twitter bootstrap 2015.pptx

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    12 tayangan21 halaman

    Materi Twitter Bootstrap 2015

    Diunggah oleh

    Andy

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 21

     tools yang memudahkan kita untuk membuat

    aplikasi web dengan menggunakan HTML dan


    CSS
     Sekumpulan abstraksi yang disediakan oleh
    pengembang framework untuk memberikan
    fungsionalitas umum dari aplikasi, yang
    kemudian dapat digunakan oleh pengguna
    framework untuk membangun sebuah
    aplikasi spesifik
     framework CSS dari Twitter, yang
    menyediakan kumpulan komponen-
    komponen antarmuka dasar pada web yang
    telah dirancang sedemikian rupa untuk
    digunakan bersama-sama
     Bootstrap juga menyediakan sarana untuk
    membangun layout halaman dengan mudah
    dan rapi, serta modifikasi pada tampilan
    dasar HTML untuk membuat seluruh halaman
    web yang dikembangkan senada dengan
    komponen-komponen lainnya
     SAVE TIME
    Mempercepat Pengerjaan Desain
     CUSTOMIZABLE
    Bisa diubah sesuai keinginan
     CONSISTENCY
    Sudah terdokumentasi dengan baik
     UPDATES
    Selalu ada update terbaru
     RESPONSIVE
    Bisa diakses dari mana saja
     Download Bootstrap pada website resminya
    (http://getbootstrap.com).
     Lakukan ekstraksi file zip hasil download, dan
     masukkan CSS Bootstrap pada file HTML
    anda.
    <html>
    <head>
    <title>Sebuah file HTML Sederhana</title>
    </head>
    <body>
    <div class="container">
    <h1>File HTML</h1>

    <p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser
    </i>.</p>

    <blockquote>
    Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar ketika h
    al tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
    <small>Lao Tzu</small>
    </blockquote>
    </div>
    </body>
    </html>

    Simpan file dengan nama bootstrap.html


     Buka website resmi
    Bootstrap, http://getbootstrap.com/, dan klik
    tombol “Download Bootstrap” untuk memulai
    download Bootstrap
     File Bootstrap:
     isi dari masing-masing direktori yaitu:
     Direktori “css
     Direktori “Fonts”
     Direktori “js”
    Buka file bootstrap.html dan tambahkan kode
    berikut sebelum baris (</head>):
    <link rel="stylesheet"
    href="css/bootstrap.css">
     Kita cukup “membungkus” elemen-elemen
    dokumen ke dalam sebuah div dengan
    atribut class bernilai container. Langsung
    saja, bungkus seluruh kode HTML yang ada di
    dalam body padabootstrap.html ke dalam
    elemen div, sehingga isi
    dari bootstrap.html menjadi seperti berikut:
    <html>
    <head>
    <title>Sebuah file HTML Sederhana</title>

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


    </head>
    <body>
    <div class="container">
    <h1>File HTML</h1>

    <p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser
    </i>.</p>

    <blockquote>
    Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar ketika h
    al tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
    <small>Lao Tzu</small>
    </blockquote>
    </div>
    </body>
    </html>
    Adapun class yang diberikan oleh
    Bootstrap untuk memasukkan elemen
    <div class="row"> ke dalam kolom ialahspan[lebar
    <div class="col-md-4"> kolom], dengan
    <h2>Kolom Pertama</h2> nilai jumlahkolom adalah 1 sampai 12
    <p>Kolom pertama pada baris pertama yang memiliki lebar 4.</p>
    </div>
    <div class="col-md-4">
    <h2>Kolom Kedua</h2>
    <p>Kolom kedua pada baris pertama yang memiliki lebar 4.</p>
    </div>
    <div class="col-md-4">
    <h2>Kolom Ketiga</h2>
    <p>Kolom ketiga pada baris pertama yang memiliki lebar 4.</p>
    </div>

    Tambahkan kode berikut tepat


    setelah </blockquote>
    Mari kita coba lihat tampilan menu
    standar dari Bootstrap. Tambahkan
    <nav class="navbar navbar-default navbar-fixed-top"> kode berikut tepat setelah <body>:
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-e
    xpanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>
    </div><!--/.nav-collapse -->
    </div>
    </nav>

    Anda mungkin juga menyukai