(Adhitia Nur Riski) - Laporan Pemrogaman Web Modul 6

LAPORAN TUGAS MODUL 6
BOOTSTRAP 2
NAMA : Adhitia Nur Riski

KELAS : D3 PJJ Fresh TI 2018
NRP : 2103187017
MATA KULIAH : Desain dan Pemrogaman Web
A. DASAR TEORI
Bootstrap adalah framework ataupun tools untuk membuat aplikasi web ataupun
website yang bersifat responsive secara cepat, mudah dan gratis. Kata "responsive"
disini berarti bahwa tampilan web (lebar dan susunan isinya) dapat berubah secara
otomatis sesuai dengan lebar layar yang menampilkannya.
Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Tifografi,
Tabel, Form, Navigasi, dan lain-lain. Di dalam Bootstrap juga sudah terdapat
Javascript (jQuery Plugins) untuk menghasilkan komponen UI yang cantik seperti
Transitions, Modal, DropDown, ScrollSpy, ToolTip, PopOver, Tab, Alert, Button,
Carousel, dan lain-lain.
AlatAlat Yang DikembangkanUntukMeningkatKanBootstra
A. Compiler
Pengembangan kompiler untuk bahasa pemrograman baru pertama kali

dikembangkan dalam bahasa yang sudah ada tetapi kemudian ditulis ulang dalam
bahasa baru dan dikompilasi dengan sendirinya, adalah contoh lain dari gagasan
bootstrap. Menggunakan bahasa yang ada untuk bootstrap bahasa baru adalah salah
satu cara untuk memecahkan "ayam atau telur" kausalitas dilema.
B. Installer
Selama instalasi program komputer kadang-kadang diperlukan untuk memperbarui
installer atau manajer paket itu sendiri. Pola umum untuk ini adalah dengan
menggunakan sebuah file kecil executable bootstrapper (misalnya setup.exe) yang
update installer dan mulai instalasi nyata setelah pembaruan.
C. Jaringan
Sebuah node bootstrap, juga dikenal sebagai tuan rumah pertemuan, adalah node
dalam sebuah jaringan overlay yang menyediakan informasi konfigurasi awal untuk
yang baru bergabung dengan node sehingga mereka dapat berhasil bergabung dengan
jaringan overlay.
D. Acara simulasi diskrit

Suatu jenis simulasi komputer yang disebut simulasi kejadian diskrit merupakan
pengoperasian sistem sebagai urutan kronologis kejadian. Sebuah teknik yang disebut
bootstrap model simulasi digunakan, yang bootstraps poin data awal menggunakan
generator nomor pseudorandom untuk menjadwalkan set awal tertunda peristiwa,
yang menjadwalkan acara tambahan, dan dengan waktu, distribusi kali event
pendekatan steady state-the bootstrap nya perilaku kewalahan oleh perilaku steady-
state.
E. Kecerdasan buatan dan mesin pembelajaran
Bootstrap menggabungkan dan perbaikan diri RekursifBootstrap adalah teknik yang
digunakan untuk iteratif meningkatkan kinerja classifier ini. Bibit AI adalah jenis
hipotesis kecerdasan buatan yang mampu rekursif perbaikan diri. Setelah diperbaiki
sendiri, itu akan menjadi lebih baik dalam memperbaiki diri, berpotensi menyebabkan
peningkatan eksponensial dalam kecerdasan. Tidak ada AI tersebut diketahui ada,
tetapi tetap merupakan bidang penelitian aktif.
Bibit AI adalah bagian penting dari beberapa teori tentang singularitas teknologi:
pendukung percaya bahwa pengembangan benih AI cepat akan menghasilkan
kecerdasan yang selalu lebih cerdas (via bootstrap) dan dengan demikian era baru.
F. Penelitian
Bootstrap adalah teknik mencari database. Satu dapat melakukan pencarian eksak
(menggunakan kata kunci, misalnya) dan mengambil banyak "hits", beberapa di
antaranya akan di-sasaran. Ketika peneliti melihat dokumen yang relevan yang datang
melalui dalam campuran, judul subjek akan berlokasi dalam dokumen. Peneliti
kemudian dapat mengeksekusi pencarian baru menggunakan judul subjek resmi yang
akan menghasilkan lebih fokus, hasil menunjuk.
G. Statistik
Bootstrap adalah teknik resampling yang digunakan untuk memperoleh perkiraan
ringkasan statistik.
H. Bisnis
Bootstrap dalam bisnis berarti memulai bisnis tanpa bantuan atau modal eksternal.
Startups seperti mendanai perkembangan perusahaan mereka melalui arus kas internal
dan berhati-hati dengan pengeluaran mereka. Umumnya pada awal sebuah usaha,
sejumlah kecil uang yang akan disisihkan untuk proses bootstrap. Bootstrap juga bisa
menjadi suplemen untuk model ekonometrik. Bootstrap juga diperluas dalam buku
Bootstrap Bisnis, oleh Richard Christiansen.
I. Biologi
Richard Dawkins dalam bukunya River Out of Eden menggunakan konsep bootstrap
komputer untuk menjelaskan bagaimana sel-sel biologis membedakan: "Sel yang
berbeda menerima berbagai kombinasi bahan kimia, yang mengaktifkan berbagai
kombinasi gen, dan beberapa gen bekerja untuk beralih gen lain atau off. Dan
bootstrap terus, sampai kita memiliki repertoar penuh berbagai jenis sel. "
J. Filogenetik
Analisis bootstrap memberikan cara untuk menilai kekuatan dukungan untuk clades di
pohon filogenetik. Sejumlah ditulis oleh node, yang mencerminkan persentase pohon
bootstrap yang juga menyelesaikan clade pada titik akhir dari cabang itu.
K. Hukum
Bootstrap adalah aturan mencegah penerimaan bukti desas-desus dalam kasus
konspirasi.
L. Linguistik
Bootstrap adalah teori pemerolehan bahasa.
M. Fisika
Bootstrap menggunakan kriteria konsistensi yang sangat umum untuk menentukan
bentuk teori kuantum dari beberapa asumsi pada spektrum partikel.
N. Elektronik
Bootstrap adalah bentuk umpan balik positif dalam desain sirkuit analog.
O. Tenaga listrik jaringan

Biasanya jaringan listrik listrik tidak pernah dibawa turun dengan sengaja. Generator
dan pembangkit listrik yang dimulai dan ditutup sesuai kebutuhan. Sebuah
pembangkit listrik khas membutuhkan daya untuk start up sebelum mampu
menghasilkan tenaga. Kekuatan ini diperoleh dari grid, jadi jika seluruh jaringan turun
stasiun ini tidak dapat dijalankan.
Oleh karena itu untuk mendapatkan grid dimulai, harus ada setidaknya sejumlah kecil
pembangkit listrik yang dapat mulai sepenuhnya pada mereka sendiri. Awal yang
hitam adalah proses memulihkan pembangkit listrik untuk operasi tanpa bergantung
pada daya eksternal. Dengan tidak adanya jaringan listrik, satu atau lebih mulai hitam
digunakan untuk bootstrap grid.
P. Jaringan selular
Sebuah Fungsi Bootstrap Server (BSF) merupakan unsur perantara dalam jaringan
selular yang menyediakan fungsi independen aplikasi untuk otentikasi bersama
peralatan pengguna dan server yang tidak diketahui satu sama lain dan untuk
'bootstrap' pertukaran kunci rahasia sesi setelah itu. Istilah 'bootstrap' terkait dengan
membangun hubungan keamanan dengan perangkat yang sebelumnya tidak diketahui
pertama dan untuk memungkinkan unsur-unsur keamanan menginstal (kunci) dalam
perangkat dan BSF setelah itu.
Kelebihan Bootstrap
- Dibangun menggunakan Less.
- Teknologi CSS yang sederhana dan mudah digunakan.
- Anda dapat mengakses dengan mudah informasi dan fungsi warna, variabel, dan
operasi penggunaan.
Kekurangan Bootstrap
- Minim gambar karena menggunakan CSS3.
- Belum mampu memberikan tampilan yang sesuai di semua web browser.
- Membuat kita menjadi kurang kreatif karena terpaku dengancoding yang
dikembangkan oleh developer.
B. SKRIPT TEXT, SS HASIL, PENJELASAN
1. BS PAGER
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></scri
pt>
</head>
<body>
<div class="container">
<h2>Pager</h2>
<p>The .pager class provides previous and next buttons (links):</p>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Penjelasan: Untuk membuat tombol sebelumnya / berikutnya, tambahkan
kelas .pager ke elemen <ul>.
Align Buttons
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Pager</h2>
<p>The .previous and .next classes align each link to the sides of the page:</p>
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Penjelasan: Gunakan kelas .previous dan .next untuk menyelaraskan setiap
tombol ke sisi halaman
2. BS LIST GROUPS
Basic List Groups
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
</head>
<body>
<h2>Basic List Group</h2>
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>
</body>
</html>
Penjelasan: Untuk membuat grup daftar dasar, gunakan elemen <ul> dengan
class .list-group, dan elemen <li> dengan class .list-group-ite
List Group With Badges
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>List Group With Badges</h2>
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
</div>
</body>
</html>
Penjelasan: Untuk membuat lencana, buat elemen <span> dengan kelas
.badge di dalam item daftar.
List Group With Linked Items
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>List Group With Linked Items</h2>
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
</div>
</body>
</html>
Penjelasan: Untuk membuat grup daftar dengan item yang ditautkan,
gunakan <div> alih-alih <ul> dan <a> sebagai ganti <li>
Active State
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Active Item in a List Group</h2>
<a href="#" class="list-group-item active">First item</a>
</div>
</div>
</body>
</html>
Penjelasan: Gunakan kelas .active untuk menyorot item saat ini.
Disabled Item
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>List Group With a Disabled Item</h2>
<a href="#" class="list-group-item disabled">First item</a>
</div>
</div>
</body>
</html>
Penjelasan: Untuk menonaktifkan item, tambahkan kelas .disabled,
Contextual Classes
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>List Group With Contextual Classes</h2>
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
<h2>Linked Items With Contextual Classes</h2>

<p>Move the mouse over the linked items to see the hover effect:</p>
<a href="#" class="list-group-item list-group-item-success">First item</a>
<a href="#" class="list-group-item list-group-item-info">Second item</a>
<a href="#" class="list-group-item list-group-item-warning">Third item</a>
<a href="#" class="list-group-item list-group-item-danger">Fourth item</a>
</div>
</div>
</body>
</html>
Penjelasan: Kelas untuk mewarnai daftar item adalah: .list-group-item-
success, list-group-item-info, list-group-item-warning, dan .list-group-item-
hazard.
Custom Content
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>List Group With Custom Content</h2>
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
</a>
</div>
</div>
</body>
</html>
Penjelasan: Bootstrap menyediakan teks .list-grup-item-heading dan .list-
grup-item-teks yang dapat digunakan.
3. BS PANELS
Panels
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Basic Panel</h2>
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
</div>
</body>
</html>
Penjelasan: Panel dibuat dengan kelas .panel, dan konten di dalam panel
memiliki kelas .panel-body.
Panel Heading
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Panel Heading</h2>
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</body>
</html>
Penjelasan: .panel-heading class menambahkan heading ke panel.
Panel Footer
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Panel Footer</h2>
<div class="panel-heading">Panel Heading</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</body>
</html>
Penjelasan: Kelas .panel-footer menambahkan footer ke panel.
Panel Group
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Panel Group</h2>
<p>The panel-group class clears the bottom-margin. Try to remove the class and
see what happens.</p>
<div class="panel-group">
<div class="panel-heading">Panel Header</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Penjelasan: Untuk mengelompokkan banyak panel, bungkus <div> dengan
class .panel-group di sekitarnya. Kelas .panel-group membersihkan margin
bawah setiap panel.
Panels with Contextual Classes
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Panels with Contextual Classes</h2>
<div class="panel-heading">Panel with panel-default class</div>
</div>
<div class="panel panel-primary">

<div class="panel-heading">Panel with panel-primary class</div>
</div>
<div class="panel panel-success">

<div class="panel-heading">Panel with panel-success class</div>
</div>
<div class="panel panel-info">

<div class="panel-heading">Panel with panel-info class</div>
</div>
<div class="panel panel-warning">

<div class="panel-heading">Panel with panel-warning class</div>
</div>
<div class="panel panel-danger">

<div class="panel-heading">Panel with panel-danger class</div>
</div>
</div>
</div>
</body>
</html>
Penjelasan: Untuk mewarnai panel, gunakan kelas kontekstual (.panel-
default, .panel-primer, .panel-success, .panel-info, .panel-warning, atau
.panel-hazard).
4. BS DROPDOWNS
Basic Dropdown
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of
.dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-
toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>
Penjelasan: Kelas .dropdown menunjukkan menu dropdown.Untuk
membuka menu dropdown, gunakan tombol atau tautan dengan kelas
.dropdown-toggle dan atribut data-toggle = "dropdown". Kelas .caret
membuat ikon tanda panah tanda panah (), yang menunjukkan bahwa
tombolnya adalah dropdown.Tambahkan kelas .dropdown-menu ke elemen
<ul> untuk benar-benar membangun menu dropdown.
` Dropdown Divider
<!DOCTYPE html>
<html>
<head>
<script
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script
>
</head>
<body>
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a
thin horizontal line:</p>
<button class="btn btn-default dropdown-toggle" type="button" data-
toggle="dropdown">Tutorials
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
</body>
</html>
Penjelasan: .divider class digunakan untuk memisahkan tautan di dalam
menu dropdown dengan batas horisontal tipis.
Dropdown Header
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
<h2>Dropdowns</h2>
<p>The .dropdown-header class is used to add headers inside the dropdown
menu:</p>
<li class="dropdown-header">Dropdown header 1</li>
<li class="dropdown-header">Dropdown header 2</li>
</ul>
</div>
</div>
</body>
</html>
Penjelasan: .dropdown-header class is used to add headers inside the
dropdown menu.
Disable and Active items
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Dropdowns</h2>
<p>The .active class adds a blue background color to the active link.</p>
<p>The .disabled class disables a dropdown item (grey text color).</p>
<li><a href="#">Normal</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
<li class="active"><a href="#">Active</a></li>
<li><a href="#">Normal</a></li>
</ul>
</div>
</div>
</body>
</html>
Penjelasan: Untuk menonaktifkan item di menu dropdown, gunakan kelas
.disabled (mendapat warna teks abu-abu terang dan ikon "no-parking-sign"
di hover),
Dropdown Position
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
<h2>Dropdowns</h2>
<p>Add the .dropdown-menu-right class to .dropdown-menu to right-align the
dropdown menu:</p>
toggle="dropdown">Dropdown Example
<ul class="dropdown-menu dropdown-menu-right">
</ul>
</div>
</div>
</body>
</html>
Penjelasan: Untuk meluruskan-kanan dropdown, tambahkan kelas
.dropdown-menu-right ke elemen dengan .dropdown-menu.
Dropup
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of
downwards:</p>
<div class="dropup">
toggle="dropdown">Dropup Example
</ul>
</div>
</div>
</body>
</html>
Penjelasan: Jika Anda ingin menu tarik-turun meluas ke atas, bukan ke
bawah, ubah elemen <div> dengan class = "dropdown" menjadi "dropup".
Dropdown Accessibility
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<button class="btn btn-default dropdown-toggle" type="button" id="menu1"
data-toggle="dropdown">Tutorials
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1"
href="#">HTML</a></li>
href="#">CSS</a></li>
href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About
Us</a></li>
</ul>
</div>
</div>
</body>
</html>
Penjelasan: Untuk membantu meningkatkan aksesibilitas bagi orang yang
menggunakan pembaca layar, Anda harus menyertakan peran dan atribut
aria- * berikut, saat membuat menu tarik turun.
5. BS COLLAPSE
Basic Collapsible
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-
target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
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.
</div>
</div>
</body>
</html>
Penjelasan: Kelas .collapse menunjukkan elemen yang dapat dilipat (a <div>
dalam contoh kita); ini adalah konten yang akan ditampilkan atau
disembunyikan dengan mengklik tombol.
Untuk mengontrol (menampilkan / menyembunyikan) konten yang dapat

dilipat, tambahkan atribut data-toggle = "collapse" ke elemen <a> atau
<button>. Kemudian tambahkan atribut data-target = "# id" untuk
menghubungkan tombol dengan konten yang dapat dilipat (<div id =
"demo">).
Example Explained
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
<a href="#demo" class="btn btn-info" data-toggle="collapse">Simple
collapsible</a>
<div id="demo" class="collapse">
minim veniam,
consequat.
</div>
</div>
</body>
</html>
Penjelasan: tambahkan kelas .in untuk menampilkan konten secara default.
By default, the collapsible content is hidden. However, you can add the .in class to
show the content by default:]
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-
target="#demo">Simple collapsible</button>
<div id="demo" class="collapse in">
minim veniam,
consequat.
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
Collapsible Panel
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
Collapsible List Group
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
<h2>Collapsible List Group</h2>
<p>Click on the collapsible panel to open and close it.</p>
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
Accordion
<!DOCTYPE html>
<html>
<head>
<script
<script
pt>
</head>
<body>
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes
sure that all collapsible elements under the specified parent will be closed when
one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
consequat.</div>
</div>
</div>
</h4>
</div>
adipisicing elit,
ad minim veniam,
consequat.</div>
</div>
</div>
</h4>
</div>
adipisicing elit,
ad minim veniam,
consequat.</div>
</div>
</div>
</div>
</div>
</body>
</html>
Penjelasan: Gunakan atribut data-parent untuk memastikan bahwa semua
elemen yang dapat dilipat di bawah induk yang ditentukan akan ditutup
ketika salah satu item yang dapat dilipat ditampilkan.
6. BS TABS/PILLS
Menus
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h3>Inline List</h3>
<ul class="list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
</ul>
</div>
</body>
</html>
Penjelasan: untuk membuat menu horizontal dari daftar di atas, tambahkan
kelas .list-inline ke <ul>.
Tabs
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
</ul>
<br>
<p><strong>Note:</strong> This example shows how to create a basic
navigation tab. It is not toggleable/dynamic yet (you can't click on the links to
display different content)- see the last example in the Bootstrap Tabs and Pills
Tutorial to find out how this can be done.</p>
</div>
</body>
</html>
Penjelasan: Tab dibuat dengan <ul class = "nav nav-tabs">.
Tabs With Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h3>Tabs With Dropdown Menu</h3>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<li><a href="#">Submenu 1-1</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Pills
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h3>Pills</h3>
<ul class="nav nav-pills">
</ul>
</div>
</body>
</html>
Penjelasan: Pills dibuat dengan <ul class = "nav nav-pills">. Tandai juga
halaman saat ini dengan <li class = "active">.
Vertical Pills
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h3>Vertical Pills</h3>
<p>Use the .nav-stacked class to vertically stack pills:</p>
<ul class="nav nav-pills nav-stacked">
</ul>
</div>
</body>
</html>
Penjelasan: Pills juga dapat ditampilkan secara vertikal. Cukup tambahkan
kelas .nav-stacked.
Vertical Pills in a Row

<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h3>Vertical Pills</h3>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam.</p>
</div>
</ul>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
</body>
</html>
Pills With Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h3>Pills With Dropdown Menu</h3>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
</ul>
</li>
</ul>
</div>
</body>
</html>
Centered Tabs and Pills
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h3>Centered Tabs</h3>
<p>To center/justify the tabs and pills, use the .nav-justified class. Note that on
screens that are smaller than 768px, the list items are stacked (content will remain
centered).</p>
<ul class="nav nav-tabs nav-justified">
</ul>
<br>
<h3>Centered Pills</h3>
<ul class="nav nav-pills nav-justified">
</ul>
</div>
</body>
</html>
Penjelasan: Untuk memusatkan / membenarkan tab dan pil, gunakan kelas
.nav-justified.
Toggleable / Dynamic Tabs
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link.
Then add a .tab-pane class with a unique ID for every tab and wrap them inside a
div element with class .tab-content.</p>

<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
</div>
<h3>Menu 2</h3>
</div>
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
Penjelasan: Untuk membuat tab toggleable, tambahkan atribut data-toggle =
"tab" ke setiap tautan. Kemudian tambahkan kelas .tab-pane dengan ID
unik untuk setiap tab dan bungkus di dalam elemen <div> dengan kelas .tab-
content.
Jika Anda ingin tab memudar masuk dan keluar saat mengkliknya,
tambahkan kelas .fade ke .tab-pane.
Toggleable / Dynamic Pills
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Dynamic Pills</h2>
<p>To make the tabs toggleable, add the data-toggle="pill" attribute to each link.
Then add a .tab-pane class with a unique ID for every tab and wrap them inside a
div element with class .tab-content.</p>
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
</div>
<h3>Menu 1</h3>
</div>
<h3>Menu 2</h3>
</div>
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
Penjelasan: Kode yang sama berlaku untuk pil; hanya mengubah atribut
data-toggle ke data-toggle = "pill".
7. BS NAVBAR
Navigation Bars
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<nav class="navbar navbar-default">

<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">Page 1</a></li>
</ul>
</div>
</nav>
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the
page.</p>
</div>
</body>
</html>
Penjelasan: Bilah navigasi standar dibuat dengan <nav class = "navbar
navbar-default">.
Inverted Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<nav class="navbar navbar-inverse">

</div>
</ul>
</div>
</nav>
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
</body>
</html>
Penjelasan: Cukup ubah kelas .navbar-default menjadi .navbar-inverse.
Navigation Bar With Dropdown
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>

</div>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"
href="#">Page 1 <span class="caret"></span></a>
<li><a href="#">Page 1-1</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the
navigation bar.</p>
</div>
</body>
</html>
Right-Aligned Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>

</div>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"
href="#">Page 1 <span class="caret"></span></a>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign
Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</nav>
<h3>Right Aligned Navbar</h3>
<p>The .navbar-right class is used to right-align navigation bar buttons.</p>
</div>
</body>
</html>
Penjelasan: Kelas .navbar-right digunakan untuk meluruskan tombol bilah
navigasi.
Navbar Buttons
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>

</div>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
<h2>Navbar Button</h2>
<p>Use the navbar-btn class on a button to vertically align (same padding as
links) it inside the navbar.</p>
</div>
</body>
</html>
Penjelasan: tambahkan tombol di dalam navbar, tambahkan kelas .navbar-
btn pada tombol Bootstrap.
Navbar Forms
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>

</div>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search"
name="search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
<h3>Navbar Forms</h3>
<p>Use the .navbar-form class to vertically align form elements (same padding
as links) inside the navbar.</p>
</div>
</body>
</html>
Penjelasan: tambahkan elemen formulir di dalam navbar, tambahkan kelas
.navbar-form ke elemen formulir dan tambahkan input. Perhatikan bahwa
kami telah menambahkan kelas .form-group ke wadah div yang menyimpan
input.
You can also use the .input-group and .input-group-addon classes to attach an
icon or help text next to the input field. You will learn more about these classes in the
Bootstrap Inputs chapter.
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>

</div>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
<h3>Navbar Forms</h3>
<p>Use the .navbar-form class to vertically align form elements (same padding
as links) inside the navbar.</p>
<p>The .input-group class is a container to enhance an input by adding an icon,
text or a button in front or behind it as a "help text".</p>
<p>The .input-group-btn class attaches a button next to an input field. This is
often used as a search bar:</p>
</div>
</body>
</html>
Penjelasan: gunakan kelas .input-grup dan .input-grup-addon untuk
melampirkan ikon atau teks bantuan di sebelah bidang input.
Navbar Text
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>

</ul>
<p class="navbar-text">Some text</p>
</nav>
<h3>Navbar Text</h3>
<p>Use the .navbar-text class to vertical align any elements inside the navbar
that are not links (ensures proper padding).</p>
</div>
</body>
</html>
Penjelasan: Gunakan kelas .navbar-teks untuk meluruskan elemen apa pun
di dalam navbar yang bukan tautan (memastikan padding dan warna teks
yang tepat).
Fixed Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body style="height:1500px">
<nav class="navbar navbar-inverse navbar-fixed-top">

</div>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">

<h3>Fixed Navbar</h3>
<div class="row">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom)
independent of the page scroll.</p>
</div>
</div>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</body>
</html>
Penjelasan: .navbar-fixed-top class membuat bilah navigasi diperbaiki di
atas.
The .navbar-fixed-bottom class makes the navigation bar stay at the bottom
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-bottom">

</div>
</ul>
</div>
</nav>
<h3>Fixed Bottom Navbar</h3>
<div class="row">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the
bottom.</p>
</div>
bottom.</p>
</div>
bottom.</p>
</div>
bottom.</p>
</div>
</div>
</div>
<div class="row">
bottom.</p>
</div>
bottom.</p>
</div>
bottom.</p>
</div>
bottom.</p>
</div>
</div>
</div>
<div class="row">
bottom.</p>
</div>
bottom.</p>
</div>
bottom.</p>
</div>
bottom.</p>
</div>
</div>
</div>
<div class="row">
bottom.</p>
</div>
bottom.</p>
</div>
bottom.</p>
</div>
bottom.</p>
</div>
</div>
</div>
</body>
</html>
Penjelasan: .navbar-fixed-bottom class membuat bilah navigasi tetap di
bagian bawah.
Collapsing The Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign
Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav>
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced
by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
8. BS FORMS
Bootstrap Vertical Form (default)
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Vertical (basic) form</h2>
<form action="/action_page.php">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter
email" name="email">
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter
password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</form>
</div>
</body>
</html>
Penjelasan: Bungkus label dan kontrol formulir di <div class = "form-
group"> (diperlukan untuk penspasian optimal).Tambahkan kelas .form-
control ke semua elemen <input> tekstual, <textarea>, dan elemen <select>.
Bootstrap Inline Form
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Inline form</h2>
<p>Make the viewport larger than 768px wide to see that all of the form
elements are inline, left aligned, and the labels are alongside.</p>
<form class="form-inline" action="/action_page.php">
<label for="email">Email:</label>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Penjelasan: Tambahkan kelas .form-inline ke elemen <form>.
If you don't include a label for every input, screen readers will have trouble with your
forms. You can hide the labels for all devices, except screen readers, by using the .sr-
only class:
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Inline form with .sr-only class</h2>
<p>Make the viewport larger than 768px wide to see that all of the form
elements are inline, left aligned, and the labels are alongside.</p>
<form class="form-inline" action="/action_page.php">
<label class="sr-only" for="email">Email:</label>
</div>
<label class="sr-only" for="pwd">Password:</label>
</div>
</div>
</form>
</div>
</body>
</html>
Penjelasan: Anda dapat menyembunyikan label untuk semua perangkat,
kecuali pembaca layar, dengan menggunakan kelas .sr-only.
Bootstrap Horizontal Form
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
</div>
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<label><input type="checkbox" name="remember"> Remember
me</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Penjelasan: Tambahkan kelas .form-horizontal ke elemen <form>.
Tambahkan kelas .control-label ke semua elemen <label>.
9. BS INPUTS
Bootstrap Input
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Form control: input</h2>
<p>The form below contains two input elements; one of type text and one of
type password:</p>
<form>
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<input type="password" class="form-control" id="pwd">
</div>
</form>
</div>
</body>
</html>
Bootstrap Textarea
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Form control: textarea</h2>
<p>The form below contains a textarea for comments:</p>
<form>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</form>
</div>
</body>
</html>
Bootstrap Checkboxes
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Form control: checkbox</h2>
<p>The form below contains three checkboxes. The last option is disabled:</p>
<form>
<label><input type="checkbox" value="">Option 1</label>
</div>
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
</form>
</div>
</body>
</html>
Penjelasan: Gunakan kelas .checkbox-inline jika Anda ingin kotak centang
muncul di baris yang sama.
Use the .checkbox-inline class if you want the checkboxes to appear on the same
line
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Form control: inline checkbox</h2>
<p>The form below contains three inline checkboxes:</p>
<form>
<label class="checkbox-inline">
<input type="checkbox" value="">Option 1
</label>
</label>
</label>
</form>
</div>
</body>
</html>
Bootstrap Radio Buttons
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Form control: radio buttons</h2>
<p>The form below contains three radio buttons. The last option is disabled:</p>
<form>
<div class="radio">
<label><input type="radio" name="optradio" checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
</form>
</div>
</body>
</html>
Penjelasan: Gunakan kelas .radio-inline jika Anda ingin tombol radio
muncul di saluran yang sama.
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" checked>Option 1
</label>
<input type="radio" name="optradio">Option 2
</label>
<input type="radio" name="optradio">Option 3
</label>
</form>
</div>
</body>
</html>
Bootstrap Select List
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form>
<label for="sel1">Select list (select one):</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label for="sel2">Mutiple select list (hold shift to select more than
one):</label>
<select multiple class="form-control" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
</body>
</html>
10.BS INPUTS 2
Static Control
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Horizontal form with static control</h2>
<form class="form-horizontal" action="/action_page.php">
<label class="control-label col-sm-2" for="email">Email:</label>
<p class="form-control-static">someone@example.com</p>
</div>
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Penjelasan: untuk menyisipkan teks biasa di sebelah label formulir dalam
formulir horizontal, gunakan kelas .form-control-static pada elemen <p>.
Bootstrap Input Groups
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h3>Input Groups</h3>
<p>The .input-group-addon class attaches an icon or help text next to the input
field.</p>
<form>
<span class="input-group-addon"><i class="glyphicon glyphicon-
user"></i></span>
<input id="email" type="text" class="form-control" name="email"
placeholder="Email">
</div>
lock"></i></span>
<input id="password" type="password" class="form-control"
name="password" placeholder="Password">
</div>
<br>
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg"
placeholder="Additional Info">
</div>
</form>
<br>
<p>It can also be used on the right side of the input:</p>

<form>
<input id="email" type="text" class="form-control" name="email"
placeholder="Email">
user"></i></span>
</div>
<input id="password" type="password" class="form-control"
name="password" placeholder="Password">
lock"></i></span>
</div>
</form>
</div>
</body>
</html>
Penjelasan: Kelas .input-grup adalah wadah untuk meningkatkan input
dengan menambahkan ikon, teks atau tombol di depan atau di belakangnya
sebagai "teks bantuan". Kelas .input-grup-addon melampirkan ikon atau
teks bantuan di sebelah bidang input.
The .input-group-btn attaches a button next to an input. This is often used together
with a search bar
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h1>Input Group Button</h1>
<p>The .input-group-btn class attaches a button next to an input field. This is
often used as a search bar:</p>
<form action="/action_page.php">
name="search">
<button class="btn btn-default" type="submit"><i class="glyphicon
glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</body>
</html>
Penjelasan: .Input-group-btn menempel tombol di sebelah input. Ini sering
digunakan bersama dengan bilah pencarian. Kelas .input-grup-addon
melampirkan ikon atau teks bantuan di sebelah bidang input.
Bootstrap Form Control States
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Horizontal form: control states</h2>
<form class="form-horizontal">
<label class="col-sm-2 control-label">Focused</label>
<input class="form-control" id="focusedInput" type="text" value="Click to
focus...">
</div>
</div>
<label for="disabledInput" class="col-sm-2 control-label">Disabled</label>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." disabled>
</div>
</div>
<fieldset disabled>
<label for="disabledTextInput" class="col-sm-2 control-label">Disabled
input and select list (Fieldset disabled)</label>
<input type="text" id="disabledTextInput" class="form-control"
placeholder="Disabled input">
</div>
</div>
<label for="disabledSelect" class="col-sm-2 control-label"></label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success has-feedback">
<label class="col-sm-2 control-label" for="inputSuccess">Input with success
and glyphicon</label>
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label class="col-sm-2 control-label" for="inputWarning">Input with warning
and glyphicon</label>
<input type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign form-control-
feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label" for="inputError">Input with error and
glyphicon</label>
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
</div>
</body>
</html>
Penjelasan:
- INPUT FOCUS - Garis besar input dihapus dan bayangan kotak diterapkan
pada fokus.
- DISABLED INPUTS- Tambahkan atribut yang dinonaktifkan untuk
menonaktifkan bidang input.
- DISABLED FIELDSETS- Tambahkan atribut yang dinonaktifkan ke sebuah set
bidang untuk menonaktifkan semua kontrol di dalamnya.
- READONLY INPUTS- Tambahkan atribut readonly ke input untuk mencegah
input pengguna.
- VALIDATION STATES- Bootstrap menyertakan gaya validasi untuk pesan
kesalahan, peringatan, dan sukses. Untuk menggunakan, tambahkan .memiliki
peringatan, .memiliki kesalahan, atau .memiliki sukses ke elemen induk.
- ICONS- Anda dapat menambahkan ikon umpan balik dengan kelas .has-umpan
balik dan ikon.
- HIDDEN LABELS - Tambahkan kelas .sr saja pada label yang tidak terlihat.
And here is an example of some of the form control states in an Inline form:
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Inline form: control states</h2>
<form class="form-inline">
<label for="focusedInput">Focused</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<label for="inputPassword">Disabled</label>
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
<div class="form-group has-success has-feedback">
<label for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-
feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
</div>
</body>
</html>
11.BS INPUT SIZING

Penjelasan: Setel ketinggian elemen input menggunakan kelas seperti .input-
lg dan .input-sm. Tetapkan lebar elemen menggunakan kelas kolom kotak
seperti .col-lg- * dan .col-sm- *.
Height Sizing
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Input Sizing</h2>
<p>The form below shows input elements with different heights using .input-lg
and .input-sm:</p>
<form>
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<label for="inputlg">input-lg</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
<label for="inputsm">input-sm</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
<label for="sel1">Default select list</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<label for="sel2">input-lg</label>
<select class="form-control input-lg" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<label for="sel3">input-sm</label>
<select class="form-control input-sm" id="sel3">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Input Sizing</h2>
<p>You can quickly size labels and form controls within a Horizontal form by
adding .form-group-lg or .form-group-sm to the div class="form-group"
element:</p>
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="lg">form-group-lg</label>
<input class="form-control" type="text" id="lg">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="sm">form-group-sm</label>
<input class="form-control" type="text" id="sm">
</div>
</div>
</form>
</div>
</body>
</html>
Penjelasan: dapat dengan cepat mengukur label dan kontrol formulir dalam
formulir Horizontal dengan menambahkan .form-group- * ke elemen <div
class = "form-group">.
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h1>Input Group Size</h1>
<p>Use the .input-group-lg if you want a large input group:</p>
<form>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
</form>
<br>
<p>Use the .input-group-sm if you want a small input group:</p>

<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
</form>
</div>
</body>
</html>
Penjelasan: Anda juga dapat dengan cepat mengukur semua input dan
elemen lain di dalam .input-group dengan kelas .input-group-sm atau .input-
group-lg.
Column Sizing
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
pt>
</head>
<body>
<h2>Column Sizing</h2>
<p>The form below shows input elements with different widths using different
.col-xs-* classes:</p>
<form>
<div class="form-group row">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Penjelasan: memperlihatkan elemen input dengan lebar berbeda
menggunakan kelas .col-xs- * yang berbeda.
Help Text
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
</head>
<body>
<h2>Help text</h2>
<p>Use the .help-block class to add a block level help text in forms:</p>
<form>
password">
<span class="help-block">This is some help text that breaks onto a new line and
may extend more than one line.</span>
</div>
</form>
</div>
</body>
</html>
Penjelasan: Gunakan kelas .help-block untuk menambahkan teks bantuan level
blok dalam formulir.
C. KESIMPULAN
Bootstrap adalah kumpulan alat untuk membuat website dan aplikasi web.Ini berisi
Html dan CSS berbasis desain template untuk tipografi,bentuk,tombol,navigasi,dan
komponen antar muka lainnya,serta opsional Javascrip ekstensi.
Bootstrap memiliki kelebihan dan kekurangan.Kelenihannya adalah dibangun

menggunakan Less,sebuah teknologi CSS yang sederhana dan mudah untuk
digunakan,less juga menawarkan lebih banyak kekuatan dan fleksibilitas dari CSS
pada umumnya,dengan Less pengembang dapat mengakses dengan mudah informasi
dan fungsi warna, variabel, dan operasi penggunaan.Dan kekurangannya adalah
minim gambar karena memanfaatkan CSS3,belum mampu memberikan tampilan
yang sesuai di semua browser,Membuat kita menjadi kurang kreatif karena terpaku
dengan coding yang dikembangkan oleh developer.

(Adhitia Nur Riski) - Laporan Pemrogaman Web Modul 6

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

(Adhitia Nur Riski) - Laporan Pemrogaman Web Modul 6

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN TUGAS MODUL 6

NAMA : Adhitia Nur Riski

AlatAlat Yang DikembangkanUntukMeningkatKanBootstra

Pengembangan kompiler untuk bahasa pemrograman baru pertama kali

D. Acara simulasi diskrit

O. Tenaga listrik jaringan

Basic List Groups

List Group With Badges

List Group With Linked Items

<h2>Linked Items With Contextual Classes</h2>

<div class="panel panel-primary">

<div class="panel panel-success">

<div class="panel panel-info">

<div class="panel panel-warning">

<div class="panel panel-danger">

Disable and Active items

Untuk mengontrol (menampilkan / menyembunyikan) konten yang dapat

Collapsible List Group

Tabs With Dropdown Menu

Vertical Pills in a Row

Pills With Dropdown Menu

Centered Tabs and Pills

Toggleable / Dynamic Tabs

<ul class="nav nav-tabs">

<nav class="navbar navbar-default">

Inverted Navigation Bar

<nav class="navbar navbar-inverse">

<nav class="navbar navbar-inverse">

Right-Aligned Navigation Bar

<nav class="navbar navbar-inverse">

<nav class="navbar navbar-inverse">

<nav class="navbar navbar-inverse">

<nav class="navbar navbar-inverse">

<nav class="navbar navbar-inverse">

Fixed Navigation Bar

<nav class="navbar navbar-inverse navbar-fixed-top">

<div class="container" style="margin-top:50px">

<h1>Scroll this page to see the effect</h1>

<nav class="navbar navbar-inverse navbar-fixed-bottom">

Collapsing The Navigation Bar

Bootstrap Vertical Form (default)

Bootstrap Inline Form

Bootstrap Horizontal Form

Bootstrap Radio Buttons

Bootstrap Select List

Bootstrap Input Groups

<p>It can also be used on the right side of the input:</p>

Bootstrap Form Control States

11.BS INPUT SIZING

<p>Use the .input-group-sm if you want a small input group:</p>

Bootstrap memiliki kelebihan dan kekurangan.Kelenihannya adalah dibangun

Anda mungkin juga menyukai