Anda di halaman 1dari 6

Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan

halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun
pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini
memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau
desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.
Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat
layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah
website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah
didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun
menggunakan JavaScript.
Apa itu Twitter Bootstrap
Bootstrap merupakan sebuah framework CSS dari Twitter, yang menyediakan kumpulan
komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk
digunakan bersama-sama.
Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout
halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk
membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen
lainnya.
Twitter Bootstrap ini sekarang sedang hangat-hangatnya pada dunia web desain, dan banyak
sekali yang menggunakan nya karena memudahkan para desainer web untuk membuat desain
web-nya
Bootstrap CDN
The folks over at MaxCDN Anggun menyediakan dukungan CDN untuk Bootstrap's CSS dan
JavaScript. Hanya menggunakan ini Bootstrap CDN links.
<!-- Latest compiled and minified CSS -->
<link
href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link
rel="stylesheet"
theme.min.css">

rel="stylesheet"

href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-

<!-- Latest compiled and minified JavaScript -->


<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
Compiling Bootstrap's LESS files
Jika Anda bekerja dengan kode sumber uncompiled Bootstrap's, Anda harus mengkompilasi
file kurang untuk menghasilkan file CSS yang dapat digunakan. Untuk mengkompilasi file
kurang ke CSS, kami hanya secara resmi mendukung Recess, Twitter's CSS hinter didasarkan
pada less.js.

What's included
Bootstrap di-download dalam dua bentuk, di mana Anda akan menemukan direktori berikut
dan file, logis pengelompokan sumber daya Umum dan menyediakan kedua disusun dan
minified variasi.
jQuery required
Please note that all JavaScript plugins require jQuery to be included, as shown in the
starter template. Consult our bower.json to see which versions of jQuery are supported.
Precompiled Bootstrap
Setelah download, unzip folder dikompresi untuk melihat struktur (disusun) Bootstrap. Anda
akan melihat sesuatu seperti ini:
bootstrap/
css/
bootstrap.css
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.min.css
js/
bootstrap.js
bootstrap.min.js
fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Ini adalah bentuk paling dasar Bootstrap: precompiled file untuk cepat drop-in penggunaan di
hampir setiap proyek web. Kami menyediakan dikompilasi CSS dan JS (bootstrap.*), juga
sebagai dikompilasi dan minified CSS dan JS (bootstrap.min.*). Font dari Glyphicons
disertakan, seperti tema Bootstrap opsional.
Bootstrap source code
Download kode sumber Bootstrap mencakup aset Installation CSS, JavaScript, dan font,
bersama dengan sumber kurang, JavaScript, dan dokumentasi. Lebih khusus lagi, itu
mencakup berikut dan lebih lanjut:
bootstrap/
less/
js/
fonts/
dist/
css/
js/
fonts/

docs-assets/
examples/
*.html
The less/, js/, and fonts/ Apakah kode sumber untuk CSS, JS, dan ikon font (masing-masing).
The dist/ folder meliputi segala sesuatu yang tercantum dalam bagian Installation download
di atas. docs-assets/, examples/, dan semua *.html file ini adalah untuk dokumentasi kami.
Selain itu, file lainnya termasuk menyediakan dukungan untuk paket, informasi lisensi dan
pengembangan.
Basic template
Mulai dengan template HTML dasar ini, atau memodifikasi contoh-contoh ini. Kami
berharap Anda akan menyesuaikan template dan contoh, kami mengadaptasinya sesuai
dengan kebutuhan Anda.
Copy HTML di bawah ini untuk mulai bekerja dengan dokumen Bootstrap minimal.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Examples
Membangun template dasar di atas dengan Bootstrap's banyak komponen. Lihat juga
Menyesuaikan Bootstrap untuk kiat tentang merawat varian Bootstrap Anda sendiri.

Starter template
Tidak ada tapi dasar-dasar: dikompilasi CSS dan JavaScript dengan sebuah wadah.

Grids
Beberapa contoh dari grid layout dengan semua empat tingkatan, bersarang, dan banyak lagi.

Jumbotron
Membangun sekitar jumbotron dengan navbar dan beberapa kolom dasar grid.

Narrow jumbotron
Membangun halaman lebih kustom oleh penyempitan default wadah dan jumbotron.

Navbar
Super dasar template yang mencakup navbar bersama dengan beberapa konten tambahan.

Static top navbar


Super dasar template dengan navbar atas statis bersama dengan beberapa konten tambahan.

Fixed navbar
Super dasar template dengan navbar atas tetap bersama dengan beberapa konten tambahan.

Sign-in page
Bentuk kustom layout dan desain untuk tanda sederhana dalam bentuk.

Sticky footer
Melampirkan footer ke bagian bawah viewport ketika konten lebih pendek dari itu.

Sticky footer with navbar


Melampirkan footer ke bagian bawah viewport dengan navbar tetap di bagian atas.

Justified nav
Membuat navbar kustom dengan link yang dibenarkan. Kepala up! Tidak terlalu ramah
WebKit.

Offcanvas
Membangun toggleable off-kanvas navigasi menu untuk digunakan dengan Bootstrap.

Carousel
Menyesuaikan navbar dan korsel, kemudian tambahkan beberapa komponen baru.

Non-responsive Bootstrap
Dengan mudah menonaktifkan respon dari Bootstrap per docs kami.

Bootstrap theme
Beban tema Bootstrap opsional untuk pengalaman visual ditingkatkan.

Menonaktifkan responsif
Bootstrap secara otomatis menyesuaikan halaman Anda untuk berbagai ukuran layar. Berikut
adalah cara untuk menonaktifkan fitur ini sehingga halaman Anda berfungsi seperti contoh
ini non-responsif.
Langkah-langkah untuk menonaktifkan halaman responsif
1. Menghilangkan viewport <meta> disebutkan dalam CSS docs
2. Menimpa width pada .container untuk setiap tingkatan grid dengan lebar tunggal,
misalnya width: 970px !important; Pastikan bahwa ini datang setelah default
Bootstrap CSS. Anda opsional dapat menghindari !important dengan media queries
atau beberapa selector-fu.
3. Jika menggunakan navbars, Hapus semua navbar runtuh dan memperluas perilaku.
4. Untuk grid layout, gunakan .col-xs-* kelas Selain, atau di tempat, menengah dan
besar yang. Jangan khawatir, timbangan grid perangkat ekstra kecil untuk semua
resolusi.
Anda masih perlu Respond.js untuk IE8 (karena kami pertanyaan media masih ada dan
diproses). Ini menonaktifkan aspek "situs mobile" Bootstrap.

Anda mungkin juga menyukai