Scribd Logo
Unggah

Selamat datang di Scribd!

  • Bootstrap

    Diunggah oleh

    jms bone
    36 tayangan12 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPT, 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 PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    36 tayangan12 halaman

    Bootstrap

    Diunggah oleh

    jms bone

    Hak Cipta:

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

    Pertemuan 5

    Bootstrap
    Tim Dosen – TI – USD
    Apa itu Bootstrap
     Bootstrap merupakan framework open source
    yang diciptakan oleh Mark Otto dan Jacob
    Thornton dari Twitter (2011) disebut Twitter
    Blueprint.

     Bootstrap merupakan framework HTML, CSS, dan


    JavaScript yang berfungsi untuk mendesain front
    end sebuah website responsive dengan cepat dan
    mudah.

     Bootstrap menyediakan desain template dari


    komponen-omponen html seperti typography,
    forms, buttons, tables, navigation, modals, image
    carousels, dll. Juga temasuk JavaScript plugins.
    Responsive Web

     Mendesain sebuah halaman web yang responsive


    adalah mendesain halaman web yang mampu
    menyesuaikan diri agar dapat tampil dengan baik di
    semua piranti dari smartphone yang kecil hingga
    computer Desktop dengan layar besar.
    Versi Bootstrap
     Bootstrap 5 merupakan versi terbaru dengan
    komponen-komponen baru, stylesheet lebih
    cepat dan lebih responsive.

     Bootstrap 5 mendukung semua browser dan


    platform utama. Khusus Internet Explorer 11
    dan versi yang lebih rendah tidak mendukung.
    Why Bootstrap?
    1. Menciptakan website Mobile Friendly 
    Dengan sistem grid, proses membuat website mobile friendly tidak
    membutuhkan waktu lama.
    2. Memudahkan resize gambar
    Dengan menambahkan class .img-responsive ke gambar, maka gambar
    tersebut akan otomatis di-resize sesuai ukuran layar pengguna.
    3. Mudah menambahkan elemen website
    Bootstrap menyediakan berbagai elemen yang bisa langsung Anda gunakan
    di website. Misalnya, navigasi, menu dropdown, thumbnail, dan sebagainya.
    4. Membuat website lebih interaktif
    Bootstrap memungkinkan menggunakan plugin custom JQuery. Misal
    menambahkan berbagai elemen interaktif seperti popup, transisi, image
    carousel, dan sebagainya.
    Using Bootstrap
    1. Gunakan HTML5 doctype

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Bootstrap 5
    Example</title>
    Example
        <meta charset="utf-8">
      </head>
    <body>

    </body>
    </html>
    Using Bootstrap
    2. Bootstrap 5 is mobile-first

    <head>
    <meta name="viewport" content="width=device-
    width, initial-scale=1">
    </head>

    width=device-width  lebar halaman mengikuti lebar layar

    initial-scale=1  ketika diload pertama kali


    menggunakan zoom 1x
    Using Bootstrap
    3. Include Bootstrap on your Page (using CDN)
    <head>
    <!-- Latest compiled and minified CSS -->
    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.
    1.1/dist/css/bootstrap.min.css"
    rel="stylesheet">

    <!-- Latest compiled JavaScript -->


    <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.1
    .1/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    Using Bootstrap
    3. Include Bootstrap on your Page (using local file)
    Download Bootstrap 5 from getbootstrap.com

    Extractthe zip-file
    Include bootstrap css file and javascript file on HTML Doc.
    Using Bootstrap

    4. Gunakan Container
    Gunakan Container untuk membungkus isi dari web.

    Ada 2 class container yang bisa digunakan, antara lain:


    1..container  fix width container
    2..container–fluid  full width container
    Basic HTML
    Bootstrap is ready to use!
     Gunakan komponen HTML sesuai dengan kebutuhan dan
    gunakan kelas (class) CSS yang sesuai.

     Lihat w3schools.com untuk berbagai komponen yang


    bisa digunakan.

    Anda mungkin juga menyukai