Rangkuman Bootsrap

keluar (overflow)
mengecil (collapse)
Emmet
 div>p>strong
 div*5
 h1+div.container>p
 nav>ul>li*5
 span.btn.btn-primary
snippet
Bootstrap 4, Font awesome 4, Font
Awesome 5 Free & Pro snippets
Popper.js adalah library JavaScript yang secara khusus menangani pembuatan efek
tooltips dan popover
File asal (unminified):
 bootstrap.css
 bootstrap-grid.css
 bootstrap-reboot.css
File minified:
 bootstrap.min.css
 bootstrap-grid.min.css
 bootstrap-reboot.min.css
Minified file adalah sebutan untuk suatu file yang "dipadatkan" atau "diringkas" dengan cara
menghapus seluruh komentar yang ada di dalam file tersebut (jika ada), kemudian juga
menghapus semua whitespace tambahan seperti spasi, tab, atau karakter Enter yang dipakai
sebagai pemisah baris (kecuali spasi untuk pemisah antar setiap perintah).
Tujuan dari versi minified adalah agar ukuran file menjadi lebih kecil dibandingkan versi
asalnya (versi unminified). Hal ini berdampak pada proses download file yang lebih cepat.
Kekurangan dari versi minified adalah, file ini mustahil dibaca oleh manusia. Bayangkan,
ribuan baris kode program dipadatkan menjadi 1 baris yang sangat panjang. Namun komputer
tidak masalah memproses file versi minified ini.
bootstrap.bundle.js sudah menyertakan library popper.js ke dalam file ini. Artinya jika
menggunakan bootstrap.bundle.js, kita tidak perlu lagi memakai file popper.js. Tapi tetap
saja kita harus menyertakan file jquery.js karena file JavaScript Bootstrap butuh library
TEMPLATE BOOTSTRAP FINAL
- <html lang="id / en">
Google bisa lebih baik dalam menyajikan hasil pencarian
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
berfungsi agar efek responsive dari sebuah web bisa berjalan sempurna di semua perangkat
Bootstrap menggunakan 12 kolom. Angka 960 artinya lebar konten web dibatasi sebesar 960 pixel
CSS Flexbox
(CSS Flexible Box Layout Module) di prediksi akan mengubah cara kita merancang web.
Column
- Column Number
- Column Auto
- Column Break
[ <div class="w-100"></div> ]
- Column Ordering
[ menukar posisi ]
order-sm-2
- Column Offset
[ kolom kosong atau kolom yang dilewati ]
- Column Gutter
<div class="row no-gutters">
Biasa digunakan dalam nested row yg rumit
- Nested Row
row dalan row
- Grid Break Point
XS SM MD LG XL
<div class="col-12 col-sm-12 col-md-12 col-lg-8"> Kolom 1 </div>
<div class="col-12 col-sm-6 col-md-10 col-lg-2" > Kolom 2 </div>
<div class="col-12 col-sm-6 col-md-2 col-lg-2"> Kolom 3 </div>
BOOTSTRAP UTILITIES
Spacing
- padding > .p0 - .p5
padding side > .pt b l t .px[rata kiri kanan] .py[rata atas bawah]
padding breakpoint > pt-sm-3 pl-md-5 p-lg-3
- margin > .m0 - .m5

margin side > .mt b l t .mx[rata kiri kanan] .my[rata atas bawah]
margin breakpoint > mt-sm-3 ml-md-5 m-lg-3
margin auto > .mr .ml .m -auto
Display
- .d-none, .d-inline, .d-inline-block dan .d-block
- display breakpoint
- jika sebuah element sudah menggunakan class .d-none,
maka class ini harus ditimpa pada breakpoint lain agar
element tersebut bisa tampil kembali
contoh d-none col-md-2 d-md-block
Visible
- .visible > menampilkan element
.hidden / .invisible > menghilangkan element tdk dng
tempatnta
.d-none >menghilangkan element beserta tempatnya
Clearfix
- memperbaiki efek float
Text
- text breakpoint > text-sm/md/lg-justify
- Text Wrapping and Overflow
.text-nowrap memaksa teks untuk "melimpah" ke luar jika
tidak bisa ditampung di dalam sebuah element.
.text-truncate akan mengganti sisa karakter yang melimpah
dengan tanda titik tiga kali, yakni '...'.
- Text Transform > text-lowercase/uppercase/capitalize

- Font Weight and Italics
.font-weight-bold/normal/light + .font-italic
- Monospace > text-monospace
Vertical alignment
mengatur rata teks secara vertikal
.align- [text] -baseline/top ... [tida berpengaruh pada block
element]
Sizing
.w-25 .w-50 .w-75 .w-100 .w-auto .mw-100[max-width]
.h-25 .h-50 .h-75 .h-100 .h-auto .mh-100
Position
.fixed-top .fixed-bottom .sticky-top[seolah-olah menempel
di atas]
.position-static/relative/absolute/fixed/sticky
BOOSTRAP CONTENT
1. Reboot
mengubah style bawaan web
* { margin: 0; padding: 0; } menghapus seluruh margin dan
padding
Font Stack
Box Sizing
.border-box, .content-box
Rem Sizing
Element Style
- <address><strong></strong><abbr title="HP"></abbr>
</address>
- <blockquote> dan <cite> dipakai untuk membuat kutipan
- <details><summary><details open>
2. Typography
Heading
<h1>ini h1</h1> = <p class="h1">ini juga h1</p>
Display
.display-1-4 fungsi seperti h1 hanya lebih besar
Lead
class khusus untuk membuat paragraf tampil "beda"
Inline Text Elements
<mark>[<del><s>][<i><em>][<strong><b>]
[<u><ins>]<small>
List
- .list-unstyled > menghapus karakter berlaku 1 level luar
- untuk ul = .list-inline / untuk li = .list-inline-item
Code
element membuat teks seperti kode program, diantaranya tag <pre>[muncul horizontal scrollbar layar
kecil], <code>[huruf jadi pink], <kbr>[style jadi tombol], <var>, dan <samp>
pre-scrollable
3. Image & Figure
gambar responsive
.img-fluid
Image Thumbnails
.img-thumbnail > memberikan efek bingkai putih

Figures
class .figure untuk tag <figure>
class .figure-img untuk tag <img>
class .figure-caption untuk tag <figcaption>
4. Table
table class
.table .table-dark
Table Head Options
.thead-light/dark/...
Striped rows
.table-striped > membuat efek baris belangbelang
Bordered table
table-bordered > menambah efek border
Borderless table
table-borderless > membuat tabel tanpa border
Hoverable rows
Hoverable rows > tabel baris berubah warna jika kena kursor
Tabel breakpoint
table-sm
Contextual classes
Bootstrap untuk sistem pewarnaan konten
.table-active/dark/primary/... atau bisa pake
.bg-active/dark/primary/...
Table Caption
Responsive Table
- table responsive breakpoint > table-resvonsive-sm/md/...
BUTTON RELATED COMPONENT
1. Button
Color
btn-primary/info/danger...
Outline
tombol memiliki warna background putih dan baru berubah
warna begitu cursor mouse berada di atasnya
.btn-outline-primary/info/danger...
Size
- .btn-lg/md/...
- .btn-block > membuat tombol yang lebarnya memenuhi
lebar parent element
Active state
- .active > memberi efek gelap / hover
Disabled State
- .disabled
2. Button Group
3. Dropdown
Directions
- mengubah arah menu dropdown
.dropup, .dropleft, dan .dropleft
4. Pagination
5. Badges
komponen Bootstrap berbentuk label tampilan mirip seperti
button. Badges bisa dibuat dari tag <span> tag <a>
- .badge > membuat badge
- .badge-primary/info/danger/...
- .badge-pill > membuat sudut membulat
6. List Group
8. NAVIGATION RELATED COMPONENT
1. Breadcrumb
istilah untuk menyebut teks yang menandakan posisi
halaman saat ini dari keseluruhan struktur website
2. Nav
Dynamic Tabbed Interfaces
Halaman 239
3. Navbar
4. Scrollspy
Halaman 263
9. DISPLAY RELATED COMPONENT
1. Card
Untuk membuat berbagai fitur tampilan. Card dari
gabungan komponen panel, well, dan thumbnail
A. cardBasic
<.card><.card-body>membuat teks di dalam "badan" card.
B. cardHeaderFooter
.card-header .card-footer
C. cardHeaderFooterUtility
card di kombinasi dengan bootstrap utilities
D. cardGrid
E. cardGroup
.card-group
F. cardDeck
sama dengan cardGroup yang membedakan margin
2. Carousel
- Carousel Controls > slide bentuk panah
- Carousel Indicators > yakni garis kecil di bawah slider untuk
menandakan posisi atau urutan gambar di dalam slider
- carousel_captions
3. Jumbotron
.jumbotron
.jumbotron-fluid > padding kiri dan kanan jumbotron akan
dihapus serta tanpa efek sudut membulat
4. Collapse
komponen Bootstrap membuat efek element bisa disembunyikan
- Collapse Accordion > kumpulan teks yang saling menutup
ketika bagian lain terbuka
5. Alert
komponen Bootstrap membuat text-box berisi peringatan atau
pemberitahuan
.alert .alert-primary/info/danger/...
A. Alert Dismissing
alert dengan tambahan icon close
6. Modal
A. Modal Centered
B. Modal Size
7. Popovers
8. Tooltips
komponen Bootstrap yang menampilkan teks pada saat cursor mouse
berada di atas sebuah element
<abbr title="Tooltips pertama" data-toggle="tooltip">
9. Progress
komponen Bootstrap untuk membuat tampilan bar atau garis warna
progress_bar_basic
- .progress .progress-bar
Progress Label
Progress Color
Progress Striped
- .progress-bar-striped > progress efek belang-belang
progress_bar_striped_animation
- .progress-bar-animated >bergerak
Multiple bars
10. Media Object
Media object adalah cara untuk membuat tampilan berulang yang
terdiri dari gabungan gambar dan teks. Tampilan seperti ini sering
dipakai untuk membuat komponen komentar atau daftar artikel pada

sebuah blog
10. FORM RELATED COMPONENT
1. Forms
- .Form-control
*bisa menggunakan form-control-lg/md/sm
- .Form-group
menambah property CSS margin-bottom: 1rem.
- Form Readonly, Disabled dan Plaintext
.form-control-plaintext
- Form File dan Form Range
.form-control-file/range[jarak]
- Form Checkbox dan Form Radio
- Form Grid
* class khusus > .form-row
- Horizontal Form
* .col-form-label > mengatur padding dan margin agar pas dengan
tag <input>
- Form Inline
.form-inline
- Custom forms
* .custom-checkbox > .custom-control-input
.custom-select .custom-file-input
- Form Validation
* .valid-feedback .invalid-feedback
2. Input Group
- Prepend dan Append
- Input Group Label
- Input Group Size
- Multiple Input Group
11. FLEXBOX UTILITIES
Tidak lagi berbasis property float
12. FONT AWESOME

Rangkuman Bootsrap

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Rangkuman Bootsrap

Diunggah oleh

Hak Cipta:

Format Tersedia

keluar (overflow)

Bootstrap 4, Font awesome 4, Font

Awesome 5 Free & Pro snippets

tooltips dan popover

File asal (unminified):

tidak masalah memproses file versi minified ini.

TEMPLATE BOOTSTRAP FINAL

- <html lang="id / en">

Google bisa lebih baik dalam menyajikan hasil pencarian

- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

[ kolom kosong atau kolom yang dilewati ]

<div class="row no-gutters">

Biasa digunakan dalam nested row yg rumit

row dalan row

- Grid Break Point

<div class="col-12 col-sm-12 col-md-12 col-lg-8"> Kolom 1 </div>

<div class="col-12 col-sm-6 col-md-10 col-lg-2" > Kolom 2 </div>

<div class="col-12 col-sm-6 col-md-2 col-lg-2"> Kolom 3 </div>

- padding > .p0 - .p5

padding breakpoint > pt-sm-3 pl-md-5 p-lg-3

- margin > .m0 - .m5

margin breakpoint > mt-sm-3 ml-md-5 m-lg-3

margin auto > .mr .ml .m -auto

- .d-none, .d-inline, .d-inline-block dan .d-block

- jika sebuah element sudah menggunakan class .d-none,

maka class ini harus ditimpa pada breakpoint lain agar

element tersebut bisa tampil kembali

contoh d-none col-md-2 d-md-block

- .visible > menampilkan element

.hidden / .invisible > menghilangkan element tdk dng

.d-none >menghilangkan element beserta tempatnya

- memperbaiki efek float

- text breakpoint > text-sm/md/lg-justify

- Text Wrapping and Overflow

.text-nowrap memaksa teks untuk "melimpah" ke luar jika

tidak bisa ditampung di dalam sebuah element.

.text-truncate akan mengganti sisa karakter yang melimpah

dengan tanda titik tiga kali, yakni '...'.

- Text Transform > text-lowercase/uppercase/capitalize

- Monospace > text-monospace

mengatur rata teks secara vertikal

.align- [text] -baseline/top ... [tida berpengaruh pada block

.w-25 .w-50 .w-75 .w-100 .w-auto .mw-100[max-width]

.h-25 .h-50 .h-75 .h-100 .h-auto .mh-100

.fixed-top .fixed-bottom .sticky-top[seolah-olah menempel

mengubah style bawaan web

* { margin: 0; padding: 0; } menghapus seluruh margin dan

- <blockquote> dan <cite> dipakai untuk membuat kutipan

<h1>ini h1</h1> = <p class="h1">ini juga h1</p>

.display-1-4 fungsi seperti h1 hanya lebih besar

class khusus untuk membuat paragraf tampil "beda"

Inline Text Elements

- .list-unstyled > menghapus karakter berlaku 1 level luar

- untuk ul = .list-inline / untuk li = .list-inline-item

3. Image & Figure

.img-thumbnail > memberikan efek bingkai putih

class .figure untuk tag <figure>

class .figure-img untuk tag <img>

class .figure-caption untuk tag <figcaption>

Table Head Options

.table-striped > membuat efek baris belangbelang

table-bordered > menambah efek border

table-borderless > membuat tabel tanpa border