Docsity
Docsity

Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity


Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan


Guidelines and tips
Guidelines and tips

Bootstrap exercise how to create nice layout, Exercises of Programming Languages

Programming page using bootstrap

Typology: Exercises

2019/2020

Uploaded on 11/21/2020

anggi-oktandi
anggi-oktandi šŸ‡®šŸ‡©

1 document

1 / 105

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
Pengenalan Bootstrap
Bootstrap adalah framework HTML, CSS, dan JavaScript paling
populer untuk mengembangkan situs web yang responsif.
Sesuai dengan informasi pada halaman resmi bootstrap yaitu One
framework Every Device , bootstrap menyediakan Desain web yang
responsif yaitu tampilan halaman secara otomatis menyesuaikan
diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga
desktop besar.
Bootstrap dapat diunduh secara gratis.
Bootstrap mencakup desain template berbasis HTML dan CSS untuk
tipografi, form, tombol / button, tabel, navigasi, modals dan banyak
lainnya. Yup...Dengan adanya bootsrap ini kita tak lagi harus
membuat kerangka desain dari 0.
Sejarah Bootstrap
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di
Twitter, dan dirilis sebagai produk open source pada Agustus 2011
di GitHub.
Kelebihan menggunakan
Bootstrap
Mudah digunakan
Siapa saja yang memiliki pengetahuan dasar tentang HTML dan CSS
dapat menggunakan Bootstrap.
Fitur responsif
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b
pf1c
pf1d
pf1e
pf1f
pf20
pf21
pf22
pf23
pf24
pf25
pf26
pf27
pf28
pf29
pf2a
pf2b
pf2c
pf2d
pf2e
pf2f
pf30
pf31
pf32
pf33
pf34
pf35
pf36
pf37
pf38
pf39
pf3a
pf3b
pf3c
pf3d
pf3e
pf3f
pf40
pf41
pf42
pf43
pf44
pf45
pf46
pf47
pf48
pf49
pf4a
pf4b
pf4c
pf4d
pf4e
pf4f
pf50
pf51
pf52
pf53
pf54
pf55
pf56
pf57
pf58
pf59
pf5a
pf5b
pf5c
pf5d
pf5e
pf5f
pf60
pf61
pf62
pf63
pf64

Partial preview of the text

Download Bootstrap exercise how to create nice layout and more Exercises Programming Languages in PDF only on Docsity!

Pengenalan Bootstrap

Bootstrap adalah framework HTML, CSS, dan JavaScript paling

populer untuk mengembangkan situs web yang responsif.

Sesuai dengan informasi pada halaman resmi bootstrap yaitu One

framework Every Device , bootstrap menyediakan Desain web yang

responsif yaitu tampilan halaman secara otomatis menyesuaikan

diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga

desktop besar.

Bootstrap dapat diunduh secara gratis.

Bootstrap mencakup desain template berbasis HTML dan CSS untuk

tipografi, form, tombol / button, tabel, navigasi, modals dan banyak

lainnya. Yup...Dengan adanya bootsrap ini kita tak lagi harus

membuat kerangka desain dari 0.

Sejarah Bootstrap

Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di

Twitter, dan dirilis sebagai produk open source pada Agustus 2011

di GitHub.

Kelebihan menggunakan

Bootstrap

Mudah digunakan

Siapa saja yang memiliki pengetahuan dasar tentang HTML dan CSS

dapat menggunakan Bootstrap.

Fitur responsif

Menyediakan tampilan yang berbeda menyesuaikan perangkat yang

membuka halaman web tersebut, ponsel, tablet, atau desktop.

Kompatibilitas browser

Bootstrap kompatibel / dapat dijalankan dengan semua browser

modern (Chrome, Firefox, Internet Explorer, Edge, Safari, dan

Opera).

Download Bootstrap

Untuk mendapatkan bootstrap, kita bisa mengunjungi website

resminya yaitu di https://getbootstrap.com

Untuk bootsrap 3, kita bisa mendownload

melalui : https://getbootstrap.com/docs/3.3/

Membuat halaman pertama

Bootstrap

Setelah mendownload file bootstrap, kita dapat mengekstrak filenya

dan dapat kita tempatkan di server lokal kita.

Bootstrap 101 Template

Hello, world!

Jika kita jalankan kode di atas, akan menampilkan output sebagai

berikut ini :

Selain itu, masih banyak fitur dengan gaya / tampilan menarik yang

disediakan oleh bootstrap seperti tipografi, form, table, button dan

lain-lain yang akan kita bahas di lesson selanjutnya.

Sistem grid digunakan untuk mengatur jumlah kolom dalam

pembuatan layout suatu halaman.

Sistem grid memungkinkan kita membagi menjadi 12 kolom dalam

satu halaman.

Class Grid

Sistem grid mempunyai 4 class, antara lain :

xs - digunakan untuk ponsel, layar kurang dari 768px

sm - digunakan untuk tablet, layar sama atau lebih besar dari 768

px

md - digunakan untuk laptop kecil , layar sama atau lebih besar dari

992px

lg - digunakan untuk laptop dan desktop, layar sama atau lebih

besar dari 1200 px

Struktur Dasar Grid

...

Membuat layout dengan grid

Dibawah ini adalah contoh membuat layout dengan grid :

Ini Header
Ini Logo
Ini navigasi
Ini konten 1
Ini konten 2
Ini footer

h1 Bootstrap heading

h2 Bootstrap heading

h3 Bootstrap heading

h4 Bootstrap heading

h5 Bootstrap heading
h6 Bootstrap heading
Kustomisasi Judul

Elemen HTML digunakan untuk membuat text sekunder di

dalam judul / heading.

Biasanya digunakan untuk memberi keterangan lebih detail pada

Judul tersebut.

Ini Judul Primer Ini Judul Sekunder

Ini Judul Primer Ini Judul Sekunder

Ini Judul Primer Ini Judul Sekunder

Alignment Class

Digunakan untuk mengatur kesejajaran dari text, seperti mengatur

text rata kanan, atau rata kiri dsb.

Text-nowrap. Text-nowrap. Text-nowrap. Text-nowrap.

Lead

Digunakan untuk membuat tampilan suatu paragraf menjadi lebih

menonjol jika dibandingkan paragraf lain.

Sintaks :

Bootstrap typography. Bootstrap typography. Bootstrap typography. Bootstrap typography. Bootstrap typography. Bootstrap typography. Bootstrap typography.

Bootstrap Lead. Bootstrap Lead. Bootstrap Lead.

Bootstrap typography. Bootstrap typography. Bootstrap typography. Bootstrap typography. Bootstrap typography. Bootstrap typography. Bootstrap typography.

abbr

Digunakan untuk menandai dan menampilkan singkatan dari

sebuah text.

Ketika diarahkan ke text, akan menampilkan keterangan dari

singkatan tersebut.

CSS

HTML

Memberi warna dan warna latar pada text

Bootstrap juga mempunyai class yang dapat digunakan untuk

memberikan warna pada text ataupun memberikan warna latar

pada text agar text tersebut memiliki makna khusus.

Contoh text dengan warna latar hijau digunakan untuk memberi

notifikasi sukses, text dengan warna latar merah digunakan untuk

memberi notifikasi bahaya, dll.

Class warna latar

Class untuk memberi warna latar antara lain seperti di bawah ini.

.bg-primary, .bg-success, .bg-info, .bg-warning, dan .bg-danger

Untuk menandai bahwa ini adalah text penting.

Untuk menampilkan notifikasi sukses

Untuk menandai text sebagai info.

  • Java
  • .NET
  • Desain
  • Bootstrap Tables

    Jenis Tabel yang disediakan

    Bootstrap

    Bootstrap menyediakan beberapa jenis tabel dengan bermacam

    varian gaya / style yang dapat digunakan oleh user antara lain :

    Basic Table

    Basic table / table dasar di bootstrap hanya memiliki garis

    horizontal.

    Untuk membuat tabel dasar, cukup tambahkan

    class .table ke yang dibuat.

    # Nama Alamat Email
    1 Anisa Jl. Cemara, Malang anisa@codepolitan.com
    2 Naufal
    Nama Alamat Email
    Anisa Jl. Cemara, Malang anisa@codepolitan.com
    Naufal Jl. Merak, Bandung naufal@codepolitan.com
    Muhammad Jl. Angkasa, Jakarta muhammad@codepolitan.com

    Bordered Table

    Class.table-bordered menampilkan tabel dengan batas garis pada tiap

    kolom dan baris.

    Bordered Table

    Nama Alamat Email
    Anisa Jl. Cemara, Malang anisa@codepolitan.com