Ngundhuh

Bootstrap (saiki v3.4.1) nduweni sawetara cara sing gampang kanggo miwiti kanthi cepet, saben wong narik kawigaten kanggo level skill lan kasus panggunaan sing beda. Waca liwat kanggo ndeleng apa sing cocog karo kabutuhan tartamtu.

jsDelivr

Wong-wong ing jsDelivr menehi dhukungan CDN kanggo CSS lan JavaScript Bootstrap. Cukup nggunakake pranala jsDelivr iki .

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

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

Instal nganggo Bower

Sampeyan uga bisa nginstal lan ngatur Bootstrap's Less, CSS, JavaScript, lan fonts nggunakake Bower :

bower install bootstrap

Instal nganggo npm

Sampeyan uga bisa nginstal Bootstrap nggunakake npm :

npm install bootstrap@3

require('bootstrap')bakal mbukak kabeh plugin jQuery Bootstrap menyang obyek jQuery. Modul bootstrapdhewe ora ngekspor apa-apa. Sampeyan bisa mbukak plugin jQuery Bootstrap kanthi manual kanthi ngemot /js/*.jsfile ing direktori tingkat paling dhuwur paket kasebut.

Bootstrap package.jsonngemot sawetara metadata tambahan ing ngisor iki:

• less- path kanggo Bootstrap kang utama file Kurang sumber
• style- path menyang CSS non-minified Bootstrap sing wis dikompilasi nggunakake setelan gawan (ora kustomisasi)

Instal nganggo Composer

Sampeyan uga bisa nginstal lan ngatur Bootstrap's Less, CSS, JavaScript, lan fonts nggunakake Composer :

composer require twbs/bootstrap

Autoprefixer dibutuhake kanggo Kurang / Sass

Bootstrap nggunakake Autoprefixer kanggo ngatasi prefiks vendor CSS . Yen sampeyan lagi nyusun Bootstrap saka sumber Less/Sass lan ora nggunakake Gruntfile, sampeyan kudu nggabungake Autoprefixer menyang proses mbangun sampeyan dhewe. Yen sampeyan nggunakake Bootstrap sing wis dikompilasi utawa nggunakake Gruntfile, sampeyan ora perlu kuwatir babagan iki amarga Autoprefixer wis terintegrasi menyang Gruntfile.

Apa sing kalebu

Bootstrap bisa diundhuh ing rong wujud, ing ngendi sampeyan bakal nemokake direktori lan file ing ngisor iki, kanthi logis ngelompokake sumber daya umum lan nyedhiyakake variasi sing dikompilasi lan diminimalisir.

Bootstrap sing wis dikompilasi

Sawise diundhuh, unzip folder sing dikompres kanggo ndeleng struktur Bootstrap (dikompilasi). Sampeyan bakal weruh kaya iki:

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

Iki minangka wangun Bootstrap sing paling dhasar: file sing wis dikompilasi kanggo panggunaan cepet ing meh kabeh proyek web. Kita nyedhiyakake kompilasi CSS lan JS ( bootstrap.*), uga kompilasi lan minified CSS lan JS ( bootstrap.min.*). Peta sumber CSS ( bootstrap.*.map) kasedhiya kanggo digunakake karo piranti pangembang browser tartamtu. Fonts saka Glyphicons kalebu, uga tema Bootstrap opsional.

Kode sumber Bootstrap

Download kode sumber Bootstrap kalebu CSS, JavaScript, lan aset font sing wis dikompilasi, bebarengan karo sumber Kurang, JavaScript, lan dokumentasi. Luwih khusus, kalebu ing ngisor iki lan liya-liyane:

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

, less/, js/lan fonts/minangka kode sumber kanggo font CSS, JS, lan lambang (masing-masing). dist/Folder kasebut kalebu kabeh sing kadhaptar ing bagean download sing wis dikompilasi ing ndhuwur . Folder docs/kasebut kalebu kode sumber kanggo dokumentasi kita, lan examples/panggunaan Bootstrap. Kajaba iku, file liyane sing kalebu nyedhiyakake dhukungan kanggo paket, informasi lisensi, lan pangembangan.

Kompilasi CSS lan JavaScript

Bootstrap nggunakake Grunt kanggo sistem mbangun, kanthi cara sing trep kanggo nggarap kerangka kasebut. Iku carane kita ngumpulake kode kita, mbukak tes, lan liyane.

Nginstal Grunt

Kanggo nginstal Grunt, sampeyan kudu ngundhuh lan nginstal node.js ( sing kalebu npm). npm singkatan saka modul rangkep simpul lan minangka cara kanggo ngatur dependensi pembangunan liwat node.js.

1. Instal grunt-cliglobal kanthi npm install -g grunt-cli.
2. /bootstrap/Navigasi menyang direktori root , banjur mbukak npm install. npm bakal ndeleng package.jsonfile kasebut lan kanthi otomatis nginstal dependensi lokal sing dibutuhake ing kana.

Yen wis rampung, sampeyan bakal bisa mbukak macem-macem printah Grunt sing diwenehake saka baris printah.

Printah Grunt kasedhiya

grunt dist(Cukup kompilasi CSS lan JavaScript)

Regenerasi /dist/direktori kanthi file CSS lan JavaScript sing dikompilasi lan dikurangi. Minangka pangguna Bootstrap, iki biasane prentah sing dikarepake.

grunt watch(Waca)

Watches file sumber Kurang lan otomatis recompiles menyang CSS saben sampeyan nyimpen owah-owahan.

grunt test(Mlaku tes)

Nganggo JSHint lan nglakokake tes QUnit ing browser nyata amarga Karma .

grunt docs(Mbangun & nguji aset docs)

Mbangun lan nguji CSS, JavaScript, lan aset liyane sing digunakake nalika mbukak dokumentasi sacara lokal liwat bundle exec jekyll serve.

grunt(Mbangun pancen kabeh lan mbukak tes)

Nglumpukake lan nyilikake CSS lan JavaScript, mbangun situs web dokumentasi, nglakokake validator HTML5 marang docs, regenerasi aset Customizer, lan liya-liyane. Mbutuhake Jekyll . Biasane mung perlu yen sampeyan hacking ing Bootstrap dhewe.

Ngatasi masalah

Yen sampeyan nemoni masalah nalika nginstal dependensi utawa nglakokake perintah Grunt, mula mbusak /node_modules/direktori sing digawe npm. Banjur, mbukak maneh npm install.

Cithakan dhasar

Mulai nganggo cithakan HTML dhasar iki, utawa owahi conto iki . Muga-muga sampeyan bakal ngatur cithakan lan conto, nyesuekake supaya cocog karo kabutuhan sampeyan.

Salin HTML ing ngisor iki kanggo miwiti nggarap 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Tuladha

Gawe template dhasar ing ndhuwur kanthi akeh komponen Bootstrap. Disaranake sampeyan ngatur lan ngganti Bootstrap supaya cocog karo kabutuhan proyek sampeyan.

Entuk kode sumber kanggo saben conto ing ngisor iki kanthi ngundhuh repositori Bootstrap . Conto bisa ditemokake ing docs/examples/direktori.

Nggunakake kerangka

Cithakan wiwitan

Ora ana apa-apa nanging dhasar: kompilasi CSS lan JavaScript bebarengan karo wadhah.

Tema Bootstrap

Muat tema Bootstrap opsional kanggo pengalaman visual sing ditingkatake.

Grid

Akeh conto tata letak kothak kanthi papat tingkatan, nesting, lan liya-liyane.

Jumbotron

Mbangun watara jumbotron karo navbar lan sawetara kolom kothak dhasar.

Jumbotron sempit

Mbangun kaca sing luwih khusus kanthi nyilikake wadhah standar lan jumbotron.

Navbars ing tumindak

Navbar

Cithakan dhasar super sing kalebu navbar bebarengan karo sawetara isi tambahan.

Navbar ndhuwur statis

Cithakan dhasar super kanthi navbar ndhuwur statis bebarengan karo sawetara konten tambahan.

Navbar tetep

Cithakan dhasar super karo navbar ndhuwur tetep bebarengan karo sawetara isi tambahan.

Komponen khusus

Panutup

Cithakan siji-kaca kanggo mbangun kaca ngarep sing prasaja lan apik.

Carousel

Ngatur navbar lan carousel, banjur nambah sawetara komponen anyar.

Blog

Tata letak blog rong kolom sing prasaja kanthi navigasi, header, lan jinis khusus.

Dashboard

Struktur dhasar kanggo dashboard admin kanthi sidebar lan navbar tetep.

Kaca mlebu

Tata letak lan desain formulir khusus kanggo formulir sing gampang.

Dibenerake nav

Nggawe navbar khusus kanthi pranala sing bener. Kepala munggah! Ora banget Safari loropaken.

Kaki kelet

Pasang footer ing sisih ngisor viewport nalika isi luwih cendhek tinimbang.

footer caket karo navbar

Pasang footer ing sisih ngisor viewport kanthi navbar tetep ing sisih ndhuwur.

Eksperimen

Bootstrap sing ora responsif

Gampang mateni responsif Bootstrap miturut dokumen kita .

Off-kanvas

Gawe menu navigasi off-canvas sing bisa diowahi kanggo digunakake karo Bootstrap.

piranti

Bootlint

Bootlint minangka alat linter HTML Bootstrap resmi. Iku kanthi otomatis mriksa sawetara kesalahan HTML umum ing kaca web sing nggunakake Bootstrap kanthi cara sing cukup "vanila". Komponen/widget Vanilla Bootstrap mbutuhake bagean saka DOM supaya cocog karo struktur tartamtu. Bootlint mriksa manawa komponen Bootstrap duwe HTML sing terstruktur kanthi bener. Coba tambahake Bootlint menyang toolchain pangembangan web Bootstrap supaya ora ana kesalahan umum sing nyebabake pangembangan proyek sampeyan.

Masyarakat

Tetep gaul babagan pangembangan Bootstrap lan tekan komunitas kanthi sumber daya sing migunani iki.

• Waca lan langganan Blog Bootstrap Resmi .
• Ngobrol karo kanca Bootstrappers nggunakake IRC ing irc.freenode.netserver, ing saluran ##bootstrap .
• Kanggo bantuan nggunakake Bootstrap, takon ing StackOverflow nggunakake tagtwitter-bootstrap-3 .
• Pangembang kudu nggunakake tembung kunci bootstraping paket sing ngowahi utawa nambah fungsi Bootstrap nalika nyebarake liwat npm utawa mekanisme pangiriman sing padha supaya bisa ditemokake kanthi maksimal.
• Temokake conto inspirasi wong sing nggawe Bootstrap ing Bootstrap Expo .

Sampeyan uga bisa tindakake @getbootstrap ing Twitter kanggo gosip paling anyar lan video musik apik tenan.

Mateni responsif

Bootstrap kanthi otomatis nyetel kaca kanggo macem-macem ukuran layar. Mangkene carane mateni fitur iki supaya kaca sampeyan bisa digunakake kaya conto sing ora responsif iki .

Langkah-langkah kanggo mateni responsif kaca

1. Ngilangi viewport sing <meta>kasebut ing dokumen CSS
2. Override ing widthkanggo .containersaben undakan kothak karo jembaré siji, contone width: 970px !important;Priksa manawa iki teka sawise standar Bootstrap CSS. Sampeyan bisa milih supaya !importantkaro pitakon media utawa sawetara pamilih-fu.
3. Yen nggunakake navbars, mbusak kabeh navbar collapsing lan ngembangaken prilaku.
4. Kanggo tata letak kothak, gunakake .col-xs-*kelas ing saliyane, utawa ing panggonan, medium / gedhe. Aja kuwatir, timbangan kothak piranti ekstra cilik kanggo kabeh resolusi.

Sampeyan isih butuh Respond.js kanggo IE8 (amarga pitakon media isih ana lan kudu diproses). Iki mateni aspek "situs seluler" saka Bootstrap.

Cithakan Bootstrap kanthi responsif dipateni

Kita wis ngetrapake langkah kasebut menyang conto. Waca kode sumber kanggo ndeleng owah-owahan tartamtu sing ditindakake.

Deleng conto non-responsif

Dhukungan browser lan piranti

Bootstrap dibangun supaya bisa dianggo paling apik ing browser desktop lan seluler paling anyar, tegese browser lawas bisa nampilake rendering komponen tartamtu kanthi gaya sing beda-beda, sanajan fungsine lengkap.

Browser sing didhukung

Khusus, kita ndhukung versi paling anyar saka browser lan platform ing ngisor iki.

Browser alternatif sing nggunakake WebKit, Blink, utawa Gecko versi paling anyar, langsung utawa liwat API tampilan web platform, ora didhukung kanthi jelas. Nanging, Bootstrap kudu (ing umume kasus) nampilake lan bisa digunakake kanthi bener ing browser kasebut. Informasi dhukungan sing luwih spesifik diwenehake ing ngisor iki.

Piranti seluler

Umumé, Bootstrap ndhukung versi paling anyar saka saben browser standar platform utama. Elinga yen browser proxy (kayata Opera Mini, mode Turbo Opera Mobile, UC Browser Mini, Amazon Silk) ora didhukung.

Browser desktop

Kajaba iku, versi paling anyar saka akeh browser desktop didhukung.

Ing Windows, kita ndhukung Internet Explorer 8-11 .

Kanggo Firefox, saliyane release stabil normal paling anyar, kita uga ndhukung versi Extended Support Release (ESR) Firefox paling anyar.

Ora resmi, Bootstrap kudu katon lan tumindak kanthi becik ing Chromium lan Chrome kanggo Linux, Firefox kanggo Linux, lan Internet Explorer 7, uga Microsoft Edge, sanajan ora didhukung kanthi resmi.

Kanggo dhaptar sawetara bug browser sing kudu ditindakake Bootstrap, deleng Tembok bug browser .

Internet Explorer 8 lan 9

Internet Explorer 8 lan 9 uga didhukung, nanging kudu dingerteni manawa sawetara properti CSS3 lan unsur HTML5 ora didhukung kanthi lengkap dening browser kasebut. Kajaba iku, Internet Explorer 8 mbutuhake panggunaan Respond.js kanggo ngaktifake dhukungan pitakon media.

Dolan maring Can I use... kanggo rincian babagan dhukungan browser fitur CSS3 lan HTML5.

Internet Explorer 8 lan Respond.js

Ati-ati karo peringatan ing ngisor iki nalika nggunakake Respond.js ing lingkungan pangembangan lan produksi kanggo Internet Explorer 8.

Respond.js lan cross-domain CSS

Nggunakake Respond.js karo CSS sing di-host ing (sub)domain (contone, ing CDN) mbutuhake sawetara persiyapan tambahan. Deleng Respond.js docs kanggo rincian.

Respond.js lanfile://

Amarga aturan keamanan browser, Respond.js ora bisa digunakake karo kaca sing dideleng liwat file://protokol (kaya nalika mbukak file HTML lokal). Kanggo nguji fitur responsif ing IE8, deleng kaca sampeyan liwat HTTP(S). Deleng Respond.js docs kanggo rincian.

Respond.js lan@import

Respond.js ora bisa digunakake karo CSS sing dirujuk liwat @import. Ing tartamtu, sawetara konfigurasi Drupal dikenal kanggo nggunakake @import. Deleng Respond.js docs kanggo rincian.

Internet Explorer 8 lan ukuran kothak

IE8 ora ndhukung kanthi lengkap box-sizing: border-box;nalika digabungake karo min-width, max-width, min-height, utawa max-height. Mulane, ing v3.0.1, kita ora nggunakake maneh max-widthing .containers.

Internet Explorer 8 lan @font-face

IE8 duwe sawetara masalah @font-facenalika digabungake karo :before. Bootstrap nggunakake kombinasi kasebut karo Glyphicons. Yen kaca di-cache, lan dimuat tanpa mouse liwat jendhela (yaiku pencet tombol refresh utawa mbukak soko ing iframe) banjur kaca bakal render sadurunge font mbukak. Nglayang ing kaca (awak) bakal nuduhake sawetara lambang lan nglayang ing lambang sing isih ana bakal nuduhake uga. Deleng masalah #13863 kanggo rincian.

Mode Kompatibilitas IE

Bootstrap ora didhukung ing mode kompatibilitas Internet Explorer lawas. Kanggo mesthekake yen sampeyan nggunakake mode rendering paling anyar kanggo IE, coba kalebu <meta>tag sing cocog ing kaca sampeyan:

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

Konfirmasi mode dokumen kanthi mbukak alat debugging: penet F12lan priksa "Mode Dokumen".

Tag iki kalebu ing kabeh dokumentasi lan conto Bootstrap kanggo njamin rendering paling apik ing saben versi Internet Explorer sing didhukung.

Waca pitakonan StackOverflow iki kanggo informasi luwih lengkap.

Internet Explorer 10 ing Windows 8 lan Windows Phone 8

Internet Explorer 10 ora mbedakake ambane piranti karo ambane viewport , lan kanthi mangkono ora ngetrapake pitakon media kanthi bener ing CSS Bootstrap. Biasane sampeyan mung nambah potongan CSS kanggo ndandani iki:

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

Nanging, iki ora bisa digunakake kanggo piranti sing nganggo Windows Phone 8 versi sing luwih lawas tinimbang Update 3 (alias GDR3) , amarga piranti kasebut nuduhake tampilan desktop tinimbang tampilan "telpon" sing sempit. Kanggo ngatasi masalah iki, sampeyan kudu nyakup CSS lan JavaScript ing ngisor iki kanggo ngatasi bug kasebut .

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

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/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)
}

Kanggo informasi luwih lengkap lan pedoman panggunaan, waca Windows Phone 8 lan Device-Width .

Minangka kepala, kita kalebu iki ing kabeh dokumentasi Bootstrap lan conto minangka demonstrasi.

Safari persen babak

Mesin rendering versi Safari sadurunge v7.1 kanggo OS X lan Safari kanggo iOS v8.0 ngalami sawetara masalah karo jumlah panggonan desimal sing digunakake ing .col-*-1kelas kothak. Dadi yen sampeyan duwe 12 kolom kothak individu, sampeyan bakal sok dong mirsani sing padha teka munggah cendhak dibandhingake baris liyane kolom. Saliyane nganyarke Safari/iOS, sampeyan duwe sawetara opsi kanggo solusi:

• Tambah .pull-rightmenyang kolom kothak pungkasan kanggo njaluk alignment hard-tengen
• Ngatur persentase kanthi manual kanggo entuk pembulatan sing sampurna kanggo Safari (luwih angel tinimbang pilihan pisanan)

Modal, navbar, lan keyboard virtual

Overflow lan nggulung

Dhukungan kanggo overflow: hiddenunsur <body>cukup winates ing iOS lan Android. Kanggo tujuan kasebut, nalika sampeyan nggulung liwat ndhuwur utawa ngisor modal ing salah siji saka browser piranti kasebut, <body>konten kasebut bakal mulai digulung. Waca bug Chrome #175502 (didandani ing Chrome v40) lan bug WebKit #153852 .

kolom teks iOS lan nggulung

Ing iOS 9.3, nalika modal mbukak, yen tutul awal patrap gulung ana ing wates teks <input>utawa a <textarea>, <body>isi ing ngisor modal bakal digulung tinimbang modal dhewe. Waca bug WebKit #153856 .

Keyboard virtual

Uga, elinga yen sampeyan nggunakake navbar tetep utawa nggunakake input ing modal, iOS duwe bug rendering sing ora nganyari posisi unsur tetep nalika keyboard virtual micu. A sawetara workarounds kanggo iki kalebu ngowahi unsur kanggo position: absoluteutawa invoking timer ing fokus kanggo nyoba kanggo mbenerake posisi kanthi manual. Iki ora ditangani dening Bootstrap, dadi sampeyan kudu mutusake solusi sing paling apik kanggo aplikasi sampeyan.

Navbar Dropdowns

Unsur .dropdown-backdropiki ora digunakake ing iOS ing nav amarga kerumitan z-indeksasi. Mangkono, kanggo nutup dropdowns ing navbars, sampeyan kudu langsung klik unsur gulung mudhun (utawa unsur liyane sing bakal murub acara klik ing iOS ).

Zooming browser

Zooming kaca mesthi nampilake artefak rendering ing sawetara komponen, ing Bootstrap lan liyane ing web. Gumantung saka masalah kasebut, kita bisa uga bisa ndandani (telusuri dhisik banjur mbukak masalah yen perlu). Nanging, kita cenderung nglirwakake iki amarga asring ora duwe solusi langsung kajaba solusi hacky.

Lengket :hover/ :focusing seluler

Sanajan nglayang nyata ora bisa ditindakake ing umume layar demek, umume browser seluler niru dhukungan sing nglayang lan nggawe :hover"lengket". Ing tembung liya, :hovergaya wiwit ditrapake sawise nutul unsur lan mung mandheg sawise pangguna nutul unsur liyane. Iki bisa nyebabake :hovernegara Bootstrap dadi "macet" ing browser kasebut. Sawetara browser seluler uga nggawe :focuspadha lengket. Saiki ora ana solusi sing gampang kanggo masalah kasebut kajaba mbusak kabeh gaya kasebut.

Printing

Malah ing sawetara browser modern, nyetak bisa dadi aneh.

Utamane, ing Chrome v32 lan preduli saka setelan margin, Chrome nggunakake ambane viewport sing luwih sempit tinimbang ukuran kertas fisik nalika ngrampungake pitakon media nalika nyithak kaca web. Iki bisa nyebabake kothak ekstra-cilik Bootstrap bisa diaktifake kanthi ora sengaja nalika nyetak. Deleng masalah #12078 lan bug Chrome #273306 kanggo sawetara rincian. Solusi sing disaranake:

• Rampung kothak ekstra cilik lan priksa manawa kaca sampeyan katon bisa ditampa ing ngisor iki.
• Kustomisasi nilai @screen-*variabel Kurang supaya kertas printer sampeyan dianggep luwih gedhe tinimbang ekstra cilik.
• Tambah pitakon media khusus kanggo ngganti titik putus ukuran kothak mung kanggo media cetak.

Uga, ing Safari v8.0, jembaré tetep .containers bisa nimbulaké Safari nggunakake ukuran font mboten umum cilik nalika nyetak. Waca #14868 lan bug WebKit #138192 kanggo rincian liyane. Salah sawijining solusi potensial kanggo iki yaiku nambahake CSS ing ngisor iki:

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

Browser saham Android

Metu saka kothak, Android 4.1 (lan malah sawetara rilis anyar ketoke) ngirim aplikasi Browser minangka browser web standar pilihan (minangka gantos kanggo Chrome). Sayange, app Browser akeh bug lan inconsistencies karo CSS ing umum.

Pilih menu

Ing <select>unsur, browser Simpenan Android ora bakal nampilake kontrol sisih yen ana border-radiuslan / utawa borderApplied. (Waca pitakonan StackOverflow iki kanggo rincian.) Gunakake snippet kode ing ngisor iki kanggo mbusak CSS nglanggar lan nerjemahake <select>minangka unsur unstyled ing browser Simpenan Android. Agen pangguna sniffing ngindhari gangguan karo browser Chrome, Safari, lan 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>

Pengin ndeleng conto? Priksa demo JS Bin iki.

Validator

Kanggo nyedhiyakake pengalaman sing paling apik kanggo browser lawas lan buggy, Bootstrap nggunakake hack browser CSS ing sawetara panggonan kanggo ngarahake CSS khusus menyang versi browser tartamtu supaya bisa ngatasi bug ing browser kasebut. Hacks iki bisa dingerteni nyebabake validator CSS sambat yen dheweke ora sah. Ing sawetara panggonan, kita uga nggunakake fitur CSS bleeding-edge sing durung distandarisasi kanthi lengkap, nanging iki digunakake kanggo nambah progresif.

Bebaya validasi iki ora masalah ing praktik amarga bagean sing ora diretas saka CSS kita wis divalidasi kanthi lengkap lan bagean sing diretas ora ngganggu fungsi sing bener saka bagean sing ora diretas, mula kita sengaja nglirwakake bebaya tartamtu kasebut.

Dokumen HTML kita uga duwe sawetara bebaya validasi HTML sing ora pati penting lan ora penting amarga kalebu solusi kanggo bug Firefox tartamtu .

Dhukungan pihak katelu

Nalika kita ora resmi ndhukung plugin pihak katelu utawa tambahan, kita nawakake sawetara saran migunani kanggo ngindhari masalah potensial ing proyek sampeyan.

Ukuran kothak

Sawetara piranti lunak pihak katelu, kalebu Google Maps lan Google Custom Search Engine, konflik karo Bootstrap amarga * { box-sizing: border-box; }, aturan sing ndadekake paddingora mengaruhi jembaré diitung pungkasan saka sawijining unsur. Sinau luwih lengkap babagan model kothak lan ukuran ing Trik CSS .

Gumantung ing konteks, sampeyan bisa ngilangi yen dibutuhake (Opsi 1) utawa ngreset ukuran kothak kanggo kabeh 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 nderek standar web umum lan-kanthi gaweyan ekstra minimal-bisa digunakake kanggo nggawe situs sing bisa diakses sing nggunakake AT .

Skip pandhu arah

Yen pandhu arah sampeyan ngemot akeh pranala lan sadurunge isi utama ing DOM, tambahake Skip to main contentlink sadurunge pandhu arah (kanggo panjelasan prasaja, deleng artikel A11Y Project iki babagan pranala navigasi skip ). Nggunakake .sr-onlykelas bakal visual ndhelikake link skip, lan .sr-only-focusablekelas bakal mesthekake yen link dadi katon yen fokus (kanggo pangguna keyboard sighted).

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

Judhul sing disambungake

Nalika nesting heading ( <h1>- <h6>), header dokumen utama sampeyan kudu dadi <h1>. Judhul sakteruse kudu nggunakake logis <h2>- <h6>supaya pembaca layar bisa nggawe daftar isi kanggo kaca sampeyan.

Sinau luwih lengkap ing HTML CodeSniffer lan AksesAbilitas Penn State .

Kontras warna

Saiki, sawetara kombinasi warna standar sing kasedhiya ing Bootstrap (kayata macem-macem kelas tombol gaya , sawetara warna sing nyorot kode sing digunakake kanggo pamblokiran kode dhasar , kelas helper .bg-primary latar mburi kontekstual , lan warna link standar nalika digunakake ing latar mburi putih) duwe rasio kontras sing sithik (ing rasio sing disaranake 4,5: 1 ). Iki bisa nyebabake masalah kanggo pangguna sing lara warna utawa buta warna. Werna standar iki bisa uga kudu diowahi kanggo nambah kontras lan keterbacaan.

sumber daya tambahan

• Bookmarklet "HTML Codesniffer" kanggo ngenali masalah aksesibilitas
• Ekstensi Alat Pangembang Aksesibilitas Chrome
• Analyzer Kontras Warna
• Proyek A11Y
• Dokumentasi aksesibilitas MDN

Lisensi FAQs

Bootstrap dirilis miturut lisensi MIT lan hak cipta 2019 Twitter. Digodhog nganti cilik, bisa digambarake kanthi kahanan ing ngisor iki.

Sampeyan mbutuhake sampeyan:

• Tansah kabar lisensi lan hak cipta sing kalebu ing file CSS lan JavaScript Bootstrap nalika digunakake ing karya sampeyan

Iki ngidini sampeyan:

• Ngundhuh lan nggunakake Bootstrap kanthi gratis, kabeh utawa sebagian, kanggo tujuan pribadi, pribadi, internal perusahaan, utawa komersial
• Gunakake Bootstrap ing paket utawa distribusi sing digawe
• Ngowahi kode sumber
• Menehi sublisensi kanggo ngowahi lan nyebarake Bootstrap menyang pihak katelu sing ora kalebu ing lisensi kasebut

Sampeyan nglarang sampeyan:

• Terus penulis lan pemilik lisensi tanggung jawab kanggo kerusakan amarga Bootstrap diwenehake tanpa garansi
• Tahan kreator utawa sing duwe hak cipta Bootstrap tanggung jawab
• Distribusi maneh bagean Bootstrap tanpa atribusi sing tepat
• Gunakake tandha apa wae sing diduweni dening Twitter kanthi cara apa wae sing bisa nyatakake utawa nuduhake yen Twitter nyetujui distribusi sampeyan
• Gunakake tandha apa wae sing diduweni dening Twitter kanthi cara apa wae sing bisa nyatakake utawa nuduhake yen sampeyan nggawe piranti lunak Twitter sing dimaksud

Sampeyan ora mbutuhake sampeyan:

• Kalebu sumber Bootstrap dhewe, utawa modifikasi apa wae sing wis sampeyan lakoni, ing sembarang redistribusi sampeyan bisa ngumpul sing kalebu
• Kirimake owah-owahan sing sampeyan lakoni menyang Bootstrap bali menyang proyek Bootstrap (sanajan saran kasebut dianjurake)

Lisensi Bootstrap lengkap dumunung ing gudang proyek kanggo informasi luwih lengkap.

Terjemahan

Anggota komunitas wis nerjemahake dokumentasi Bootstrap menyang macem-macem basa. Ora ana sing didhukung kanthi resmi lan bisa uga ora tansah anyar.

• Bootstrap 中文文档 (Cina)
• Bootstrap ing Dansk (Denmark)
• Bootstrap en Français (Prancis)
• Bootstrap auf Deutsch (Jerman)
• Bootstrap ing Italiano (Italia)
• Bootstrap 한국어 (Korea)
• Bootstrap em Português do Brasil (Portugis Brasil)
• Bootstrap по-русски (Rusia)
• Bootstrap en Español (Spanyol)
• Türkçe Bootstrap (Turki)
• Bootstrap українською (Ukraina)
• Bootstrap bằng tiếng Việt (Vietnam)

Kita ora mbantu ngatur utawa dadi tuan rumah terjemahan, kita mung nyambung menyang terjemahan kasebut.

Rampung terjemahan anyar utawa luwih apik? Bukak panjalukan tarik kanggo ditambahake menyang dhaptar kita.