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.

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.

Bootstrap 101 Template

Hello, world!

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 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.