Unduh

Bootstrap (saat ini v3.3.7) memiliki beberapa cara mudah untuk memulai dengan cepat, masing-masing memiliki tingkat keterampilan dan kasus penggunaan yang berbeda. Baca terus untuk melihat apa yang sesuai dengan kebutuhan khusus Anda.

Bootstrap CDN

Orang-orang di jsDelivr dengan ramah memberikan dukungan CDN untuk CSS dan JavaScript Bootstrap. Cukup gunakan tautan CDN Bootstrap ini.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Instal dengan Bower

Anda juga dapat menginstal dan mengelola Less, CSS, JavaScript, dan font Bootstrap menggunakan Bower :

$ bower install bootstrap

Instal dengan npm

Anda juga dapat menginstal Bootstrap menggunakan npm :

$ npm install bootstrap@3

require('bootstrap')akan memuat semua plugin jQuery Bootstrap ke objek jQuery. Modul bootstrapitu sendiri tidak mengekspor apa pun. Anda dapat secara manual memuat plugin jQuery Bootstrap satu per satu dengan memuat /js/*.jsfile di bawah direktori tingkat atas paket.

Bootstrap package.jsonberisi beberapa metadata tambahan di bawah kunci berikut:

• less- jalur ke file sumber Less utama Bootstrap
• style- jalur ke CSS non-minified Bootstrap yang telah dikompilasi menggunakan pengaturan default (tanpa penyesuaian)

Instal dengan Komposer

Anda juga dapat menginstal dan mengelola Bootstrap's Less, CSS, JavaScript, dan font menggunakan Composer :

$ composer require twbs/bootstrap

Autoprefixer diperlukan untuk Less/Sass

Bootstrap menggunakan Autoprefixer untuk menangani prefiks vendor CSS . Jika Anda mengkompilasi Bootstrap dari sumber Less/Sass dan tidak menggunakan Gruntfile kami, Anda harus mengintegrasikan Autoprefixer ke dalam proses build Anda sendiri. Jika Anda menggunakan Bootstrap yang telah dikompilasi atau menggunakan Gruntfile kami, Anda tidak perlu khawatir tentang ini karena Autoprefixer sudah terintegrasi ke dalam Gruntfile kami.

Apa yang termasuk?

Bootstrap dapat diunduh dalam dua bentuk, di mana Anda akan menemukan direktori dan file berikut, secara logis mengelompokkan sumber daya umum dan menyediakan variasi yang dikompilasi dan diperkecil.

Bootstrap yang sudah dikompilasi

Setelah diunduh, unzip folder terkompresi untuk melihat struktur (yang dikompilasi) Bootstrap. Anda akan melihat sesuatu seperti ini:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Ini adalah bentuk paling dasar dari Bootstrap: file yang telah dikompilasi untuk penggunaan drop-in cepat di hampir semua proyek web. Kami menyediakan CSS dan JS yang dikompilasi ( bootstrap.*), serta CSS dan JS yang dikompilasi dan diperkecil ( bootstrap.min.*). Peta sumber CSS ( bootstrap.*.map) tersedia untuk digunakan dengan alat pengembang browser tertentu. Font dari Glyphicons disertakan, seperti tema Bootstrap opsional.

Kode sumber bootstrap

Unduhan kode sumber Bootstrap mencakup CSS, JavaScript, dan aset font yang telah dikompilasi sebelumnya, bersama dengan Source Less, JavaScript, dan dokumentasi. Lebih khusus lagi, ini mencakup yang berikut dan lebih banyak lagi:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, less/, js/dan fonts/merupakan kode sumber untuk font CSS, JS, dan ikon kami (masing-masing). Folder tersebut dist/mencakup semua yang tercantum di bagian unduhan yang telah dikompilasi di atas. Folder tersebut docs/menyertakan kode sumber untuk dokumentasi kami, dan examples/penggunaan Bootstrap. Di luar itu, file lain yang disertakan menyediakan dukungan untuk paket, informasi lisensi, dan pengembangan.

Kompilasi CSS dan JavaScript

Bootstrap menggunakan Grunt untuk sistem pembangunannya, dengan metode yang nyaman untuk bekerja dengan kerangka kerja. Begitulah cara kami mengkompilasi kode kami, menjalankan tes, dan banyak lagi.

Memasang Grunt

Untuk menginstal Grunt, Anda harus terlebih dahulu mengunduh dan menginstal node.js (termasuk npm). npm adalah singkatan dari node paket modul dan merupakan cara untuk mengelola dependensi pengembangan melalui node.js.

1. Instal grunt-clisecara global dengan npm install -g grunt-cli.
2. Arahkan ke /bootstrap/direktori root, lalu jalankan npm install. npm akan melihat package.jsonfile dan secara otomatis menginstal dependensi lokal yang diperlukan yang terdaftar di sana.

Setelah selesai, Anda akan dapat menjalankan berbagai perintah Grunt yang disediakan dari baris perintah.

Perintah Grunt yang tersedia

grunt dist(Cukup kompilasi CSS dan JavaScript)

Membuat ulang /dist/direktori dengan file CSS dan JavaScript yang dikompilasi dan diperkecil. Sebagai pengguna Bootstrap, ini biasanya perintah yang Anda inginkan.

grunt watch(Jam tangan)

Menonton file sumber Kurang dan secara otomatis mengkompilasi ulang ke CSS setiap kali Anda menyimpan perubahan.

grunt test(Jalankan tes)

Menjalankan JSHint dan menjalankan tes QUnit tanpa kepala di PhantomJS .

grunt docs(Bangun & uji aset dokumen)

Membangun dan menguji CSS, JavaScript, dan aset lain yang digunakan saat menjalankan dokumentasi secara lokal melalui bundle exec jekyll serve.

grunt(Bangun semuanya dan jalankan tes)

Mengkompilasi dan mengecilkan CSS dan JavaScript, membuat situs web dokumentasi, menjalankan validator HTML5 terhadap dokumen, membuat ulang aset Customizer, dan banyak lagi. Membutuhkan Jekyll . Biasanya hanya diperlukan jika Anda meretas Bootstrap itu sendiri.

Penyelesaian masalah

Jika Anda mengalami masalah dengan menginstal dependensi atau menjalankan perintah Grunt, pertama-tama hapus /node_modules/direktori yang dibuat oleh npm. Kemudian, jalankan kembali npm install.

Template dasar

Mulailah dengan template HTML dasar ini, atau ubah contoh berikut . Kami harap Anda dapat menyesuaikan template dan contoh kami, mengadaptasinya agar sesuai dengan kebutuhan Anda.

Salin HTML di bawah ini untuk mulai bekerja dengan dokumen Bootstrap minimal.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for 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://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Contoh

Bangun template dasar di atas dengan banyak komponen Bootstrap. Kami mendorong Anda untuk menyesuaikan dan mengadaptasi Bootstrap agar sesuai dengan kebutuhan proyek individu Anda.

Dapatkan kode sumber untuk setiap contoh di bawah ini dengan mengunduh repositori Bootstrap . Contoh dapat ditemukan di docs/examples/direktori.

Menggunakan kerangka

Template pemula

Tidak ada apa-apa selain dasar-dasarnya: kompilasi CSS dan JavaScript bersama dengan sebuah wadah.

Tema bootstrap

Muat tema Bootstrap opsional untuk pengalaman yang ditingkatkan secara visual.

kisi-kisi

Beberapa contoh tata letak kisi dengan keempat tingkatan, bersarang, dan banyak lagi.

Jumbotron

Bangun di sekitar jumbotron dengan navbar dan beberapa kolom kisi dasar.

Jumbotron sempit

Buat halaman yang lebih khusus dengan mempersempit penampung default dan jumbotron.

Navbar beraksi

navigasi

Template super dasar yang menyertakan navbar bersama dengan beberapa konten tambahan.

Navbar atas statis

Template super dasar dengan navbar atas statis bersama dengan beberapa konten tambahan.

Bilah navigasi tetap

Template super dasar dengan navbar atas tetap bersama dengan beberapa konten tambahan.

Komponen khusus

Menutupi

Template satu halaman untuk membuat halaman rumah yang sederhana dan indah.

Korsel

Kustomisasi navbar dan carousel, lalu tambahkan beberapa komponen baru.

Blog

Tata letak blog dua kolom sederhana dengan navigasi, tajuk, dan jenis khusus.

Dasbor

Struktur dasar untuk dasbor admin dengan sidebar dan navbar tetap.

Halaman masuk

Tata letak dan desain formulir khusus untuk formulir masuk sederhana.

Navigasi yang dibenarkan

Buat bilah navigasi khusus dengan tautan yang dibenarkan. Perhatian! Tidak terlalu ramah Safari.

Catatan kaki lengket

Lampirkan footer ke bagian bawah viewport saat konten lebih pendek darinya.

Footer lengket dengan navbar

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

Eksperimen

Bootstrap tidak responsif

Nonaktifkan respons Bootstrap dengan mudah per dokumen kami .

Di luar kanvas

Buat menu navigasi di luar kanvas yang dapat dialihkan untuk digunakan dengan Bootstrap.

Peralatan

Bootlint

Bootlint adalah alat linter HTML Bootstrap resmi. Secara otomatis memeriksa beberapa kesalahan HTML umum di halaman web yang menggunakan Bootstrap dengan cara yang cukup "vanilla". Komponen/widget Vanilla Bootstrap memerlukan bagian DOM mereka agar sesuai dengan struktur tertentu. Bootlint memeriksa apakah komponen Bootstrap memiliki HTML yang terstruktur dengan benar. Pertimbangkan untuk menambahkan Bootlint ke rantai alat pengembangan web Bootstrap Anda sehingga tidak ada kesalahan umum yang memperlambat pengembangan proyek Anda.

Masyarakat

Tetap up to date pada pengembangan Bootstrap dan menjangkau komunitas dengan sumber daya yang bermanfaat ini.

• Baca dan berlangganan Blog Bootstrap Resmi .
• Mengobrol dengan sesama Bootstrap menggunakan IRC di irc.freenode.netserver, di saluran ##bootstrap .
• Untuk bantuan menggunakan Bootstrap, tanyakan di StackOverflow menggunakan tagtwitter-bootstrap-3 .
• Pengembang harus menggunakan kata kunci bootstrappada paket yang memodifikasi atau menambah fungsionalitas Bootstrap saat mendistribusikan melalui npm atau mekanisme pengiriman serupa untuk dapat ditemukan secara maksimal.
• Temukan contoh inspiratif dari orang-orang yang membangun dengan Bootstrap di Bootstrap Expo .

Anda juga dapat mengikuti @getbootstrap di Twitter untuk gosip terbaru dan video musik keren.

Menonaktifkan daya tanggap

Bootstrap secara otomatis menyesuaikan halaman Anda untuk berbagai ukuran layar. Berikut cara menonaktifkan fitur ini agar halaman Anda berfungsi seperti contoh non-responsif ini .

Langkah-langkah untuk menonaktifkan respons halaman

1. Abaikan viewport yang <meta>disebutkan dalam dokumen CSS
2. Ganti widthpada .containeruntuk setiap tingkat kisi dengan lebar tunggal, misalnya width: 970px !important;Pastikan bahwa ini muncul setelah CSS Bootstrap default. Anda dapat secara opsional menghindari !importantdengan kueri media atau beberapa pemilih-fu.
3. Jika menggunakan navbars, hapus semua navbar yang menciutkan dan memperluas perilaku.
4. Untuk tata letak kisi, gunakan .col-xs-*kelas sebagai tambahan, atau sebagai pengganti, kelas sedang/besar. Jangan khawatir, kisi perangkat ekstra kecil menskalakan ke semua resolusi.

Anda masih memerlukan Respond.js untuk IE8 (karena kueri media kami masih ada dan perlu diproses). Ini menonaktifkan aspek "situs seluler" dari Bootstrap.

Template bootstrap dengan responsivitas dinonaktifkan

Kami telah menerapkan langkah-langkah ini ke sebuah contoh. Baca kode sumbernya untuk melihat perubahan spesifik yang diterapkan.

Lihat contoh non-responsif

Dukungan browser dan perangkat

Bootstrap dibuat untuk bekerja paling baik di browser desktop dan seluler terbaru, yang berarti browser lama mungkin menampilkan gaya yang berbeda, meskipun berfungsi penuh, rendering komponen tertentu.

Browser yang didukung

Secara khusus, kami mendukung versi terbaru dari browser dan platform berikut.

Peramban alternatif yang menggunakan versi terbaru WebKit, Blink, atau Gecko, baik secara langsung atau melalui API tampilan web platform, tidak didukung secara eksplisit. Namun, Bootstrap harus (dalam banyak kasus) ditampilkan dan berfungsi dengan benar di browser ini juga. Informasi dukungan yang lebih spesifik disediakan di bawah ini.

Perangkat seluler

Secara umum, Bootstrap mendukung versi terbaru dari masing-masing browser default platform utama. Perhatikan bahwa browser proxy (seperti Opera Mini, mode Turbo Opera Mobile, UC Browser Mini, Amazon Silk) tidak didukung.

Peramban desktop

Demikian pula, versi terbaru dari sebagian besar browser desktop didukung.

Di Windows, kami mendukung Internet Explorer 8-11 .

Untuk Firefox, selain rilis stabil normal terbaru, kami juga mendukung Firefox versi Extended Support Release (ESR) terbaru.

Secara tidak resmi, Bootstrap akan terlihat dan berperilaku cukup baik di Chromium dan Chrome untuk Linux, Firefox untuk Linux, dan Internet Explorer 7, serta Microsoft Edge, meskipun tidak didukung secara resmi.

Untuk daftar beberapa bug browser yang harus dihadapi Bootstrap, lihat Dinding bug browser kami .

Internet Explorer 8 dan 9

Internet Explorer 8 dan 9 juga didukung, namun perlu diketahui bahwa beberapa properti CSS3 dan elemen HTML5 tidak sepenuhnya didukung oleh browser ini. Selain itu, Internet Explorer 8 memerlukan penggunaan Respond.js untuk mengaktifkan dukungan kueri media.

Kunjungi Dapatkah saya menggunakan... untuk detail tentang dukungan browser untuk fitur CSS3 dan HTML5.

Internet Explorer 8 dan Respond.js

Waspadalah terhadap peringatan berikut saat menggunakan Respond.js di lingkungan pengembangan dan produksi Anda untuk Internet Explorer 8.

Respond.js dan CSS lintas-domain

Menggunakan Respond.js dengan CSS yang dihosting di domain (sub) yang berbeda (misalnya, pada CDN) memerlukan beberapa penyiapan tambahan. Lihat dokumen Respond.js untuk detailnya.

Respond.js danfile://

Karena aturan keamanan browser, Respond.js tidak berfungsi dengan halaman yang dilihat melalui file://protokol (seperti saat membuka file HTML lokal). Untuk menguji fitur responsif di IE8, lihat halaman Anda melalui HTTP(S). Lihat dokumen Respond.js untuk detailnya.

Respond.js dan@import

Respond.js tidak berfungsi dengan CSS yang direferensikan melalui @import. Secara khusus, beberapa konfigurasi Drupal diketahui menggunakan @import. Lihat dokumen Respond.js untuk detailnya.

Internet Explorer 8 dan ukuran kotak

IE8 tidak sepenuhnya mendukung box-sizing: border-box;bila dikombinasikan dengan min-width, max-width, min-height, atau max-height. Oleh karena itu, mulai v3.0.1, kami tidak lagi menggunakan max-widthdi .containers.

Internet Explorer 8 dan @font-face

IE8 memiliki beberapa masalah @font-faceketika digabungkan dengan :before. Bootstrap menggunakan kombinasi itu dengan Glyphicons-nya. Jika halaman di-cache, dan dimuat tanpa mouse di atas jendela (yaitu tekan tombol segarkan atau muat sesuatu di iframe) maka halaman akan dirender sebelum font dimuat. Mengarahkan kursor ke halaman (tubuh) akan menampilkan beberapa ikon dan mengarahkan kursor ke ikon yang tersisa akan menampilkannya juga. Lihat edisi #13863 untuk detailnya.

Mode Kompatibilitas IE

Bootstrap tidak didukung dalam mode kompatibilitas Internet Explorer yang lama. Untuk memastikan Anda menggunakan mode rendering terbaru untuk IE, pertimbangkan untuk menyertakan <meta>tag yang sesuai di halaman Anda:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Konfirmasikan mode dokumen dengan membuka alat debugging: tekan F12dan centang "Mode Dokumen".

Tag ini disertakan dalam semua dokumentasi dan contoh Bootstrap untuk memastikan kemungkinan rendering terbaik di setiap versi Internet Explorer yang didukung.

Lihat pertanyaan StackOverflow ini untuk informasi selengkapnya.

Internet Explorer 10 di Windows 8 dan Windows Phone 8

Internet Explorer 10 tidak membedakan lebar perangkat dari lebar viewport , dan dengan demikian tidak menerapkan kueri media dengan benar di CSS Bootstrap. Biasanya Anda baru saja menambahkan potongan cepat CSS untuk memperbaikinya:

@-ms-viewport       { width: device-width; }

Namun, ini tidak berfungsi untuk perangkat yang menjalankan Windows Phone 8 versi yang lebih lama dari Pembaruan 3 (alias GDR3) , karena menyebabkan perangkat tersebut menampilkan sebagian besar tampilan desktop alih-alih tampilan "telepon" yang sempit. Untuk mengatasinya, Anda harus menyertakan CSS dan JavaScript berikut untuk mengatasi bug .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Untuk informasi lebih lanjut dan panduan penggunaan, baca Windows Phone 8 dan Lebar Perangkat .

Sebagai persiapan, kami menyertakan ini dalam semua dokumentasi dan contoh Bootstrap sebagai demonstrasi.

Safari persen pembulatan

Mesin rendering versi Safari sebelum v7.1 untuk OS X dan Safari untuk iOS v8.0 mengalami beberapa masalah dengan jumlah tempat desimal yang digunakan di .col-*-1kelas grid kami. Jadi, jika Anda memiliki 12 kolom kisi individual, Anda akan melihat bahwa kolom tersebut lebih pendek dibandingkan dengan baris kolom lainnya. Selain memutakhirkan Safari/iOS, Anda memiliki beberapa opsi untuk solusi:

• Tambahkan .pull-rightke kolom kisi terakhir Anda untuk mendapatkan perataan kanan-keras
• Tweak persentase Anda secara manual untuk mendapatkan pembulatan sempurna untuk Safari (lebih sulit daripada opsi pertama)

Modal, navbar, dan keyboard virtual

Meluap dan bergulir

Dukungan untuk overflow: hiddenelemen <body>ini cukup terbatas di iOS dan Android. Untuk itu, ketika Anda menggulir melewati bagian atas atau bawah modal di salah satu browser perangkat tersebut, <body>konten akan mulai bergulir. Lihat bug Chrome #175502 (diperbaiki di Chrome v40) dan bug WebKit #153852 .

Bidang teks dan pengguliran iOS

Pada iOS 9.3, saat modal terbuka, jika sentuhan awal gerakan gulir berada dalam batas tekstual <input>atau a <textarea>, <body>konten di bawah modal akan digulir alih-alih modal itu sendiri. Lihat bug WebKit #153856 .

Keyboard virtual

Juga, perhatikan bahwa jika Anda menggunakan navbar tetap atau menggunakan input dalam modal, iOS memiliki bug rendering yang tidak memperbarui posisi elemen tetap saat keyboard virtual dipicu. Beberapa solusi untuk ini termasuk mengubah elemen Anda menjadi position: absoluteatau menggunakan pengatur waktu pada fokus untuk mencoba memperbaiki pemosisian secara manual. Ini tidak ditangani oleh Bootstrap, jadi terserah Anda untuk memutuskan solusi mana yang terbaik untuk aplikasi Anda.

Dropdown Navbar

Elemen .dropdown-backdroptidak digunakan di iOS di nav karena kerumitan pengindeksan-z. Jadi, untuk menutup dropdown di navbars, Anda harus langsung mengklik elemen dropdown (atau elemen lain apa pun yang akan mengaktifkan event click di iOS ).

Pembesaran peramban

Pembesaran halaman pasti menghadirkan artefak rendering di beberapa komponen, baik di Bootstrap dan bagian web lainnya. Bergantung pada masalahnya, kami mungkin dapat memperbaikinya (cari dulu, lalu buka masalah jika perlu). Namun, kami cenderung mengabaikannya karena sering kali tidak ada solusi langsung selain solusi peretasan.

Lengket :hover/ :focusdi ponsel

Meskipun melayang nyata tidak mungkin di sebagian besar layar sentuh, sebagian besar browser seluler meniru dukungan melayang dan membuat :hover"lengket". Dengan kata lain, :hovergaya mulai diterapkan setelah mengetuk elemen dan hanya berhenti diterapkan setelah pengguna mengetuk beberapa elemen lainnya. Ini dapat menyebabkan status Bootstrap :hovermenjadi "macet" yang tidak diinginkan pada browser tersebut. Beberapa browser seluler juga membuat :focuslengket serupa. Saat ini tidak ada solusi sederhana untuk masalah ini selain menghapus gaya tersebut sepenuhnya.

Pencetakan

Bahkan di beberapa browser modern, pencetakan bisa jadi unik.

Khususnya, pada Chrome v32 dan apa pun setelan marginnya, Chrome menggunakan lebar area pandang yang jauh lebih sempit daripada ukuran kertas fisik saat menyelesaikan kueri media saat mencetak laman web. Ini dapat mengakibatkan kisi ekstra-kecil Bootstrap diaktifkan secara tidak terduga saat mencetak. Lihat masalah #12078 dan bug Chrome #273306 untuk beberapa detail. Solusi yang disarankan:

• Rangkullah kisi ekstra kecil dan pastikan halaman Anda terlihat dapat diterima di bawahnya.
• Sesuaikan nilai @screen-*variabel Kurang sehingga kertas printer Anda dianggap lebih besar daripada ekstra kecil.
• Tambahkan kueri media khusus untuk mengubah titik henti ukuran kisi hanya untuk media cetak.

Juga, pada Safari v8.0, lebar tetap .containers dapat menyebabkan Safari menggunakan ukuran font yang sangat kecil saat mencetak. Lihat #14868 dan bug WebKit #138192 untuk detail selengkapnya. Salah satu solusi potensial untuk ini adalah menambahkan CSS berikut:

@media print {
  .container {
    width: auto;
  }
}

Peramban stok Android

Di luar kotak, Android 4.1 (dan bahkan beberapa rilis yang lebih baru tampaknya) dikirimkan dengan aplikasi Browser sebagai browser web pilihan default (sebagai lawan dari Chrome). Sayangnya, aplikasi Browser memiliki banyak bug dan inkonsistensi dengan CSS secara umum.

Pilih menu

Pada <select>elemen, browser stok Android tidak akan menampilkan kontrol samping jika ada border-radiusdan/atau borderditerapkan. (Lihat pertanyaan StackOverflow ini untuk detailnya.) Gunakan cuplikan kode di bawah ini untuk menghapus CSS yang melanggar dan merendernya <select>sebagai elemen tanpa gaya di browser stok Android. Mengendus agen pengguna menghindari gangguan dengan browser Chrome, Safari, dan Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Mau lihat contohnya? Lihat demo JS Bin ini.

Validator

Untuk memberikan pengalaman terbaik bagi browser lama dan buggy, Bootstrap menggunakan peretasan browser CSS di beberapa tempat untuk menargetkan CSS khusus ke versi browser tertentu untuk mengatasi bug di browser itu sendiri. Peretasan ini dapat dimengerti menyebabkan validator CSS mengeluh bahwa mereka tidak valid. Di beberapa tempat, kami juga menggunakan fitur CSS mutakhir yang belum sepenuhnya terstandarisasi, tetapi ini digunakan murni untuk peningkatan progresif.

Peringatan validasi ini tidak penting dalam praktiknya karena bagian non-retas dari CSS kami benar-benar memvalidasi dan bagian yang diretas tidak mengganggu berfungsinya bagian non-retas, oleh karena itu kami sengaja mengabaikan peringatan khusus ini.

Dokumen HTML kami juga memiliki beberapa peringatan validasi HTML yang sepele dan tidak penting karena kami menyertakan solusi untuk bug Firefox tertentu .

Dukungan pihak ketiga

Meskipun kami tidak secara resmi mendukung plugin atau add-on pihak ketiga, kami menawarkan beberapa saran yang berguna untuk membantu menghindari potensi masalah dalam proyek Anda.

Ukuran kotak

Beberapa perangkat lunak pihak ketiga, termasuk Google Maps dan Google Custom Search Engine, bertentangan dengan Bootstrap karena * { box-sizing: border-box; }, aturan yang membuatnya paddingtidak memengaruhi lebar akhir yang dihitung dari suatu elemen. Pelajari lebih lanjut tentang model dan ukuran kotak di Trik CSS .

Bergantung pada konteksnya, Anda dapat mengganti sesuai kebutuhan (Opsi 1) atau mengatur ulang ukuran kotak untuk seluruh wilayah (Opsi 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Aksesibilitas

Bootstrap mengikuti standar web umum dan—dengan sedikit usaha ekstra—dapat digunakan untuk membuat situs yang dapat diakses oleh mereka yang menggunakan AT .

Lewati navigasi

Jika navigasi Anda berisi banyak tautan dan muncul sebelum konten utama di DOM, tambahkan Skip to main contenttautan sebelum navigasi (untuk penjelasan sederhana, lihat artikel Proyek A11Y ini tentang melewatkan tautan navigasi ). Menggunakan .sr-onlykelas akan menyembunyikan tautan lewati secara visual, dan .sr-only-focusablekelas akan memastikan bahwa tautan menjadi terlihat setelah difokuskan (untuk pengguna keyboard yang dapat melihat).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Judul bersarang

Saat menyusun judul ( <h1>- <h6>), header dokumen utama Anda harus berupa file <h1>. Judul berikutnya harus menggunakan logika <h2>- <h6>sehingga pembaca layar dapat membuat daftar isi untuk halaman Anda.

Pelajari lebih lanjut di HTML CodeSniffer dan AccessAbility Penn State .

Kontras warna

Saat ini, beberapa kombinasi warna default tersedia di Bootstrap (seperti berbagai kelas tombol bergaya , beberapa warna penyorotan kode yang digunakan untuk blok kode dasar , kelas pembantu .bg-primary latar belakang kontekstual , dan warna tautan default saat digunakan pada latar belakang putih) memiliki rasio kontras rendah (di bawah rasio yang direkomendasikan 4,5:1 ). Hal ini dapat menyebabkan masalah bagi pengguna dengan low vision atau yang buta warna. Warna default ini mungkin perlu dimodifikasi untuk meningkatkan kontras dan keterbacaannya.

Sumber daya tambahan

• Bookmarklet "HTML Codesniffer" untuk mengidentifikasi masalah aksesibilitas
• Ekstensi Alat Pengembang Aksesibilitas Chrome
• Penganalisis Kontras Warna
• Proyek A11Y
• Dokumentasi aksesibilitas MDN

FAQ Lisensi

Bootstrap dirilis di bawah lisensi MIT dan merupakan hak cipta Twitter 2016. Direbus menjadi potongan-potongan yang lebih kecil, dapat digambarkan dengan kondisi berikut.

Ini mengharuskan Anda untuk:

• Simpan pemberitahuan lisensi dan hak cipta yang disertakan dalam file CSS dan JavaScript Bootstrap saat Anda menggunakannya dalam karya Anda

Ini memungkinkan Anda untuk:

• Unduh dan gunakan Bootstrap secara gratis, seluruhnya atau sebagian, untuk keperluan pribadi, pribadi, internal perusahaan, atau komersial
• Gunakan Bootstrap dalam paket atau distribusi yang Anda buat
• Ubah kode sumber
• Berikan sublisensi untuk memodifikasi dan mendistribusikan Bootstrap ke pihak ketiga yang tidak termasuk dalam lisensi

Ini melarang Anda untuk:

• Tahan penulis dan pemilik lisensi yang bertanggung jawab atas kerusakan karena Bootstrap disediakan tanpa jaminan
• Tahan pencipta atau pemegang hak cipta Bootstrap bertanggung jawab
• Distribusikan ulang setiap bagian dari Bootstrap tanpa atribusi yang tepat
• Gunakan merek apa pun yang dimiliki oleh Twitter dengan cara apa pun yang mungkin menyatakan atau menyiratkan bahwa Twitter mendukung distribusi Anda
• Menggunakan merek apa pun yang dimiliki oleh Twitter dengan cara apa pun yang mungkin menyatakan atau menyiratkan bahwa Anda membuat perangkat lunak Twitter yang dipermasalahkan

Itu tidak mengharuskan Anda untuk:

• Sertakan sumber Bootstrap itu sendiri, atau modifikasi apa pun yang mungkin telah Anda buat, dalam redistribusi apa pun yang Anda kumpulkan yang menyertakannya
• Kirimkan perubahan yang Anda buat ke Bootstrap kembali ke proyek Bootstrap (meskipun umpan balik seperti itu dianjurkan)

Lisensi Bootstrap lengkap terletak di repositori proyek untuk informasi lebih lanjut.

Terjemahan

Anggota komunitas telah menerjemahkan dokumentasi Bootstrap ke berbagai bahasa. Tidak ada yang didukung secara resmi dan mungkin tidak selalu terbarui.

• Bootstrap (Cina)
• Bootstrap 3 (Cina (Tradisional))
• Bootstrap på Dansk (Denmark)
• Bootstrap en Français (Prancis)
• Bootstrap auf Deutsch (Jerman)
• Bootstrap di Italiano (Italia)
• Bootstrap (Korea)
• Bootstrap em Português do Brasil (Portugis Brasil)
• Bootstrap о-русски (Rusia)
• Bootstrap en Espaol (Spanyol)
• Türkçe Bootstrap (Turki)
• Bootstrap аїнською (Ukraina)
• Bootstrap bằng tiếng Việt (Vietnam)

Kami tidak membantu mengatur atau menghosting terjemahan, kami hanya menautkannya.

Selesai terjemahan baru atau lebih baik? Buka permintaan tarik untuk menambahkannya ke daftar kami.