Telechaje

Bootstrap (aktyèlman v3.3.7) gen kèk fason fasil pou kòmanse byen vit, yo chak fè apèl kont yon nivo konpetans diferan ak ka itilize. Li pou wè sa ki adapte bezwen patikilye ou.

Bootstrap CDN

Mesye yo nan jsDelivr bay sipò CDN pou CSS Bootstrap ak JavaScript. Jis itilize lyen Bootstrap CDN sa yo.

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

Enstale ak Bower

Ou kapab tou enstale ak jere Bootstrap's Less, CSS, JavaScript, ak polis lè l sèvi avèk Bower :

$ bower install bootstrap

Enstale ak npm

Ou kapab tou enstale Bootstrap lè l sèvi avèk npm :

$ npm install bootstrap@3

require('bootstrap')pral chaje tout plugins jQuery Bootstrap yo sou objè jQuery la. Modil bootstrapla li menm pa ekspòte anyen. Ou ka manyèlman chaje plugins jQuery Bootstrap yo endividyèlman lè w chaje /js/*.jsfichye yo anba anyè pi wo nivo pake a.

Bootstrap a package.jsongen kèk metadata adisyonèl anba kle sa yo:

• less- chemen nan dosye prensipal Bootstrap a mwens sous
• style- chemen nan CSS ki pa minified Bootstrap a ki te prekonpile lè l sèvi avèk paramèt default yo (pa gen okenn personnalisation)

Enstale ak Composer

Ou kapab tou enstale ak jere Bootstrap's Less, CSS, JavaScript, ak polis lè l sèvi avèk Composer :

$ composer require twbs/bootstrap

Otoprefiksè obligatwa pou Less/Sass

Bootstrap sèvi ak Autoprefixer pou fè fas ak prefiks machann CSS . Si w ap konpile Bootstrap soti nan sous Less/Sass li yo epi w pa itilize Gruntfile nou an, w ap bezwen entegre Autoprefixer nan pwosesis konstriksyon ou tèt ou. Si w ap itilize Bootstrap prekonpile oswa itilize Gruntfile nou an, ou pa bezwen enkyete sou sa paske Autoprefixer deja entegre nan Gruntfile nou an.

Ki sa ki enkli

Bootstrap ka telechaje sou de fòm, kote w ap jwenn anyè ak fichye sa yo, ki lojikman gwoupe resous komen yo epi bay tou de varyasyon konpile ak minified.

Bootstrap prekonpile

Yon fwa telechaje, dekonprese katab konprese a pou wè estrikti Bootstrap (konpile a). Ou pral wè yon bagay tankou sa a:

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

Sa a se fòm ki pi fondamantal nan Bootstrap: fichye prekonpile pou itilizasyon rapid gout nan prèske nenpòt pwojè entènèt. Nou bay konpile CSS ak JS ( bootstrap.*), osi byen ke konpile ak minified CSS ak JS ( bootstrap.min.*). Kat sous CSS ( bootstrap.*.map) disponib pou itilize ak zouti devlopè sèten navigatè yo. Polis ki soti nan Glyphicons yo enkli, menm jan ak tèm nan Bootstrap opsyonèl.

Kòd sous Bootstrap

Download kòd sous Bootstrap la gen ladan CSS, JavaScript, ak font yo prekonpile, ansanm ak sous Less, JavaScript, ak dokiman. Plis espesyalman, li gen ladan sa ki annapre yo ak plis ankò:

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

, less/, js/ak fonts/se kòd sous pou polis CSS, JS, ak ikon nou yo (respektivman). Katab la dist/gen ladan tout bagay ki nan lis nan seksyon download prekonpile pi wo a. Katab la docs/gen ladan kòd sous la pou dokiman nou yo, ak examples/sou itilizasyon Bootstrap. Anplis de sa, nenpòt lòt dosye ki enkli bay sipò pou pakè, enfòmasyon sou lisans, ak devlopman.

Konpile CSS ak JavaScript

Bootstrap itilize Grunt pou sistèm bati li yo, ak metòd pratik pou travay ak fondasyon an. Se konsa nou konpile kòd nou an, fè tès yo, ak plis ankò.

Enstale Grunt

Pou enstale Grunt, ou dwe premye telechaje epi enstale node.js (ki gen ladan npm). npm vle di modil pakè node epi li se yon fason pou jere depandans devlopman atravè node.js.

1. Enstale grunt-cliglobalman ak npm install -g grunt-cli.
2. /bootstrap/Navige nan anyè rasin lan , epi kouri npm install. npm pral gade package.jsondosye a epi otomatikman enstale depandans lokal ki nesesè yo ki nan lis la.

Lè w fin ranpli, ou pral kapab kouri kòmandman Grunt divès kalite yo bay nan liy lòd la.

Kòmandman Grunt ki disponib

grunt dist(Jis konpile CSS ak JavaScript)

Rejenere /dist/anyè a ak dosye CSS ak JavaScript konpile ak minified. Kòm yon itilizatè Bootstrap, sa a se nòmalman lòd ou vle a.

grunt watch(gade)

Gade fichye sous mwens yo epi li otomatikman recompile yo nan CSS chak fwa ou sove yon chanjman.

grunt test(Kouri tès yo)

Kouri JSHint epi kouri tès QUnit yo san tèt nan PhantomJS .

grunt docs(Konstwi ak teste byen dokiman yo)

Bati ak teste CSS, JavaScript, ak lòt byen ki itilize lè w ap kouri dokiman an lokalman atravè bundle exec jekyll serve.

grunt(Konstwi absoliman tout bagay epi kouri tès)

Konpile ak minimize CSS ak JavaScript, bati sit entènèt dokimantasyon an, kouri validateur HTML5 la kont dokiman yo, rejenere byen Customizer yo, ak plis ankò. Egzije Jekyll . Anjeneral sèlman nesesè si w ap Hack sou Bootstrap tèt li.

Depanaj

Si w ta rankontre pwoblèm ak enstale depandans oswa kouri kòmandman Grunt, premye efase /node_modules/anyè ki te pwodwi pa npm. Lè sa a, rekòmanse npm install.

Modèl de baz

Kòmanse ak modèl HTML debaz sa a, oswa modifye egzanp sa yo . Nou espere ou pral personnaliser modèl nou yo ak egzanp nou yo, adapte yo pou adapte yo ak bezwen ou yo.

Kopi HTML ki anba a pou kòmanse travay ak yon dokiman Bootstrap minim.

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

Egzanp yo

Bati sou modèl debaz ki anwo a ak anpil eleman Bootstrap la. Nou ankouraje w pou pèsonalize ak adapte Bootstrap pou adapte ak bezwen pwojè endividyèl ou a.

Jwenn kòd sous la pou chak egzanp anba a lè w telechaje repozitwa Bootstrap la . Egzanp yo ka jwenn nan docs/examples/anyè a.

Sèvi ak fondasyon an

Starter modèl

Pa gen anyen men Basics yo: konpile CSS ak JavaScript ansanm ak yon veso.

Bootstrap tèm

Chaje tèm Bootstrap opsyonèl la pou yon eksperyans vizyèlman amelyore.

Griyaj

Egzanp miltip nan layout kadriyaj ak tout kat nivo, nidifikasyon, ak plis ankò.

Jumbotron

Bati alantou jumbotron la ak yon navbar ak kèk kolòn kadriyaj debaz yo.

Etwat jumbotron

Bati yon paj plis koutim pa rediksyon veso a default ak jumbotron.

Navbars an aksyon

Navbar

Super modèl debaz ki gen ladann navbar ansanm ak kèk kontni adisyonèl.

Estatik navbar anlè

Super modèl debaz ak yon navbar estatik ak kèk kontni adisyonèl.

Navbar fiks

Modèl debaz super ak yon navbar anwo fiks ansanm ak kèk kontni adisyonèl.

Konpozan koutim

Kouvri

Yon modèl yon sèl paj pou bati paj lakay senp ak bèl.

Carousel

Customize navbar la ak Carousel, Lè sa a, ajoute kèk eleman nouvo.

Blog

Senp layout blog de kolòn ak navigasyon koutim, header, ak kalite.

Dachboard

Estrikti debaz pou yon tablodbò admin ak ba bò fiks ak navbar.

Paj siyen an

Layout fòm koutim ak konsepsyon pou yon siy senp nan fòm.

Nav jistifye

Kreye yon navbar koutim ak lyen jistifye. Tèt leve! Pa twò zanmitay Safari.

Pye kolan

Tache yon pye anba nan vi a lè kontni an pi kout pase li.

Footer kolan ak navbar

Tache yon pye anba nan pòtay la ak yon navbar fiks nan tèt la.

Eksperyans

Bootstrap ki pa reponn

Fasil enfim reyaksyon Bootstrap dapre dokiman nou yo .

Off-kanva

Konstwi yon meni navigasyon ki ka chanje sou twal la pou itilize ak Bootstrap.

Zouti

Bootlint

Bootlint se zouti ofisyèl Bootstrap HTML linter . Li otomatikman tcheke pou plizyè erè HTML komen nan paj wèb ki ap itilize Bootstrap nan yon fason jistis "vaniy". Konpozan/widget Vanilla Bootstrap mande pati yo nan DOM pou konfòme yo ak sèten estrikti. Bootlint tcheke si konpozan Bootstrap yo gen HTML ki byen estriktire. Konsidere ajoute Bootlint nan chèn zouti devlopman entènèt Bootstrap ou a pou pa youn nan erè komen yo ralanti devlopman pwojè ou a.

Kominote

Rete ajou sou devlopman Bootstrap epi kontakte kominote a ak resous itil sa yo.

• Li epi abònman nan Blog ofisyèl Bootstrap la .
• Chat ak Bootstrappers parèy yo lè l sèvi avèk IRC sou irc.freenode.netsèvè a, nan ##bootstrap channel la .
• Pou èd lè l sèvi avèk Bootstrap, mande sou StackOverflow lè l sèvi avèk tag latwitter-bootstrap-3 .
• Devlopè yo ta dwe itilize mo kle a bootstrapsou pakè ki modifye oswa ajoute nan fonksyonalite Bootstrap lè yo distribye atravè npm oswa mekanis livrezon ki sanble pou dekouvèt maksimòm.
• Jwenn egzanp enspire moun ki bati ak Bootstrap nan Bootstrap Ekspozisyon an .

Ou kapab tou swiv @getbootstrap sou Twitter pou dènye tripotay ak videyo mizik awizom.

Enfimite repons

Bootstrap otomatikman adapte paj ou yo pou divès gwosè ekran. Men ki jan yo enfim karakteristik sa a pou paj ou a travay tankou egzanp sa a ki pa reponn .

Etap pou enfim repons paj la

1. Omite vi ki <meta>mansyone nan dokiman CSS yo
2. Ranplase widthsou la .containerpou chak nivo kadriyaj ak yon sèl lajè, pou egzanp width: 970px !important;Asire w ke sa a vini apre default Bootstrap CSS la. Ou ka opsyonèlman evite !importantak medya requêtes ou kèk sélecteur-fu.
3. Si w ap itilize navbars, retire tout navbar k ap efondre ak elaji konpòtman.
4. Pou plan kadriyaj, sèvi ak .col-xs-*klas yo anplis oswa nan plas mwayen/gwo yo. Pa enkyete, gri aparèy siplemantè-ti echèl nan tout rezolisyon yo.

Ou ap toujou bezwen Respond.js pou IE8 (depi demann medya nou yo toujou la epi yo bezwen trete). Sa a enfim aspè "sit mobil" Bootstrap yo.

Modèl Bootstrap ak repons enfim

Nou te aplike etap sa yo nan yon egzanp. Li kòd sous li a pou wè chanjman espesifik yo aplike.

Gade egzanp ki pa reponn

Sipò pou navigatè ak aparèy

Bootstrap fèt pou travay pi byen nan dènye navigatè Desktop yo ak navigatè mobil yo, sa vle di navigatè ki pi gran yo ka montre yon fason diferan, menm si konplètman fonksyonèl, rann sèten eleman.

Sipòte navigatè yo

Espesyalman, nou sipòte dènye vèsyon navigatè ak platfòm sa yo.

Navigatè altènatif ki sèvi ak dènye vèsyon WebKit, Blink, oswa Gecko, kit se dirèkteman oswa atravè API web view platfòm la, pa klèman sipòte. Sepandan, Bootstrap ta dwe (nan pifò ka) montre ak fonksyone kòrèkteman nan navigatè sa yo tou. Yo bay plis enfòmasyon sou sipò espesifik anba a.

Aparèy mobil

Anjeneral, Bootstrap sipòte dènye vèsyon navigatè default chak gwo platfòm yo. Remake byen ke navigatè proxy (tankou Opera Mini, mòd Turbo Opera Mobile a, UC Browser Mini, Amazon Silk) pa sipòte.

Navigatè Desktop yo

Menm jan an tou, dènye vèsyon yo nan pifò navigatè Desktop yo sipòte.

Sou Windows, nou sipòte Internet Explorer 8-11 .

Pou Firefox, anplis de dènye lage nòmal ki estab, nou sipòte tou dènye vèsyon Firefox (ESR) pou dènye sipò .

Ofisyèlman, Bootstrap ta dwe gade ak konpòte ase byen nan Chromium ak Chrome pou Linux, Firefox pou Linux, ak Internet Explorer 7, osi byen ke Microsoft Edge, menm si yo pa ofisyèlman sipòte.

Pou jwenn yon lis kèk nan ensèk navigatè yo ke Bootstrap gen pou lite ak, gade miray nou an nan pinèz navigatè yo .

Internet Explorer 8 ak 9

Internet Explorer 8 ak 9 yo sipòte tou, sepandan, tanpri dwe konnen ke kèk pwopriyete CSS3 ak eleman HTML5 yo pa konplètman sipòte pa navigatè sa yo. Anplis de sa, Internet Explorer 8 mande pou itilize Respond.js pou pèmèt sipò rechèch medya yo.

Vizite Èske mwen ka itilize... pou plis detay sou sipò navigatè a nan karakteristik CSS3 ak HTML5.

Internet Explorer 8 ak Respond.js

Fè atansyon ak opozisyon sa yo lè w ap itilize Respond.js nan anviwònman devlopman ak pwodiksyon ou pou Internet Explorer 8.

Respond.js ak CSS kwa-domèn

Sèvi ak Respond.js ak CSS akomode sou yon (sou)domèn diferan (pa egzanp, sou yon CDN) mande pou kèk konfigirasyon adisyonèl. Gade dokiman Respond.js yo pou plis detay.

Respond.js akfile://

Akòz règ sekirite navigatè a, Respond.js pa travay ak paj yo wè atravè file://pwotokòl la (tankou lè w ap louvri yon dosye HTML lokal). Pou teste karakteristik ki reponn nan IE8, gade paj ou yo sou HTTP(S). Gade dokiman Respond.js yo pou plis detay.

Respond.js ak@import

Respond.js pa travay ak CSS ki referans via @import. An patikilye, gen kèk konfigirasyon Drupal yo konnen yo itilize @import. Gade dokiman Respond.js yo pou plis detay.

Internet Explorer 8 ak bwat-gwosè

IE8 pa konplètman sipòte box-sizing: border-box;lè yo konbine avèk min-width, max-width, min-height, oswa max-height. Pou rezon sa a, apati v3.0.1, nou pa itilize ankò max-widthsou .containers.

Internet Explorer 8 ak @font-face

IE8 gen kèk pwoblèm ak @font-facelè konbine avèk :before. Bootstrap sèvi ak konbinezon sa a ak Glyphicons li yo. Si yon paj kach, epi chaje san sourit la sou fenèt la (sa vle di frape bouton rafrechir la oswa chaje yon bagay nan yon iframe) Lè sa a, paj la vin rann anvan font la chaje. Pase sou paj la (kò) pral montre kèk nan ikon yo epi pase sou ikon ki rete yo pral montre sa yo tou. Gade pwoblèm #13863 pou plis detay.

IE mòd konpatibilite

Bootstrap pa sipòte nan ansyen mòd konpatibilite Internet Explorer yo. Pou asire w ke w ap itilize dènye mòd rann pou IE, konsidere enkli <meta>tag apwopriye a nan paj ou yo:

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

Konfime mòd dokiman an pa louvri zouti débogage: peze F12epi tcheke "Dokiman Mode".

Tag sa a enkli nan tout dokiman Bootstrap yo ak egzanp pou asire pi bon rann posib nan chak vèsyon ki sipòte Internet Explorer.

Gade kesyon StackOverflow sa a pou plis enfòmasyon.

Internet Explorer 10 nan Windows 8 ak Windows Phone 8

Internet Explorer 10 pa fè diferans lajè aparèy ak lajè viewport , epi kidonk li pa byen aplike rekèt medya yo nan CSS Bootstrap la. Nòmalman ou ta jis ajoute yon ti bout rapid nan CSS pou ranje sa a:

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

Sepandan, sa a pa travay pou aparèy ki kouri Windows Phone 8 vèsyon ki pi gran pase Mizajou 3 (aka GDR3) , paske li lakòz aparèy sa yo montre yon gade sitou Desktop olye pou yo gade etwat "telefòn". Pou abòde sa, w ap bezwen mete CSS sa yo ak JavaScript pou travay sou ensèk la .

@-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)
}

Pou plis enfòmasyon ak direktiv itilizasyon, li Windows Phone 8 ak Device-Width .

Kòm yon tèt, nou mete sa a nan tout dokiman Bootstrap la ak egzanp kòm yon demonstrasyon.

Safari pousan awondi

Motè rann vèsyon Safari anvan v7.1 pou OS X ak Safari pou iOS v8.0 te gen kèk pwoblèm ak kantite desimal yo itilize nan .col-*-1klas griy nou yo. Se konsa, si ou te gen 12 kolòn gri endividyèl, ou ta remake ke yo te vini kout konpare ak lòt ranje nan kolòn. Anplis ajou Safari/iOS, ou gen kèk opsyon pou solisyon:

• Ajoute .pull-rightnan dènye kolòn kadriyaj ou a pou jwenn aliyman difisil-dwat la
• Ajiste pousantaj ou yo manyèlman pou jwenn awondi pafè pou Safari (pi difisil pase premye opsyon)

Modal, navbars, ak klavye vityèl

Debòde ak defile

Sipò pou overflow: hiddensou <body>eleman an se byen limite nan iOS ak android. Pou sa ka fèt, lè ou pase anwo oswa anba yon modal nan nenpòt nan navigatè aparèy sa yo, <body>kontni an ap kòmanse woule. Gade ensèk Chrome #175502 (ranje nan Chrome v40) ak ensèk WebKit #153852 .

iOS jaden tèks ak defile

Apati iOS 9.3, pandan yon modal louvri, si premye manyen yon jès woulo liv se nan fwontyè yon tèks <input>oswa yon <textarea>, <body>kontni an anba modal la pral defile olye pou yo modal nan tèt li. Gade ensèk WebKit #153856 .

Klavye vityèl

Epitou, sonje ke si w ap itilize yon navbar fiks oswa lè w ap itilize antre nan yon modal, iOS gen yon ensèk rann ki pa mete ajou pozisyon nan eleman fiks lè klavye vityèl la deklanche. Kèk solisyon pou sa a gen ladan transfòme eleman ou yo position: absoluteoswa envoke yon revèy sou konsantre pou eseye korije pozisyon an manyèlman. Sa a pa okipe pa Bootstrap, kidonk li se jiska ou deside ki solisyon ki pi bon pou aplikasyon w lan.

Navbar Dropdowns

Eleman .dropdown-backdropan pa itilize sou iOS nan nav la akòz konpleksite z-indexing. Kidonk, pou fèmen dropdowns nan navbars, ou dwe dirèkteman klike sou eleman dropdown la (oswa nenpòt lòt eleman ki pral tire yon evènman klike sou iOS ).

Zoom navigatè

Zooming paj inevitableman prezante zafè rann nan kèk eleman, tou de nan Bootstrap ak rès la nan entènèt la. Tou depan de pwoblèm nan, nou ka kapab ranje li (chèche an premye epi ouvri yon pwoblèm si sa nesesè). Sepandan, nou gen tandans inyore sa yo paske yo souvan pa gen okenn solisyon dirèk lòt pase solisyon Hacky.

Sticky :hover/ :focussou mobil

Menmsi volan reyèl pa posib sou pifò ekran tactile, pifò navigatè mobil yo imite sipò pou plan an epi fè :hover"kolan". Nan lòt mo, :hoverestil kòmanse aplike apre yo fin frape yon eleman epi sèlman sispann aplike apre itilizatè a tape kèk lòt eleman. Sa ka lakòz eta Bootstrap :hoveryo vin endezirab "kole" sou navigatè sa yo. Gen kèk navigatè mobil tou fè :focusmenm jan an kolan. Kounye a pa gen yon solisyon senp pou pwoblèm sa yo pase retire estil sa yo nèt.

Enpresyon

Menm nan kèk navigatè modèn, enprime ka orijinal.

An patikilye, apati Chrome v32 ak kèlkeswa paramèt Marge, Chrome itilize yon lajè viewport siyifikativman pi etwat pase gwosè papye fizik la lè li rezoud kesyon medya yo pandan y ap enprime yon paj wèb. Sa ka lakòz kadriyaj siplemantè Bootstrap a aktive san atann lè enprime. Gade pwoblèm #12078 ak ensèk Chrome #273306 pou kèk detay. Sigjere solisyon:

• Anbrase kadriyaj siplemantè-ti a epi asire w ke paj ou a sanble akseptab anba li.
• Pèsonalize valè yo nan @screen-*mwens varyab yo pou ke papye enprimant ou konsidere kòm pi gwo pase siplemantè-ti.
• Ajoute demann medya koutim pou chanje pwen rupture gwosè kadriyaj pou medya enprime sèlman.

Epitou, apati de Safari v8.0, lajè fiks .containeryo ka lakòz Safari sèvi ak yon gwosè font etranj ti lè enprime. Gade #14868 ak ensèk WebKit #138192 pou plis detay. Yon solisyon potansyèl pou sa a se ajoute CSS sa a:

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

Navigatè stock android

Soti nan bwat la, Android 4.1 (e menm kèk nouvo degaje aparamman) bato ak app Navigatè a kòm navigatè entènèt defo chwa (kontrèman ak Chrome). Malerezman, aplikasyon navigatè a gen anpil ensèk ak enkonsistans ak CSS an jeneral.

Chwazi meni yo

Sou <select>eleman, navigatè a stock android pa pral montre kontwòl yo bò si gen yon border-radiusak / oswa borderaplike. (Gade kesyon StackOverflow sa a pou plis detay.) Sèvi ak ti bout kòd ki anba a pou retire CSS ki ofanse a epi rann li <select>kòm yon eleman san stil sou navigatè stock Android a. Sniffing ajan itilizatè a evite entèferans ak navigatè Chrome, Safari ak 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>

Vle wè yon egzanp? Tcheke demonstrasyon JS Bin sa a.

Validatè

Pou bay pi bon eksperyans posib pou navigatè fin vye granmoun ak buggy, Bootstrap itilize Hack navigatè CSS nan plizyè kote pou vize CSS espesyal nan vèsyon navigatè sèten yo nan lòd yo travay sou ensèk nan navigatè yo tèt yo. Antay sa yo konprann byen lakòz validateur CSS plenyen ke yo pa valab. Nan yon koup kote, nou itilize tou senyen-kwen CSS karakteristik ki poko konplètman estanda, men sa yo yo itilize piman pou amelyorasyon pwogresif.

Avètisman validation sa yo pa gen pwoblèm nan pratik, paske pòsyon ki pa piki nan CSS nou an konplètman valide epi pòsyon ki piki yo pa entèfere ak fonksyone apwopriye nan pòsyon ki pa piki a, kidonk poukisa nou fè espre inyore avètisman patikilye sa yo.

Menm jan an tou, dokiman HTML nou yo gen kèk avètisman sou validation HTML ki pa gen anpil valè akòz enklizyon nou genyen yon solisyon pou yon sèten ensèk Firefox .

Sipò twazyèm pati

Pandan ke nou pa sipòte ofisyèlman okenn grefon twazyèm pati oswa adisyon, nou ofri kèk konsèy itil pou ede evite pwoblèm potansyèl nan pwojè ou yo.

Bwat-gwosè

Gen kèk lojisyèl twazyèm pati, ki gen ladan Google Maps ak Google Custom Search Engine, konfli ak Bootstrap akòz * { box-sizing: border-box; }, yon règ ki fè li paddingpa afekte lajè final la kalkile nan yon eleman. Aprann plis sou modèl bwat ak gwosè nan CSS Tricks .

Tou depan de kontèks la, ou ka depase jan sa nesesè (Opsyon 1) oswa retabli gwosè bwat la pou tout rejyon yo (Opsyon 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();
}

Aksesiblite

Bootstrap swiv estanda entènèt komen yo epi—ak yon efò minim siplemantè—yo ka itilize pou kreye sit ki aksesib pou moun ki itilize AT .

Sote navigasyon

Si navigasyon ou a gen anpil lyen epi li vini anvan kontni prensipal la nan DOM, ajoute yon Skip to main contentlyen anvan navigasyon an (pou yon eksplikasyon senp, gade atik sa a Pwojè A11Y sou lyen sote navigasyon ). Sèvi ak .sr-onlyklas la pral vizyèlman kache lyen sote a, epi .sr-only-focusableklas la pral asire ke lyen an vin vizib yon fwa konsantre (pou itilizatè klavye ki wè).

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

Tit ki anbrike

Lè nidifikasyon tit ( <h1>- <h6>), en-tête dokiman prensipal ou a ta dwe yon <h1>. Tit ki vin apre yo ta dwe fè itilizasyon lojik nan <h2>- <h6>sa yo ki lektè ekran yo ka konstwi yon tablo de kontni pou paj ou yo.

Aprann plis nan HTML CodeSniffer ak AccessAbility Penn State .

Kontras koulè

Kounye a, kèk nan konbinezon koulè default ki disponib nan Bootstrap (tankou divès kalite klas bouton style , kèk nan koulè ki make kòd yo itilize pou blòk kòd debaz yo , klas asistan .bg-primary background kontèks la, ak koulè lyen default lè yo itilize sou yon background blan) gen yon rapò kontras ki ba (anba rapò a rekòmande nan 4.5: 1 ). Sa ka lakòz pwoblèm itilizatè ki gen vizyon ki ba oswa ki avèg koulè. Koulè default sa yo ka bezwen modifye pou ogmante kontras yo ak lizibilite yo.

Resous adisyonèl

• Bookmarklet "HTML Codesniffer" pou idantifye pwoblèm aksè
• Ekstansyon Zouti pou Devlopè Aksesibilite Chrome a
• Koulè Kontras Analyzer
• Pwojè A11Y la
• Dokiman pou aksè MDN

Lisans FAQ

Bootstrap lage anba lisans MIT ak copyright 2016 Twitter. Bouyi desann nan pi piti fragman, li ka dekri ak kondisyon sa yo.

Li mande pou ou:

• Kenbe lisans lan ak avi copyright enkli nan CSS Bootstrap ak fichye JavaScript lè ou itilize yo nan travay ou yo

Li pèmèt ou:

• Libète telechaje epi sèvi ak Bootstrap, an antye oswa an pati, pou rezon pèsonèl, prive, konpayi entèn, oswa komèsyal
• Sèvi ak Bootstrap nan pakè oswa distribisyon ke ou kreye
• Modifye kòd sous la
• Bay yon sou-lisans pou modifye ak distribye Bootstrap bay twazyèm pati ki pa enkli nan lisans lan

Li entèdi ou:

• Kenbe otè yo ak pwopriyetè lisans yo responsab pou domaj kòm Bootstrap yo bay san garanti
• Kenbe kreyatè yo oswa moun ki gen copyright Bootstrap responsab
• Redistribiye nenpòt moso nan Bootstrap san yo pa bon atribisyon
• Sèvi ak nenpòt mak ki posede pa Twitter nan nenpòt fason ki ta ka endike oswa vle di ke Twitter andose distribisyon ou
• Sèvi ak nenpòt mak ki posede pa Twitter nan nenpòt fason ki ta ka endike oswa vle di ke ou te kreye lojisyèl an Twitter nan kesyon an

Li pa mande pou ou:

• Mete sous Bootstrap li menm, oswa nenpòt modifikasyon ou te fè sou li, nan nenpòt redistribisyon ou ka rasanble ki gen ladan l.
• Soumèt chanjman ou fè nan Bootstrap tounen nan pwojè Bootstrap la (menm si yo ankouraje fidbak sa yo)

Lisans Bootstrap konplè a sitiye nan depo pwojè a pou plis enfòmasyon.

Tradiksyon

Manm kominote yo te tradui dokiman Bootstrap yo nan plizyè lang. Okenn yo pa sipòte ofisyèlman e yo ka pa toujou ajou.

• Bootstrap 中文文档 (Chinwa)
• Bootstrap 3 中文手冊 (Chinwa (Tradisyonèl))
• Bootstrap på Dansk (Danish)
• Bootstrap an Fransè (franse)
• Bootstrap auf Deutsch (Alman)
• Bootstrap nan Italyen (Italyen)
• Bootstrap 한국어 (Koreyen)
• Bootstrap nan Português do Brasil (Pòtigè brezilyen)
• Bootstrap по-русски (Ris)
• Bootstrap en Español (panyòl)
• Türkçe Bootstrap (Tik)
• Bootstrap українською (Ikrenyen)
• Bootstrap bằng tiếng Việt (Vyetnam)

Nou pa ede òganize oswa òganize tradiksyon, nou jis konekte yo.

Ou fini yon nouvo tradiksyon oswa yon pi bon tradiksyon? Louvri yon demann rale pou ajoute li nan lis nou an.