Scribd Logo
Unggah

Selamat datang di Scribd!

  • Bootstrap

    Diunggah oleh

    SelimJr
    19 tayangan5 halaman
    Tugas Pendahuluan

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Tugas Pendahuluan

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    19 tayangan5 halaman

    Bootstrap

    Diunggah oleh

    SelimJr
    Tugas Pendahuluan

    Hak Cipta:

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

    1.

    Pengertian Bootstrap
    Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun
    tampilan web. Bootstrap merupakan framework untuk membangun desain web secara responsif.
    Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser
    yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan
    ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri.

    2. Cara Install/ Menggunakan Bootstrap


    Persiapan :
    Download file distribusi bootstrap dan library jQuery
    Memasukkan library jQuery ke folder js dalam folder bootstrap
    Penggunaan :
    Buat folder baru
    Copy seluruh isi folder bootstrap ke dalam folder tersebut
    Buat file html dan mulai membuat program yang diinginkan

    3. Contoh Program
    File html :
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Program Sederhana</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    </head>
    <body>
    <div class="container">
    <h1>Selamat Datang</h1>
    <button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik disini</button>
    <div
    class="modal
    fade
    bs-example-modal-sm"
    labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">

    tabindex="-1"

    role="dialog"

    aria-

    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span
    class="sr-only">Close</span></button>
    <h4 class="modal-title" id="mySmallModalLabel">Salam</h4>
    </div>
    <div class="modal-body">
    Terima kasih telah mengunjungi website saya
    </div>
    </div>
    </div>
    </div>
    </div>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

    Tampilan di Browser :

    4. Contoh Form dengan Bootstrap


    File HTML
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Form Register Sederhana dengan Bootstrap</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="bs-example">
    <h1>Register</h1>
    <form class="form-horizontal">
    <div class="form-group">
    <label class="control-label col-xs-3" for="inputEmail">Email:</label>
    <div class="col-xs-9">
    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    </div>
    <div class="form-group">
    <label class="control-label col-xs-3" for="inputPassword">Kata Sandi:</label>
    <div class="col-xs-9">
    <input type="password" class="form-control" id="inputPassword" placeholder="Masukan Kata Sandi">
    </div>
    </div>
    <div class="form-group">
    <label class="control-label col-xs-3" for="Nama">Nama:</label>
    <div class="col-xs-9">
    <input type="text" class="form-control" id="Nama" placeholder="Nama Anda">
    </div>
    </div>
    <div class="form-group">
    <label class="control-label col-xs-3" for="telp">No. Telp:</label>
    <div class="col-xs-9">
    <input type="tel" class="form-control" id="telp" placeholder="Nomor Telepon / Handphone">
    </div>
    </div>
    <div class="form-group">
    <label class="control-label col-xs-3">Tanggal Lahir</label>
    <div class="col-xs-3">
    <select class="form-control">
    <option>Tanggal</option>
    </select>
    </div>
    <div class="col-xs-3">
    <select class="form-control">
    <option>Bulan</option>
    </select>
    </div>
    <div class="col-xs-3">
    <select class="form-control">

    <option>Tahun</option>
    </select>
    </div>
    </div>
    <div class="form-group">
    <label class="control-label col-xs-3" for="Alamat">Alamat:</label>
    <div class="col-xs-9">
    <textarea rows="3" class="form-control" id="Alamat" placeholder="Masukan Alamat
    Lengkap"></textarea>
    </div>
    </div>
    <div class="form-group">
    <label class="control-label col-xs-3" for="KodePos">Kode Pos:</label>
    <div class="col-xs-9">
    <input type="text" class="form-control" id="KodePos" placeholder="Kode Pos">
    </div>
    </div>
    <div class="form-group">
    <label class="control-label col-xs-3">Jenis Kelamin:</label>
    <div class="col-xs-2">
    <label class="radio-inline">
    <input type="radio" name="gender" value="Laki-laki"> Laki-laki
    </label>
    </div>
    <div class="col-xs-2">
    <label class="radio-inline">
    <input type="radio" name="gender" value="Perempuan"> Perempuan
    </label>
    </div>
    </div>
    <div class="form-group">
    <div class="col-xs-offset-3 col-xs-9">
    <label class="checkbox-inline">
    <input type="checkbox" value="Setuju"> Saya Setuju dengan <a href="#">Kebijakan dan
    Ketentuan</a> yang berlaku.
    </label>
    </div>
    </div>
    <br>
    <div class="form-group">
    <div class="col-xs-offset-3 col-xs-9">
    <input type="submit" class="btn btn-primary" value="Kirim">
    <input type="reset" class="btn btn-default" value="Reset">
    </div>
    </div>
    </form>
    </div>
    </body>
    </html>

    Tampilan di Browser :

    Anda mungkin juga menyukai