Ngundeur

Bootstrap (ayeuna v3.3.7) boga sababaraha cara gampang pikeun ngamimitian gancang, unggal hiji pikaresepeun pikeun tingkat skill béda jeung kasus pamakéan. Baca saliwat pikeun ningali naon anu cocog sareng kabutuhan khusus anjeun.

Bootstrap CDN

The folks on jsDelivr graciously nyadiakeun rojongan CDN pikeun Bootstrap urang CSS jeung JavaScript. Ngan nganggo ieu Tumbu CDN Bootstrap .

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

Pasang sareng Bower

Anjeun ogé tiasa masang sareng ngatur Bootstrap's Less, CSS, JavaScript, sareng fon nganggo Bower :

$ bower install bootstrap

Pasang sareng npm

Anjeun ogé tiasa masang Bootstrap nganggo npm :

$ npm install bootstrap@3

require('bootstrap')bakal ngamuat sakabéh plugins jQuery Bootstrap kana objék jQuery. Modul bootstrapsorangan henteu ngékspor nanaon. Anjeun tiasa sacara manual ngamuat plugins jQuery Bootstrap sacara individual ku ngamuat /js/*.jsfile dina diréktori tingkat luhur pakét.

Bootstrap package.jsonngandung sababaraha metadata tambahan dina konci ieu:

• less- jalur ka Bootstrap urang file Kurang sumber utama
• style- jalur ka CSS non-minified Bootstrap anu tos dikompilasi nganggo setélan standar (henteu aya kustomisasi)

Pasang sareng Komposer

Anjeun ogé tiasa masang sareng ngatur Bootstrap's Less, CSS, JavaScript, sareng fon nganggo Composer :

$ composer require twbs/bootstrap

Autoprefixer diperlukeun pikeun Kurang / Sass

Bootstrap ngagunakeun Autoprefixer pikeun nungkulan awalan vendor CSS . Upami anjeun nyusun Bootstrap tina sumberna Less/Sass sareng henteu nganggo Gruntfile kami, anjeun kedah ngahijikeun Autoprefixer kana prosés ngawangun anjeun nyalira. Upami anjeun nganggo Bootstrap anu tos dikompilasi atanapi nganggo Gruntfile kami, anjeun henteu kedah hariwang ngeunaan ieu sabab Autoprefixer parantos terpadu kana Gruntfile kami.

Naon kaasup

Bootstrap tiasa diunduh dina dua bentuk, dimana anjeun bakal mendakan diréktori sareng file di handap ieu, sacara logis ngagolongkeun sumber daya umum sareng nyayogikeun variasi anu disusun sareng diminimalkeun.

Bootstrap anu disusun sateuacana

Saatos diunduh, unzip polder anu dikomprés pikeun ningali struktur Bootstrap (dikompilasi). Anjeun bakal ningali sapertos kieu:

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

Ieu mangrupikeun bentuk Bootstrap anu paling dasar: file anu tos dikompilasi pikeun panggunaan gancang-gancang dina ampir sadaya proyék wéb. Urang nyadiakeun disusun CSS jeung JS ( bootstrap.*), kitu ogé disusun jeung minified CSS jeung JS ( bootstrap.min.*). peta sumber CSS ( bootstrap.*.map) sadia pikeun pamakéan ku parabot pamekar browser tangtu. Fon tina Glyphicons kaasup, kitu ogé téma Bootstrap pilihan.

Kodeu sumber Bootstrap

Undeuran kode sumber Bootstrap kalebet CSS, JavaScript, sareng aset font anu tos disusun, sareng sumber Kurang, JavaScript, sareng dokuméntasi. Leuwih husus, éta ngawengku di handap ieu sareng nu sanesna:

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

The less/, js/, sarta fonts/mangrupakeun kode sumber pikeun CSS kami, JS, sarta fon ikon (masing-masing). Folder kalebet sadayana anu dist/didaptarkeun dina bagian undeuran anu tos disusun di luhur. Folder docs/kalebet kode sumber pikeun dokuméntasi kami, sareng examples/panggunaan Bootstrap. Saluareun éta, file anu sanésna ogé nyayogikeun dukungan pikeun bungkusan, inpormasi lisénsi, sareng pamekaran.

Nyusun CSS jeung JavaScript

Bootstrap nganggo Grunt pikeun sistem ngawangunna, kalayan metode anu cocog pikeun damel sareng kerangka. Ieu kumaha urang nyusun kode urang, ngajalankeun tés, sareng seueur deui.

Masang Grunt

Pikeun masang Grunt, anjeun kedah ngaunduh sareng masang node.js (anu kalebet npm). npm nangtung pikeun modul rangkep titik sarta mangrupakeun cara pikeun ngatur kagumantungan ngembangkeun ngaliwatan node.js.

1. Pasang grunt-clisacara global nganggo npm install -g grunt-cli.
2. /bootstrap/Arahkeun ka diréktori root , teras ngajalankeun npm install. npm bakal ningali package.jsonfile sareng otomatis masang katergantungan lokal anu diperyogikeun didaptarkeun di dinya.

Nalika réngsé, anjeun bakal tiasa ngajalankeun rupa-rupa paréntah Grunt anu disayogikeun tina garis paréntah.

Paréntah Grunt sadia

grunt dist(Ngan kompilasi CSS sareng JavaScript)

Ngahasilkeun deui /dist/diréktori kalayan kompilasi sareng minified file CSS sareng JavaScript. Salaku pangguna Bootstrap, ieu biasana paréntah anu anjeun pikahoyong.

grunt watch(Lalajo)

Lalajo file sumber Kurang tur otomatis recompiles kana CSS iraha wae anjeun nyimpen parobahanana.

grunt test(Ngajalankeun tés)

Jalankeun JSHint sareng ngajalankeun tes QUnit tanpa sirah di PhantomJS .

grunt docs(Bangun & uji aset dokumén)

Ngawangun sareng nguji CSS, JavaScript, sareng aset sanésna anu dianggo nalika ngajalankeun dokuméntasi sacara lokal via bundle exec jekyll serve.

grunt(Ngawangun leres pisan sadayana sareng ngajalankeun tés)

Nyusun sareng ngaminimalkeun CSS sareng JavaScript, ngawangun halaman wéb dokuméntasi, ngajalankeun validator HTML5 ngalawan dokumén, ngabangkitkeun deui aset Customizer, sareng seueur deui. Merlukeun Jekyll . Biasana ngan ukur diperyogikeun upami anjeun ngarékam Bootstrap nyalira.

Pamérésan masalah

Upami anjeun ngalaman masalah sareng masang dependensi atanapi ngajalankeun paréntah Grunt, hapus heula /node_modules/diréktori anu dihasilkeun ku npm. Lajeng, ngajalankeun deui npm install.

template dasar

Mimitian ku template HTML dasar ieu, atanapi modifikasi conto ieu . Kami ngarepkeun anjeun tiasa nyaluyukeun témplat sareng conto kami, nyaluyukeun kana kabutuhan anjeun.

Salin HTML di handap pikeun ngamimitian damel sareng 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>

Contona

Ngawangun dina citakan dasar di luhur sareng seueur komponén Bootstrap. Kami ajak anjeun ngarobih sareng adaptasi Bootstrap pikeun nyocogkeun ka kabutuhan proyék individu anjeun.

Kéngingkeun kode sumber pikeun unggal conto di handap ku ngaunduh gudang Bootstrap . Conto bisa kapanggih dina docs/examples/diréktori.

Ngagunakeun kerangka

Citakan starter

Euweuh tapi dasar: disusun CSS jeung JavaScript sapanjang kalawan wadahna.

Téma Bootstrap

Muatkeun téma Bootstrap opsional pikeun pangalaman anu ditingkatkeun sacara visual.

Grids

Sababaraha conto perenah grid sareng opat tingkatan, nyarang, sareng seueur deui.

Jumbotron

Ngawangun sabudeureun jumbotron kalawan navbar sarta sababaraha kolom grid dasar.

Jumbotron heureut

Ngawangun halaman anu langkung khusus ku ngahususkeun wadah standar sareng jumbotron.

Navbars dina aksi

Navbar

Témplat super dasar anu kalebet navbar sareng sababaraha eusi tambahan.

Navbar luhur statik

template super dasar kalawan navbar luhur statik sapanjang kalawan sababaraha eusi tambahan.

Navbar maneuh

Témplat super dasar kalayan navbar luhur tetep sareng sababaraha eusi tambahan.

komponén custom

Panutup

Citakan hiji halaman pikeun ngawangun halaman bumi anu sederhana sareng éndah.

Carousel

Sesuaikeun navbar sareng carousel, teras tambahkeun sababaraha komponén énggal.

Blog

Tata perenah blog dua kolom saderhana sareng navigasi khusus, lulugu, sareng jinis.

Dasbor

Struktur dasar pikeun dasbor admin sareng sidebar sareng navbar tetep.

Kaca asup

Tata perenah sareng desain bentuk khusus pikeun bentuk tanda anu saderhana.

Dibenerkeun nav

Jieun navbar custom kalawan tumbu diyakinkeun. Mastaka tegak! Teu ramah Safari teuing.

footer caket

Gantelkeun footer ka handap viewport lamun eusi leuwih pondok ti eta.

Footer caket sareng navbar

Gantelkeun footer ka handap viewport kalawan navbar tetep di luhur.

Percobaan

Bootstrap non-responsif

Gampang mareuman responsif Bootstrap per docs kami .

Kaluar-kanvas

Ngawangun menu navigasi off-kanvas toggleable pikeun pamakéan ku Bootstrap.

Parabot

Bootlint

Bootlint mangrupikeun alat linter HTML Bootstrap resmi. Éta otomatis pariksa sababaraha kasalahan HTML umum dina halaman wéb anu nganggo Bootstrap dina cara anu cukup "vanili". Komponén / widget Vanilla Bootstrap ngabutuhkeun bagian-bagian DOM pikeun saluyu sareng struktur anu tangtu. Bootlint pariksa yén instansi komponén Bootstrap gaduh HTML terstruktur leres. Pertimbangkeun pikeun nambihan Bootlint kana toolchain pangembangan wéb Bootstrap anjeun supados henteu aya kasalahan umum anu ngalambatkeun pangwangunan proyék anjeun.

Komunitas

Tetep up to date dina ngembangkeun Bootstrap sarta ngahontal ka masarakat kalawan sumberdaya mantuan ieu.

• Baca jeung ngalanggan The Resmi Bootstrap Blog .
• Ngobrol jeung sasama Bootstrappers maké IRC dina irc.freenode.netserver, dina saluran ##bootstrap .
• Pikeun pitulung ngagunakeun Bootstrap, ménta on StackOverflow maké tagtwitter-bootstrap-3 .
• Pamekar kedah nganggo kecap konci bootstrapdina bungkusan anu ngarobih atanapi nambihan kana pungsionalitas Bootstrap nalika nyebarkeun ngaliwatan npm atanapi mékanisme pangiriman anu sami pikeun kapendak maksimal.
• Manggihan conto inspiratif jalma ngawangun kalawan Bootstrap di Bootstrap Expo .

Anjeun ogé tiasa ngiringan @getbootstrap dina Twitter pikeun gosip panganyarna sareng video musik anu saé.

Nonaktipkeun responsiveness

Bootstrap otomatis nyaluyukeun kaca anjeun pikeun sagala rupa ukuran layar. Ieu kumaha cara nganonaktipkeun fitur ieu supados halaman anjeun tiasa dianggo sapertos conto anu henteu responsif ieu .

Léngkah pikeun nganonaktipkeun responsif halaman

1. Ngaleungitkeun viewport anu <meta>disebatkeun dina dokumén CSS
2. Override widthon .containerpikeun tiap undakan grid kalawan rubak tunggal, contona width: 970px !important;Pastikeun yén ieu asalna sanggeus standar Bootstrap CSS. Anjeun optionally bisa nyingkahan !importantkalawan queries media atawa sababaraha selector-fu.
3. Lamun make navbars, miceun kabeh navbar rubuh tur ngembangna kabiasaan.
4. Pikeun layouts grid, make .col-xs-*kelas salian, atawa gaganti, sedeng / badag. Tong hariwang, kisi-kisi alat tambahan-leutik skala kana sadaya résolusi.

Anjeun masih peryogi Respond.js pikeun IE8 (sabab patarosan média kami masih aya sareng kedah diolah). Ieu nganonaktipkeun aspék "situs mobile" tina Bootstrap.

template Bootstrap kalawan responsiveness ditumpurkeun

Kami parantos nerapkeun léngkah-léngkah ieu kana conto. Baca kode sumber na pikeun ningali parobahan husus dilaksanakeun.

Témbongkeun conto non-responsif

Pangotektak sareng pangrojong alat

Bootstrap diwangun pikeun dianggo pangalusna dina desktop jeung mobile browser panganyarna, hartina browser heubeul bisa nembongkeun gaya béda, sanajan fungsi pinuh, renderings sahiji komponén nu tangtu.

browser nu dirojong

Husus, kami ngarojong versi panganyarna tina browser jeung platform handap.

Panyungsi alternatif anu nganggo versi WebKit, Blink, atanapi Gecko pangénggalna, naha langsung atanapi ngalangkungan API tampilan wéb platform, henteu dirojong sacara eksplisit. Nanging, Bootstrap kedah (dina kalolobaan kasus) nunjukkeun sareng fungsina leres dina panyungsi ieu ogé. Inpo pangrojong anu langkung spésifik disayogikeun di handap.

Alat sélulér

Sacara umum, Bootstrap ngadukung vérsi panganyarna tina browser standar unggal platform utama. Catet yén browser proxy (sapertos Opera Mini, mode Turbo Opera Mobile, UC Browser Mini, Amazon Silk) teu dirojong.

panyungsi desktop

Nya kitu, versi panganyarna tina kalolobaan browser desktop dirojong.

Dina Windows, urang ngarojong Internet Explorer 8-11 .

Pikeun Firefox, salian ti sékrési stabil normal panganyarna, kami ogé ngadukung versi Extended Support Release (ESR) Firefox panganyarna.

Sacara teu resmi, Bootstrap kedah katingali sareng kalakuanana cekap dina Chromium sareng Chrome pikeun Linux, Firefox pikeun Linux, sareng Internet Explorer 7, ogé Microsoft Edge, sanaos henteu dirojong sacara resmi.

Pikeun daptar sababaraha bug browser nu Bootstrap kudu grapple kalawan, tingali Wall kami bug browser .

Internet Explorer 8 jeung 9

Internet Explorer 8 jeung 9 ogé dirojong, kumaha oge, punten perhatikeun yén sababaraha sipat CSS3 sareng elemen HTML5 henteu dirojong sapinuhna ku browser ieu. Sajaba ti éta, Internet Explorer 8 merlukeun pamakéan Respond.js pikeun ngaktipkeun rojongan query média.

Didatangan Dupi abdi nganggo ... pikeun detil ngeunaan rojongan browser fitur CSS3 jeung HTML5.

Internet Explorer 8 jeung Respond.js

Waspada kana peringatan di handap ieu nalika nganggo Respond.js dina lingkungan pamekaran sareng produksi anjeun pikeun Internet Explorer 8.

Respond.js jeung cross-domain CSS

Ngagunakeun Respond.js kalawan CSS hosted on béda (sub) domain (contona, dina CDN) merlukeun sababaraha setelan tambahan. Tempo Respond.js docs pikeun detil.

Respond.js jeungfile://

Kusabab aturan kaamanan browser, Respond.js henteu tiasa dianggo sareng halaman anu ditingali via file://protokol (sapertos nalika muka file HTML lokal). Pikeun nguji fitur responsif dina IE8, tempo kaca anjeun ngaliwatan HTTP(S). Tempo Respond.js docs pikeun detil.

Respond.js jeung@import

Respond.js henteu tiasa dianggo sareng CSS anu dirujuk via @import. Khususna, sababaraha konfigurasi Drupal dipikanyaho ngagunakeun @import. Tempo Respond.js docs pikeun detil.

Internet Explorer 8 sareng ukuran kotak

IE8 teu pinuh ngarojong box-sizing: border-box;lamun digabungkeun jeung min-width, max-width, min-height, atawa max-height. Ku sabab eta, sakumaha v3.0.1, urang henteu deui make max-widthon .containers.

Internet Explorer 8 sareng @font-face

IE8 ngagaduhan sababaraha masalah @font-facenalika digabungkeun sareng :before. Bootstrap nganggo kombinasi éta sareng Glyphicons na. Upami halaman di-cache, sareng dimuat tanpa beurit dina jandela (nyaéta pencét tombol refresh atanapi muatkeun hiji hal dina iframe) teras halaman éta didamel sateuacan font dimuat. Hovering dina kaca (awak) bakal nembongkeun sababaraha ikon jeung hovering leuwih ikon sésana bakal némbongkeun éta ogé. Tempo masalah #13863 pikeun detil.

Modeu kasaluyuan IE

Bootstrap henteu dirojong dina modeu kasaluyuan Internet Explorer anu lami. Pikeun mastikeun yén anjeun nganggo mode rendering panganyarna pikeun IE, pertimbangkeun kalebet <meta>tag anu cocog dina halaman anjeun:

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

Konfirmasi mode dokumén ku muka parabot debugging: pencét F12jeung pariksa "Dokumén Mode".

Tag ieu kalebet dina sadaya dokuméntasi sareng conto Bootstrap pikeun mastikeun rendering pangsaéna dina unggal versi Internet Explorer anu dirojong.

Tempo patarosan StackOverflow ieu kanggo inpormasi lengkep.

Internet Explorer 10 dina Windows 8 sareng Windows Phone 8

Internet Explorer 10 henteu ngabédakeun lebar alat sareng lebar viewport , sahingga henteu leres nerapkeun patarosan média dina CSS Bootstrap. Biasana anjeun ngan ukur nambihan snippet gancang tina CSS pikeun ngalereskeun ieu:

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

Nanging, ieu henteu tiasa dianggo pikeun alat anu ngajalankeun Windows Phone 8 vérsi anu langkung lami tibatan Update 3 (alias GDR3) , sabab éta nyababkeun alat sapertos ningalikeun tampilan desktop anu biasana tinimbang tempoan "telepon" anu sempit. Pikeun ngungkulan ieu, anjeun kedah ngalebetkeun CSS sareng JavaScript di handap ieu pikeun ngungkulan 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)
}

Pikeun inpormasi lengkep sareng tungtunan pamakean, baca Windows Phone 8 sareng Device-Width .

Salaku huluna a, urang kaasup ieu dina sakabéh dokuméntasi Bootstrap sarta conto salaku démo.

Safari persen rounding

Mesin rendering versi Safari sateuacan v7.1 pikeun OS X sareng Safari pikeun ios v8.0 ngagaduhan sababaraha masalah sareng jumlah tempat perpuluhan anu dianggo dina .col-*-1kelas grid urang. Janten upami anjeun ngagaduhan 12 kolom grid individu, anjeun bakal perhatikeun yén aranjeunna pondok dibandingkeun sareng barisan kolom anu sanés. Salian ti ningkatkeun Safari/ios, anjeun gaduh sababaraha pilihan pikeun solusi:

• Tambahkeun .pull-rightka kolom grid panungtungan anjeun pikeun meunangkeun alignment teuas-katuhu
• Tweak persentase Anjeun sacara manual pikeun meunangkeun rounding sampurna pikeun Safari (langkung hese tibatan pilihan kahiji)

Modals, navbar, sareng keyboard virtual

Ngabahekeun jeung ngagulung

Rojongan pikeun overflow: hiddenon <body>unsur ieu rada kawates dina ios sarta Android. Pikeun tujuan éta, nalika anjeun ngagulung ka luhur atanapi ka handap modal dina salah sahiji panyungsi alat éta, <body>eusina bakal mimiti ngagulung. Tempo bug Chrome #175502 (dibereskeun dina Chrome v40) jeung bug WebKit #153852 .

Widang téks ios sareng ngagulung

Dina ios 9.3, nalika modal dibuka, upami sentuhan awal gesture ngagugulung aya dina wates tékstual <input>atanapi <textarea>, <body>eusi handapeun modal bakal digulung tibatan modal sorangan. Tempo bug WebKit #153856 .

Kibor virtual

Ogé, perhatikeun yén upami anjeun nganggo navbar tetep atanapi nganggo input dina modal, ios gaduh bug rendering anu henteu ngamutahirkeun posisi elemen tetep nalika keyboard virtual dipicu. Sababaraha workarounds pikeun ieu diantarana ngarobah elemen anjeun kana position: absoluteatawa invoking timer on fokus pikeun nyobaan ngabenerkeun positioning sacara manual. Ieu henteu diurus ku Bootstrap, janten terserah anjeun mutuskeun solusi mana anu pangsaéna pikeun aplikasi anjeun.

Navbar Dropdowns

Unsur .dropdown-backdrophenteu dianggo dina ios dina nav kusabab pajeulitna z-indexing. Ku kituna, pikeun nutup dropdowns dina navbars, Anjeun kudu langsung klik unsur dropdown (atawa elemen séjén nu bakal seuneu acara klik dina ios. ).

Ngazum browser

Ngazum halaman pasti nampilkeun rendering artefak dina sababaraha komponén, boh dina Bootstrap sareng sésana wéb. Gumantung kana masalahna, urang tiasa ngalereskeunana (milarian heula teras muka masalah upami diperyogikeun). Najan kitu, urang condong malire ieu sabab mindeng teu boga solusi langsung lian ti workarounds hacky.

Lengket :hover/ :focuson mobile

Sanajan hovering nyata teu mungkin dina paling layar rampa, lolobana panyungsi mobile emulate rojongan hovering sarta nyieun :hover"caket". Dina basa sejen, :hovergaya mimiti nerapkeun sanggeus ngetok hiji unsur sarta ngan eureun nerapkeun sanggeus pamaké ngetok sababaraha elemen séjén. Ieu tiasa nyababkeun :hoverkaayaan Bootstrap janten "macet" dina browser sapertos kitu. Sababaraha panyungsi sélulér ogé ngajantenkeun :focuscaket. Ayeuna teu aya solusi saderhana pikeun masalah ieu salain ngaleungitkeun gaya sapertos kitu.

Nyitak

Malah dina sababaraha browser modern, percetakan tiasa quirky.

Khususna, dina Chrome v32 sareng henteu paduli setélan margin, Chrome nganggo lebar viewport sacara signifikan langkung sempit tibatan ukuran kertas fisik nalika ngarengsekeun patarosan média nalika nyitak halaman wéb. Ieu tiasa nyababkeun grid ekstra-leutik Bootstrap anu teu disangka-sangka diaktipkeun nalika nyitak. Tingali masalah #12078 sareng bug Chrome #273306 pikeun sababaraha detil. Solusi anu disarankeun:

• Nangkeup grid tambahan-leutik sareng pastikeun halaman anjeun katingalina tiasa ditampi.
• Sesuaikeun nilai @screen-*variabel Kurang supados kertas printer anjeun dianggap langkung ageung tibatan leutik.
• Tambahkeun patarosan média khusus pikeun ngarobih titik putus ukuran grid pikeun média citak wungkul.

Ogé, sakumaha tina Safari v8.0, tetep-lebar .containers bisa ngabalukarkeun Safari ngagunakeun ukuran font unusually leutik nalika nyitak. Tingali #14868 sareng bug WebKit #138192 pikeun langkung rinci. Hiji workaround poténsial pikeun ieu nambahkeun CSS handap:

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

browser stock Android

Out of the box, Android 4.1 (komo sababaraha sékrési anu langkung énggal) dikirimkeun sareng aplikasi Browser salaku browser wéb standar pilihan (sabalikna Chrome). Hanjakalna, aplikasi Browser ngagaduhan seueur bug sareng inconsistencies sareng CSS sacara umum.

Pilih ménu

Dina <select>elemen, browser stock Android moal nembongkeun kadali samping lamun aya border-radiusna / atawa borderdilarapkeun. (Tempo sual StackOverflow ieu pikeun detil.) Paké snippet kode di handap pikeun nyoplokkeun CSS offending sarta ngajadikeun <select>salaku unsur unstyled dina browser stock Android. Agén pamaké sniffing ngahindarkeun gangguan sareng browser Chrome, Safari, sareng 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>

Hoyong ningali conto? Pariksa demo JS Bin ieu.

Validators

Pikeun masihan pangalaman anu pangsaéna pikeun panyungsi anu lami sareng buggy, Bootstrap nganggo hacks browser CSS di sababaraha tempat pikeun nargétkeun CSS khusus kana vérsi panyungsi anu tangtu pikeun ngungkulan bug dina browser éta sorangan. Hacks ieu kaharti ngabalukarkeun validators CSS ngawadul yen aranjeunna teu valid. Dina sababaraha tempat, urang ogé ngagunakeun fitur CSS bleeding-edge nu teu acan pinuh standarisasi, tapi ieu dipaké murni pikeun ningkatna progresif.

Peringatan validasi ieu henteu masalah dina prakna sabab bagian non-hacky tina CSS kami leres-leres validasi sareng bagian anu hacky henteu ngaganggu fungsi anu leres tina bagian anu henteu hacky, ku kituna urang ngahaja teu malire peringatan khusus ieu.

Dokumén HTML kami ogé gaduh sababaraha peringatan validasi HTML anu teu penting sareng teu penting kusabab kami ngalebetkeun solusi pikeun bug Firefox anu tangtu .

Rojongan pihak katilu

Sanaos kami henteu sacara resmi ngadukung plugin atanapi tambihan pihak katilu, kami nawiskeun sababaraha saran anu mangpaat pikeun ngabantosan ngahindarkeun masalah poténsial dina proyék anjeun.

Ukuran kotak

Sababaraha parangkat lunak pihak katilu, kalebet Google Maps sareng Google Custom Search Engine, konflik sareng Bootstrap kusabab * { box-sizing: border-box; }, aturan anu ngajantenkeun éta paddinghenteu mangaruhan lebar diitung ahir tina hiji unsur. Diajar langkung seueur ngeunaan modél kotak sareng ukuran dina Trik CSS .

Gumantung kana kontéksna, anjeun tiasa nimpa sakumaha anu diperyogikeun (Pilihan 1) atanapi ngareset ukuran kotak pikeun sadaya daérah (Pilihan 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 nuturkeun standar wéb umum sareng-kalayan usaha tambahan minimal-bisa dianggo pikeun nyiptakeun situs anu tiasa diaksés ku anu nganggo AT .

Skip navigasi

Upami navigasi anjeun ngandung seueur tautan sareng sateuacan eusi utama dina DOM, tambahkeun Skip to main contenttautan sateuacan navigasi (pikeun katerangan saderhana, tingali artikel Proyék A11Y ieu ngeunaan tautan navigasi skip ). Ngagunakeun .sr-onlykelas visually bakal nyumputkeun link skip, sarta .sr-only-focusablekelas bakal mastikeun yén link jadi katempo sakali fokus (pikeun pamaké 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>

Judul anu disarang

Nalika nyarang lulugu ( <h1>- <h6>), lulugu dokumén primér anjeun kedah janten <h1>. Judul-judul salajengna kedah nganggo logis <h2>- <h6>sapertos pamiarsa layar tiasa ngawangun daptar eusi pikeun halaman anjeun.

Diajar langkung seueur dina HTML CodeSniffer sareng AccessAbility Penn State .

Kontras warna

Ayeuna, sababaraha kombinasi warna standar anu aya dina Bootstrap (sapertos rupa-rupa kelas tombol gaya , sababaraha warna panyorot kode anu dianggo pikeun blok kode dasar , kelas pembantu .bg-primary latar kontekstual , sareng warna tautan standar nalika dianggo dina latar bodas) gaduh rasio kontras anu rendah (sahandapeun rasio anu disarankeun 4,5: 1 ). Ieu tiasa nyababkeun masalah pikeun pangguna anu teu visi atanapi anu buta warna. Warna standar ieu panginten kedah dirobih pikeun ningkatkeun kontras sareng kabacaan.

sumberdaya tambahan

• Bookmarklet "HTML Codesniffer" pikeun ngaidentipikasi masalah aksés
• Ekstensi Alat Pangembang Aksesibilitas Chrome
• Analyzer Kontras Warna
• Proyék A11Y
• Dokuméntasi aksés MDN

FAQs lisénsi

Bootstrap dileupaskeun dina lisénsi MIT sareng hak cipta 2016 Twitter. Digodog nepi ka sakumpulan leutik, éta bisa digambarkeun ku kaayaan di handap.

Éta peryogi anjeun:

• Tetep lisénsi sareng bewara hak cipta kalebet dina file CSS sareng JavaScript Bootstrap nalika anjeun ngagunakeunana dina karya anjeun

Éta ngamungkinkeun anjeun pikeun:

• Unduh gratis sareng nganggo Bootstrap, sadayana atanapi sabagian, pikeun tujuan pribadi, pribadi, internal perusahaan, atanapi komérsial
• Anggo Bootstrap dina bungkusan atanapi distribusi anu anjeun jieun
• Robah kodeu sumber
• Pasihan sublisensi pikeun ngarobih sareng nyebarkeun Bootstrap ka pihak katilu anu henteu kalebet kana lisénsi éta

Éta ngalarang anjeun pikeun:

• Tahan pangarang sareng pamilik lisénsi tanggung jawab pikeun karusakan sabab Bootstrap disayogikeun tanpa jaminan
• Tahan panyipta atanapi anu gaduh hak cipta Bootstrap tanggung jawab
• Ngabagikeun deui sapotong Bootstrap tanpa atribusi anu leres
• Anggo tanda naon waé anu dipiboga ku Twitter dina cara naon waé anu tiasa nyatakeun atanapi nunjukkeun yén Twitter ngadukung distribusi anjeun
• Anggo tanda naon waé anu dipiboga ku Twitter ku cara naon waé anu tiasa nyatakeun atanapi nunjukkeun yén anjeun nyiptakeun parangkat lunak Twitter anu dimaksud

Éta henteu meryogikeun anjeun:

• Lebetkeun sumber Bootstrap sorangan, atanapi modifikasi naon waé anu anjeun lakukeun, dina distribusi ulang anjeun tiasa ngumpul anu kalebet éta.
• Kirimkeun parobihan anu anjeun lakukeun ka Bootstrap deui ka proyék Bootstrap (sanaos eupan balik sapertos kitu disarankeun)

Lisensi Bootstrap pinuh aya dina gudang proyék pikeun inpormasi lengkep.

Tarjamahan

Anggota komunitas parantos narjamahkeun dokuméntasi Bootstrap kana sababaraha basa. Henteu aya anu dirojong sacara resmi sareng aranjeunna henteu salawasna diropéa.

• Bootstrap 中文文档 (Basa Cina)
• Bootstrap 3 中文手冊 (Cina (Tradisional))
• Bootstrap di Dansk (Denmark)
• Bootstrap en Français (Perancis)
• Bootstrap auf Deutsch (Jerman)
• Bootstrap dina Italiano (Italia)
• Bootstrap 한국어 (Koréa)
• 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)

Kami henteu ngabantosan ngatur atanapi ngadamel tarjamahan, kami ngan ukur numbu ka aranjeunna.

Réngsé tarjamahan énggal atanapi langkung saé? Buka pamundut tarik pikeun nambihan kana daptar kami.