Scribd Logo
Unggah

Selamat datang di Scribd!

  • Laporan Praktikum Web I Bootstrap

    Diunggah oleh

    Darmuji
    205 tayangan6 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

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

    Laporan Praktikum Web I Bootstrap

    Diunggah oleh

    Darmuji

    Hak Cipta:

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

    Laporan Praktikum Web I Bootstrap

    Dosen Pembimbing:
    Dinar Nugroho Pratomo, S.Kom., M.IM., M.Cs.

    Disusun Oleh :
    Alief Rahman
    20/457255/SV/17702

    D4 Teknologi Rekayasa Perangkat Lunak


    Departemen Teknik Elektro dan Informatika
    Sekolah Vokasi
    Universitas Gadjah Mada
    2020
    1. Bootstrap
    Bootstrap merupakan sebuah library framework CSS yang telah dibuat khusus untuk
    mengembangkan front end sebuah website. yang pasti bootstrap digunakan untuk
    mengembangkan website agar lebih responsive. Dengan adanya bootstrap tersebut tentu saja
    membuat halaman website bisa menyesuaikan dengan ukuran monitor device. Baik jika
    diakses lewat ponsel, tablet ataupun desktop. Awal mulanya, bootstrap sendiri bernama
    Twitter Blueprint. Sebagai pengguna Anda hanya perlu memanggil setiap kelas yang
    digunakan, contohnya seperti navigasi, tabel, grind, tombol atau sebagainya. Banyak fungsi
    bootstrap yang bisa dipakai untuk sebuah website.

    Apa saja yang ada dalam Bootstrap?


    1. Sistem Kolom (Grid System)
    Dengan menggunakan struktur grid system memudahkan dalam membuat layout halaman
    website yang akan anda buat.
    2. Cascading Style Sheet (CSS)
    Bootstrap hadir dengan fasilitas pengaturan global CSS. Fundamental HTML style
    dengan banyak kelas yang dapat digunakan untuk mengatur berbagai macam bagian.
    3. Komponen
    Bootstrap memiliki banyak komponen yang dapat digunakan kembali untuk membangun
    halaman web memberikan icon, dropdown, navigasi, peringatan, pop-overs, dan lebih
    banyak.
    4. JavaScript
    Bootstrap memiliki banyak fungsi dari jQuery. Anda dapat dengan mudah memasukkan
    semua, atau satu per satu.
    1. Cara menambahkan Bootstrap
    Cara mendapatkan bootstrap salah satunya yaitu dengan mendownload source code bootstrap
    di situs resminya getbootstrap.com yang disediakan oleh bootstrap secara gratis untuk
    diunduh oleh siapa saja. Selain itu juga dapat melakukan copy-paste tag stylesheet <link>
    yang ada pada situs resmi ke dalam tag <head> sebelum anda memanggil file CSS lain.
    A. Menambahkan Bootstrap
    Pada baris ke-8 contoh memanggil bootstrap pada HTML yang bisa di ambil dari web aslinya
    Bootstrap https://getbootstrap.com/docs/5.0/getting-started/introduction/. Fungsi bootstrap dari
    code tersebut bisa lihat pada perbedaan berikut

    Nah berikut contoh dari perbedaan tidak menggunakan bootstrap yang di dikiri. Fungsi
    bootstrap adalah untuk mengatur kembali letak CSS pada web. Maka dari itu bootstrap sangat
    berguna untuk membuat suatu web. Dan agar bisa membuat jarak antara header dan body pada
    web bisa menggunakan <div class=”row”> maka akan diberi jarak seperti di gambar. Dan untuk
    memanggil CSS biasanya dilakukan di tag head agar dapat terbaca contoh baris 11 pada source
    code.
    Dan kenapa pada tanggal di web tersebut menggunakan <em> agar tanggal tempat yang
    dibuat bisa sebaris. Jika menggunakan <p> maka kata tersebut akan membuat baris baru.
    Berikut adalah kode CSS pada file style.css yang digunakan pada HTML diatas. Kurang lebih
    seperti ini tata cara penulisan CSS. CSS berisi class dan element di dalamnya yang nanti
    dipanggil saat di perlukan. Contoh nav.menu akan memberi warna ungu dan dengan lebar 10
    pixel.
    Cara membuat copyright seperti bagian bawah artikel adalah tag footer contoh dalam kasus:
    <footer class="copyright text-center"><p>&copy; 2021 Alief's
    Blog</p></footer>

    Anda mungkin juga menyukai