Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pertemuan 9 Bootstrap

    Diunggah oleh

    Myster
    19 tayangan18 halaman

    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
    19 tayangan18 halaman

    Pertemuan 9 Bootstrap

    Diunggah oleh

    Myster

    Hak Cipta:

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

    Mendesain Web Dengan

    Bootstrap
    Andi Moch Januriana
    Pengenalan Bootstrap

    Bootstrap merupakan
    framework

    HTML
    populer untuk membangun situs web yang responsive

    CSS RWD (Responsive Web Design) adalah desain situs yang


    otomatis akan menyesuaikan diri agar tampil baik di
    semua perangkat dari ponsel sampai dekstop.
    Bootstrap terdiri dari satu set file css, javascript, dan jquery
    JavaScript
    Mudah digunakan: Siapa saja yang
    hanya memiliki pengetahuan dasar
    HTML dan CSS bisa mulai
    menggunakan Bootstrap

    Kenapa
    Fitur responsif: CSS responsif
    harus Bootstrap menyesuaikan dengan
    ponsel, tablet, dan desktop
    Bootstrap
    Kompatibilitas browser: Bootstrap
    kompatibel dengan semua browser
    modern (Chrome, Firefox, Internet
    Penjelajah, Safari, dan Opera)
    Digunakan untuk membuat header
    untuk navigasi (biasanya berada di
    bagian atas website)
    Navbar dapat berwarna terang atau
    gelap.
    Navbar di
    Bootstrap Navbar dapat selalu terlihat di posisi
    atas atau bawah

    Navbar dapat otomatis


    berkembang/menyempit
    Merupakan kelas pada
    Bootstrap yang digunakan
    untuk menampilkan kotak
    besar yang biasanya digunakan
    untuk menarik perhatian.
    Jumbotron
    Ukuran teks yang berada dalam
    kelas Jumbotron akan
    diperbesar.
    Bootstrap menyediakan
    sebuah plugin untuk
    menampilkan Carousel.
    Carousel
    Carousel merupakan
    serangkaian gambar yang
    tampil secara bergantian
    Bootstrap menyediakan 3 kelas untuk
    menampilkan gambar: .img-
    rounded, .imgcircle, dan .img-thumbnail

    Image
    Button
    • Bootstrap menyediakan 7 macam “gaya” untuk tombol dengan
    menggunakan kelas: .btn-default, .btn-primary, .btn-success, .btn-
    info, .btn-warning, .btn-danger, .btnlink
    • Bootstrap memungkinkan lebar layar dibagi menjadi 12 kolom.
    Grid System • Anda dapat mengelompokkan beberapa kolom menjadi satu.
    • Terdapat 4 kelas: xs (phones), sm (tablets), md (desktops), dan lg
    (larger desktops)
    Langkah Menggunakan Bootstrap
    • Buat Folder didalam htdocs
    • Buat file index.html
    • Di file index.html ketikan <html> dan enter
    • Kunjungi website getbootstrap.com dan pilih versi bootstrap 5
    • Scrol kebawah, dibagian CSS klik copy
    • Dan paste ke file index.html setelah title
    • Masih di web bootstrap 5, scroll kebawah, ada bagian bundle, klik copy
    • Paste di bagian body di file index.html
    • eksekusi di browser, ketikan localhost/nama_folder
    Membuat Menu Navbar
    • Lakukan pencarian di bagian pojok kiri atas, ketikan navbar pada kolom
    pencarian tersebut
    • Pilih navbar, lalu pilih navbar yang diinginkan, dan klik copy
    • Letakan di bawah body awal dan paste
    • Kita cek ke browser dan refresh
    • Kita seting tampilan navbar nya menjadi di posisi di Tengah, edit
    container-fluid menjadi container, selanjutnya kita rubah navbarnya
    menjadi warna hitam, edit bagian navbar-light dan bg-light menjadi
    navbar-dark bg-dark
    • Kita tambahkan shadow-lg dan fixed-top setelah bg-dark
    Edit identitas web
    • Di line 12 pada class navbar-brand, kata Navbar kita rubah menjadi
    identitas web kita missal “Web Andi”
    • Kita akan pindahkan menu yang sebelumnya di sebelah kiri, kita akan
    pindahkan ke sebelah kanan, dengan cara lihat line 16 ada class
    collapse, tambahkan di sampinya text-right. Setelah itu ke line
    bawahnya ada kalimat me-auto di ganti dengan ms-auto
    Menambahkan Menu
    • Di Navbar bawaan sudah terdapat menu Home, Link, Dropdown,
    Disabled, dan Button Search.
    • Kita rubah sesuaikan dengan selera kita
    • Kita akan buat susunan menu baru, Home, Layanan, Portfolio, Profile,
    Kontak
    • Di bagian href kita tambahkan dan disesaikan dengan nama menu
    contoh #home
    • Dan hapus bagian search
    Menambahkan Benner atau Jumbotron
    • Arahkan kursor ke </nav> dan enter
    • Ketikan
    • <div class="container-fluid banner">
    • <div class="container text-center">
    • <h4 class="display-6">Selamat Datang di Website AMIK Serang</h4>
    • <h3 class="display-1">Ayo Bergabung Menjadi Mahasiswa AMIK</h3>
    • <a href="#pendaftaran">
    • <button type="button" class="btn btn-danger btn-lg"> Pendaftaran</button>
    • </a>
    • </div>
    External CSS
    • Buat file didalam folder projek dengan nama style.css
    • Di file index.html dibagian atas </head> masukan kode berikut:
    • <link rel="stylesheet" type="text/css" href="style.css">
    • Masukan kode berikut ke file style.css
    • .banner {
    • background: url("https://cdn.vectorstock.com/i/1000x1000/65/95/web-development-on-
    smartphone-and-laptop-screen-vector-25926595.webp")
    • no-repeat center center;
    • background-size: cover;
    • padding-top: 20%;
    • padding-bottom: 20%;
    • color: #fff;
    • }
    Membuat Section
    • Alihkan ke file index.html pastekan kode berikut diatas link css
    • <link
    • rel="stylesheet"
    • href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    • integrity="sha384-
    AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGro
    Gkvsg+p"
    • crossorigin="anonymous"
    • />
    Section Daftar
    • Letakan kode berikut diatas kode script
    • <div class="container-fluid daftar pt-5 pb-5" >
    • <div class="container text-center">
    • <h2 class="display-3" id="daftar">Pendaftaran</h2>
    • <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    • tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    • quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    • consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    • cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    • proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    • </div>
    • </div>
    Terimakasih

    Anda mungkin juga menyukai