Lawrlwythwch

Mae gan Bootstrap (v3.3.7 ar hyn o bryd) ychydig o ffyrdd hawdd o ddechrau'n gyflym, pob un yn apelio at lefel sgil a defnydd gwahanol. Darllenwch drwodd i weld beth sy'n gweddu i'ch anghenion penodol.

CDN Bootstrap

Mae'r bobl draw yn jsDelivr yn garedig yn darparu cefnogaeth CDN ar gyfer CSS a JavaScript Bootstrap. Defnyddiwch y dolenni CDN Bootstrap hyn .

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

Gosod gyda Bower

Gallwch hefyd osod a rheoli Bootstrap's Less, CSS, JavaScript, a ffontiau gan ddefnyddio Bower :

$ bower install bootstrap

Gosod gyda npm

Gallwch hefyd osod Bootstrap gan ddefnyddio npm :

$ npm install bootstrap@3

require('bootstrap')yn llwytho holl ategion jQuery Bootstrap ar y gwrthrych jQuery. Nid yw'r bootstrapmodiwl ei hun yn allforio unrhyw beth. Gallwch lwytho ategion jQuery Bootstrap â llaw yn unigol trwy lwytho'r /js/*.jsffeiliau o dan gyfeiriadur lefel uchaf y pecyn.

Mae Bootstrap's yn package.jsoncynnwys rhai metadata ychwanegol o dan yr allweddi canlynol:

• less- llwybr i brif ffeil ffynhonnell Less Bootstrap
• style- llwybr i CSS anfeidrol Bootstrap sydd wedi'i baratoi ymlaen llaw gan ddefnyddio'r gosodiadau diofyn (dim addasu)

Gosod gyda Cyfansoddwr

Gallwch hefyd osod a rheoli Bootstrap's Less, CSS, JavaScript, a ffontiau gan ddefnyddio Cyfansoddwr :

$ composer require twbs/bootstrap

Angen rhagosodwr awto ar gyfer Llai/Sas

Mae Bootstrap yn defnyddio Autoprefixer i ddelio â rhagddodiaid gwerthwr CSS . Os ydych chi'n llunio Bootstrap o'i ffynhonnell Less/Sass ac nad ydych chi'n defnyddio ein Gruntfile, bydd angen i chi integreiddio Autoprefixer i'ch proses adeiladu eich hun. Os ydych chi'n defnyddio Bootstrap wedi'i lunio ymlaen llaw neu'n defnyddio ein Gruntfile, nid oes angen i chi boeni am hyn oherwydd mae Autoprefixer eisoes wedi'i integreiddio i'n Gruntfile.

Beth sydd wedi'i gynnwys

Gellir lawrlwytho Bootstrap mewn dwy ffurf, ac o fewn y rhain byddwch yn dod o hyd i'r cyfeiriaduron a'r ffeiliau canlynol, gan grwpio adnoddau cyffredin yn rhesymegol a darparu amrywiadau cryno a chrynhoi.

Bootstrap wedi'i lunio ymlaen llaw

Ar ôl ei lawrlwytho, dadsipio'r ffolder cywasgedig i weld strwythur (y llun) Bootstrap. Fe welwch rywbeth fel hyn:

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

Dyma'r ffurf fwyaf sylfaenol o Bootstrap: ffeiliau wedi'u llunio ymlaen llaw i'w defnyddio'n gyflym mewn unrhyw brosiect gwe bron. Rydym yn darparu CSS a JS ( bootstrap.*) , yn ogystal â CSS a JS ( bootstrap.min.*). Mae mapiau ffynhonnell CSS ( bootstrap.*.map) ar gael i'w defnyddio gydag offer datblygu rhai porwyr. Mae ffontiau o Glyphicons wedi'u cynnwys, yn ogystal â'r thema Bootstrap opsiynol.

Cod ffynhonnell Bootstrap

Mae lawrlwythiad cod ffynhonnell Bootstrap yn cynnwys yr asedau CSS, JavaScript, a ffont a luniwyd ymlaen llaw, ynghyd â ffynhonnell Llai, JavaScript, a dogfennaeth. Yn fwy penodol, mae'n cynnwys y canlynol a mwy:

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

Yr less/, js/, a fonts/dyma'r cod ffynhonnell ar gyfer ein ffontiau CSS, JS, ac eicon (yn y drefn honno). Mae'r dist/ffolder yn cynnwys popeth a restrir yn yr adran lawrlwytho ymlaen llaw uchod. Mae'r docs/ffolder yn cynnwys y cod ffynhonnell ar gyfer ein dogfennaeth, a'r examples/defnydd o Bootstrap. Y tu hwnt i hynny, mae unrhyw ffeil arall sydd wedi'i chynnwys yn darparu cefnogaeth ar gyfer pecynnau, gwybodaeth am drwyddedau a datblygiad.

Llunio CSS a JavaScript

Mae Bootstrap yn defnyddio Grunt ar gyfer ei system adeiladu, gyda dulliau cyfleus ar gyfer gweithio gyda'r fframwaith. Dyma sut rydyn ni'n llunio ein cod, yn cynnal profion, a mwy.

Gosod Grunt

I osod Grunt, yn gyntaf rhaid i chi lawrlwytho a gosod nod.js (sy'n cynnwys npm). Mae npm yn sefyll am fodiwlau wedi'u pecynnu â nodau ac mae'n ffordd o reoli dibyniaethau datblygu trwy nod.js.

1. Gosod grunt-cliyn fyd-eang gyda npm install -g grunt-cli.
2. Llywiwch i'r /bootstrap/cyfeiriadur gwraidd, yna rhedeg npm install. Bydd npm yn edrych ar y package.jsonffeil ac yn gosod y dibyniaethau lleol angenrheidiol a restrir yno yn awtomatig.

Ar ôl ei gwblhau, byddwch yn gallu rhedeg y gwahanol orchmynion Grunt a ddarperir o'r llinell orchymyn.

Gorchmynion Grunt sydd ar gael

grunt dist(Dim ond llunio CSS a JavaScript)

Yn adfywio'r /dist/cyfeiriadur gyda ffeiliau CSS a JavaScript wedi'u llunio a'u minimeiddio. Fel defnyddiwr Bootstrap, dyma'r gorchymyn rydych chi ei eisiau fel arfer.

grunt watch(Gwylio)

Yn gwylio'r ffeiliau ffynhonnell Llai ac yn eu hail-grynhoi'n awtomatig i CSS pryd bynnag y byddwch chi'n arbed newid.

grunt test(Rhedeg profion)

Yn rhedeg JSHint ac yn rhedeg y profion QUnit yn ddi-ben yn PhantomJS .

grunt docs(Adeiladu a phrofi'r asedau dogfennau)

Yn adeiladu ac yn profi CSS, JavaScript, ac asedau eraill a ddefnyddir wrth redeg y ddogfennaeth yn lleol trwy bundle exec jekyll serve.

grunt(Adeiladu popeth a rhedeg profion)

Yn llunio ac yn lleihau CSS a JavaScript, yn adeiladu'r wefan ddogfennaeth, yn rhedeg y dilysydd HTML5 yn erbyn y dogfennau, yn adfywio'r asedau Customizer, a mwy. Angen Jekyll . Fel arfer dim ond yn angenrheidiol os ydych chi'n hacio ar Bootstrap ei hun.

Datrys problemau

Os cewch chi broblemau gyda gosod dibyniaethau neu redeg gorchmynion Grunt, dilëwch yn gyntaf y /node_modules/cyfeiriadur a gynhyrchir gan npm. Yna, ail-redeg npm install.

Templed sylfaenol

Dechreuwch gyda'r templed HTML sylfaenol hwn, neu addaswch yr enghreifftiau hyn . Gobeithiwn y byddwch yn addasu ein templedi ac enghreifftiau, gan eu haddasu i weddu i'ch anghenion.

Copïwch yr HTML isod i ddechrau gweithio gyda dogfen Bootstrap fach iawn.

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

Enghreifftiau

Adeiladwch ar y templed sylfaenol uchod gyda llawer o gydrannau Bootstrap. Rydym yn eich annog i addasu ac addasu Bootstrap i weddu i anghenion eich prosiect unigol.

Sicrhewch y cod ffynhonnell ar gyfer pob enghraifft isod trwy lawrlwytho ystorfa Bootstrap . Ceir enghreifftiau yn y docs/examples/cyfeiriadur.

Defnyddio'r fframwaith

Templed cychwynnol

Dim byd ond y pethau sylfaenol: CSS a JavaScript wedi'u llunio ynghyd â chynhwysydd.

Thema Bootstrap

Llwythwch y thema Bootstrap opsiynol ar gyfer profiad wedi'i wella'n weledol.

Gridiau

Enghreifftiau lluosog o gynlluniau grid gyda phob un o'r pedair haen, nythu, a mwy.

Jumbotron

Adeiladwch o amgylch y jumbotron gyda navbar a rhai colofnau grid sylfaenol.

Jumbotron cul

Adeiladwch dudalen fwy arferiad trwy gulhau'r cynhwysydd diofyn a'r jumbotron.

Navbars ar waith

Navbar

Templed sylfaenol iawn sy'n cynnwys y bar llywio ynghyd â rhywfaint o gynnwys ychwanegol.

Bar llywio statig

Templed sylfaenol iawn gyda bar llywio sefydlog ar y brig ynghyd â rhywfaint o gynnwys ychwanegol.

Navbar sefydlog

Templed sylfaenol iawn gyda bar llywio pen sefydlog ynghyd â rhywfaint o gynnwys ychwanegol.

Cydrannau personol

Gorchudd

Templed un dudalen ar gyfer adeiladu tudalennau cartref syml a hardd.

Carwsél

Addaswch y bar llywio a'r carwsél, yna ychwanegwch rai cydrannau newydd.

Blog

Cynllun blog dwy golofn syml gyda llywio personol, pennawd a math.

Dangosfwrdd

Strwythur sylfaenol ar gyfer dangosfwrdd gweinyddol gyda bar ochr sefydlog a bar llywio.

Tudalen mewngofnodi

Cynllun a dyluniad y ffurflen wedi'i deilwra ar gyfer ffurf arwydd syml.

Nav cyfiawn

Creu bar llywio wedi'i deilwra gyda chysylltiadau wedi'u cyfiawnhau. Pennau i fyny! Ddim yn rhy gyfeillgar i Safari.

Troedyn gludiog

Atodwch droedyn i waelod y porth gwylio pan fydd y cynnwys yn fyrrach nag ef.

Troedyn gludiog gyda bar llywio

Gosodwch droedyn ar waelod yr olygfan gyda bar llywio sefydlog ar y brig.

Arbrofion

Bootstrap nad yw'n ymateb

Analluogi ymatebolrwydd Bootstrap yn hawdd yn ein dogfennau .

Oddi ar y cynfas

Adeiladwch ddewislen llywio oddi ar y cynfas y gellir ei thoglo i'w defnyddio gyda Bootstrap.

Offer

Bootlint

Bootlint yw'r offeryn linter HTML Bootstrap swyddogol. Mae'n gwirio'n awtomatig am sawl camgymeriad HTML cyffredin ar dudalennau gwe sy'n defnyddio Bootstrap mewn ffordd eithaf "fanila". Mae cydrannau / teclynnau Vanilla Bootstrap yn ei gwneud yn ofynnol i'w rhannau o'r DOM gydymffurfio â rhai strwythurau. Mae Bootlint yn gwirio bod gan enghreifftiau o gydrannau Bootstrap HTML wedi'i strwythuro'n gywir. Ystyriwch ychwanegu Bootlint at eich cadwyn offer datblygu gwe Bootstrap fel na fydd unrhyw un o'r camgymeriadau cyffredin yn arafu datblygiad eich prosiect.

Cymuned

Sicrhewch y wybodaeth ddiweddaraf am ddatblygiad Bootstrap ac estyn allan i'r gymuned gyda'r adnoddau defnyddiol hyn.

• Darllenwch a thanysgrifiwch i'r Blog Bootstrap Swyddogol .
• Sgwrsiwch â chyd-Botstrappers gan ddefnyddio IRC yn y irc.freenode.netgweinydd, yn y sianel ##bootstrap .
• Am help i ddefnyddio Bootstrap, gofynnwch ar StackOverflow gan ddefnyddio'r tagtwitter-bootstrap-3 .
• Dylai datblygwyr ddefnyddio'r allweddair bootstrapar becynnau sy'n addasu neu'n ychwanegu at ymarferoldeb Bootstrap wrth ddosbarthu trwy npm neu fecanweithiau dosbarthu tebyg ar gyfer y darganfyddiad mwyaf posibl.
• Dewch o hyd i enghreifftiau ysbrydoledig o bobl yn adeiladu gyda Bootstrap yn y Bootstrap Expo .

Gallwch hefyd ddilyn @getbootstrap ar Twitter i gael y clecs diweddaraf a fideos cerddoriaeth anhygoel.

Analluogi ymatebolrwydd

Mae Bootstrap yn addasu'ch tudalennau yn awtomatig ar gyfer gwahanol feintiau sgrin. Dyma sut i analluogi'r nodwedd hon fel bod eich tudalen yn gweithio fel yr enghraifft anymatebol hon .

Camau i analluogi ymatebolrwydd tudalennau

1. Hepgorer yr olygfan a <meta>grybwyllir yn y dogfennau CSS
2. Diystyru'r widthar y ar .containergyfer pob haen grid gydag un lled, er enghraifft width: 970px !important;Gwnewch yn siŵr bod hyn yn dod ar ôl y Bootstrap CSS rhagosodedig. Yn ddewisol, gallwch osgoi'r !importantymholiadau cyfryngau neu rai detholwr-fu.
3. Os ydych chi'n defnyddio barrau llywio, tynnwch yr holl ymddygiad sy'n cwympo ac yn ehangu ar y bar llywio.
4. Ar gyfer cynlluniau grid, defnyddiwch .col-xs-*ddosbarthiadau yn ychwanegol at, neu yn lle, y rhai canolig/mawr. Peidiwch â phoeni, mae'r grid dyfais all-fach yn cyd-fynd â phob penderfyniad.

Bydd angen Respond.js arnoch ar gyfer IE8 o hyd (gan fod ein hymholiadau gan y cyfryngau yn dal i fod yno a bod angen eu prosesu). Mae hyn yn analluogi agweddau "safle symudol" Bootstrap.

Templed Bootstrap gydag ymatebolrwydd wedi'i analluogi

Rydym wedi cymhwyso'r camau hyn i enghraifft. Darllenwch ei god ffynhonnell i weld y newidiadau penodol a roddwyd ar waith.

Gweld enghraifft nad yw'n ymateb

Cefnogaeth porwr a dyfais

Mae Bootstrap wedi'i adeiladu i weithio orau yn y porwyr bwrdd gwaith a symudol diweddaraf, sy'n golygu y gallai porwyr hŷn arddangos rendradau o gydrannau penodol mewn arddull wahanol, er yn gwbl weithredol.

Porwyr a gefnogir

Yn benodol, rydym yn cefnogi'r fersiynau diweddaraf o'r porwyr a'r llwyfannau canlynol.

Nid yw porwyr eraill sy'n defnyddio'r fersiwn diweddaraf o WebKit, Blink, neu Gecko, boed yn uniongyrchol neu drwy API gwedd gwe y platfform, yn cael eu cefnogi'n benodol. Fodd bynnag, dylai Bootstrap (yn y rhan fwyaf o achosion) arddangos a gweithredu'n gywir yn y porwyr hyn hefyd. Darperir gwybodaeth cymorth mwy penodol isod.

Dyfeisiau symudol

Yn gyffredinol, mae Bootstrap yn cefnogi'r fersiynau diweddaraf o borwyr rhagosodedig pob platfform mawr. Sylwch na chefnogir porwyr dirprwyol (fel Opera Mini, modd Turbo Opera Mobile, Porwr Mini UC, Amazon Silk).

Porwyr bwrdd gwaith

Yn yr un modd, cefnogir y fersiynau diweddaraf o'r rhan fwyaf o borwyr bwrdd gwaith.

Ar Windows, rydym yn cefnogi Internet Explorer 8-11 .

Ar gyfer Firefox, yn ogystal â'r datganiad sefydlog arferol diweddaraf, rydym hefyd yn cefnogi'r Datganiad Cymorth Estynedig diweddaraf (ESR) o Firefox.

Yn answyddogol, dylai Bootstrap edrych ac ymddwyn yn ddigon da yn Chromium a Chrome ar gyfer Linux, Firefox ar gyfer Linux, ac Internet Explorer 7, yn ogystal â Microsoft Edge, er nad ydynt yn cael eu cefnogi'n swyddogol.

Am restr o rai o fygiau porwr y mae'n rhaid i Bootstrap fynd i'r afael â nhw, gweler ein Wal o chwilod porwr .

Internet Explorer 8 a 9

Mae Internet Explorer 8 a 9 hefyd yn cael eu cefnogi, fodd bynnag, byddwch yn ymwybodol nad yw'r porwyr hyn yn cefnogi rhai nodweddion CSS3 ac elfennau HTML5 yn llawn. Yn ogystal, mae Internet Explorer 8 yn gofyn am ddefnyddio Respond.js i alluogi cefnogaeth ymholiad cyfryngau.

Ewch i A allaf ddefnyddio... am fanylion ar gefnogaeth porwr i nodweddion CSS3 a HTML5.

Internet Explorer 8 ac Respond.js

Byddwch yn wyliadwrus o'r cafeatau canlynol wrth ddefnyddio Respond.js yn eich amgylcheddau datblygu a chynhyrchu ar gyfer Internet Explorer 8.

Respond.js a CSS traws-faes

Mae defnyddio Respond.js gyda CSS wedi'i westeio ar (is)barth gwahanol (er enghraifft, ar CDN) angen rhywfaint o osodiadau ychwanegol. Gweler y dogfennau Respond.js am fanylion.

Ymateb.js afile://

Oherwydd rheolau diogelwch porwr, nid yw Respond.js yn gweithio gyda thudalennau a welir trwy'r file://protocol (fel wrth agor ffeil HTML leol). I brofi nodweddion ymatebol yn IE8, edrychwch ar eich tudalennau dros HTTP(S). Gweler y dogfennau Respond.js am fanylion.

Ymateb.js a@import

Nid yw Respond.js yn gweithio gyda CSS y cyfeirir ato trwy @import. Yn benodol, gwyddys bod rhai cyfluniadau Drupal yn defnyddio @import. Gweler y dogfennau Respond.js am fanylion.

Internet Explorer 8 a maint y blychau

Nid yw IE8 yn cefnogi'n llawn o'i box-sizing: border-box;gyfuno â min-width, max-width, min-height, neu max-height. Am y rheswm hwnnw, o v3.0.1, nid ydym bellach yn defnyddio max-widthar .containera.

Internet Explorer 8 a @font-face

Mae gan IE8 rai problemau o'i @font-facegyfuno â :before. Mae Bootstrap yn defnyddio'r cyfuniad hwnnw â'i Glyphicons. Os caiff tudalen ei storio a'i llwytho heb y llygoden dros y ffenestr (hy taro'r botwm adnewyddu neu lwytho rhywbeth mewn iframe) yna bydd y dudalen yn cael ei rendro cyn i'r ffont lwytho. Bydd hofran dros y dudalen (corff) yn dangos rhai o'r eiconau a bydd hofran dros yr eiconau sy'n weddill yn dangos y rheini hefyd. Gweler rhifyn #13863 am fanylion.

IE Dulliau cydnawsedd

Ni chefnogir Bootstrap yn yr hen foddau cydweddoldeb Internet Explorer. Er mwyn sicrhau eich bod yn defnyddio'r modd rendro diweddaraf ar gyfer IE, ystyriwch gynnwys y <meta>tag priodol yn eich tudalennau:

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

Cadarnhewch y modd dogfen trwy agor yr offer dadfygio: pwyswch F12a gwiriwch y "Modd Dogfen".

Mae'r tag hwn wedi'i gynnwys yn holl ddogfennaeth Bootstrap ac enghreifftiau i sicrhau'r rendrad gorau posibl ym mhob fersiwn a gefnogir o Internet Explorer.

Gweler y cwestiwn StackOverflow hwn am ragor o wybodaeth.

Internet Explorer 10 yn Windows 8 a Windows Phone 8

Nid yw Internet Explorer 10 yn gwahaniaethu lled dyfais a lled y porth gwylio , ac felly nid yw'n cymhwyso'r ymholiadau cyfryngau yn CSS Bootstrap yn gywir. Fel arfer byddech chi'n ychwanegu pyt cyflym o CSS i drwsio hyn:

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

Fodd bynnag, nid yw hyn yn gweithio ar gyfer dyfeisiau sy'n rhedeg fersiynau Windows Phone 8 yn hŷn na Diweddariad 3 (aka GDR3) , gan ei fod yn achosi dyfeisiau o'r fath i ddangos golygfa bwrdd gwaith yn bennaf yn lle golygfa "ffôn" cul. I fynd i'r afael â hyn, bydd angen i chi gynnwys y CSS a JavaScript canlynol i weithio o amgylch y byg .

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

I gael rhagor o wybodaeth a chanllawiau defnyddio, darllenwch Windows Phone 8 a Device-Width .

Fel pen i fyny, rydym yn cynnwys hyn yn holl ddogfennau ac enghreifftiau Bootstrap fel arddangosiad.

Talgrynnu canran Safari

Cafodd y peiriant rendro o fersiynau o Safari cyn v7.1 ar gyfer OS X a Safari ar gyfer iOS v8.0 rywfaint o drafferth gyda nifer y lleoedd degol a ddefnyddiwyd yn ein .col-*-1dosbarthiadau grid. Felly pe bai gennych 12 colofn grid unigol, byddech yn sylwi eu bod wedi dod i fyny'n fyr o'u cymharu â rhesi eraill o golofnau. Ar wahân i uwchraddio Safari / iOS, mae gennych rai opsiynau ar gyfer atebion:

• Ychwanegwch .pull-rightat eich colofn grid olaf i gael yr aliniad caled-dde
• Tweak eich canrannau â llaw i gael y talgrynnu perffaith ar gyfer Safari (anoddach na'r opsiwn cyntaf)

Modalau, navbars, a bysellfyrddau rhithwir

Gorlif a sgrolio

Mae cefnogaeth overflow: hiddenar gyfer yr <body>elfen yn eithaf cyfyngedig yn iOS ac Android. I'r perwyl hwnnw, pan fyddwch chi'n sgrolio heibio i frig neu waelod modal yn y naill borwr neu'r llall o'r dyfeisiau hynny, bydd y <body>cynnwys yn dechrau sgrolio. Gweler bug Chrome #175502 (yn sefydlog yn Chrome v40) a byg WebKit #153852 .

meysydd testun iOS a sgrolio

O iOS 9.3, tra bod moddol ar agor, os yw cyffyrddiad cychwynnol ystum sgrolio o fewn ffin testunol <input>neu <textarea>, bydd y <body>cynnwys o dan y moddol yn cael ei sgrolio yn lle'r moddol ei hun. Gweler byg WebKit #153856 .

Bysellfyrddau rhithwir

Sylwch hefyd, os ydych chi'n defnyddio bar llywio sefydlog neu'n defnyddio mewnbynnau o fewn moddol, mae gan iOS nam rendro nad yw'n diweddaru sefyllfa elfennau sefydlog pan fydd y bysellfwrdd rhithwir yn cael ei sbarduno. Mae rhai atebion ar gyfer hyn yn cynnwys trawsnewid eich elfennau i position: absoluteneu alw amserydd ar ffocws i geisio cywiro'r gosodiad â llaw. Nid yw Bootstrap yn delio â hyn, felly mater i chi yw penderfynu pa ateb sydd orau ar gyfer eich cais.

Cwympiadau Navbar

Nid .dropdown-backdropyw'r elfen yn cael ei defnyddio ar iOS yn y nav oherwydd cymhlethdod y mynegeio z. Felly, i gau cwymplenni mewn bariau llywio, rhaid i chi glicio'n uniongyrchol ar yr elfen gwympo (neu unrhyw elfen arall a fydd yn tanio digwyddiad clicio yn iOS ).

Porwr yn chwyddo

Mae chwyddo tudalennau yn anochel yn cyflwyno arteffactau rendro mewn rhai cydrannau, yn Bootstrap a gweddill y we. Yn dibynnu ar y mater, efallai y byddwn yn gallu ei drwsio (chwiliwch yn gyntaf ac yna agorwch broblem os oes angen). Fodd bynnag, rydym yn tueddu i anwybyddu'r rhain oherwydd yn aml nid oes ganddynt unrhyw ateb uniongyrchol heblaw am atebion haclyd.

Gludiog :hover/ :focusar ffôn symudol

Er nad yw hofran go iawn yn bosibl ar y mwyafrif o sgriniau cyffwrdd, mae'r rhan fwyaf o borwyr symudol yn efelychu cefnogaeth hofran ac yn gwneud :hover"gludiog". Mewn geiriau eraill, mae :hoverarddulliau'n dechrau gwneud cais ar ôl tapio elfen a dim ond yn stopio gwneud cais ar ôl i'r defnyddiwr dapio rhyw elfen arall. Gall hyn achosi i :hoverdaleithiau Bootstrap fynd yn “sownd” yn annymunol ar borwyr o'r fath. Mae rhai porwyr symudol hefyd yn gwneud :focusyr un mor ludiog. Ar hyn o bryd nid oes ateb syml i'r materion hyn heblaw dileu arddulliau o'r fath yn gyfan gwbl.

Argraffu

Hyd yn oed mewn rhai porwyr modern, gall argraffu fod yn od.

Yn benodol, o Chrome v32 a waeth beth fo'r gosodiadau ymyl, mae Chrome yn defnyddio lled golygfan gryn dipyn yn gulach na maint y papur corfforol wrth ddatrys ymholiadau cyfryngau wrth argraffu tudalen we. Gall hyn arwain at roi grid bach ychwanegol Bootstrap ar waith yn annisgwyl wrth argraffu. Gweler rhifyn #12078 a bug Chrome #273306 am rai manylion. Atebion a awgrymir:

• Cofleidiwch y grid bach iawn a gwnewch yn siŵr bod eich tudalen yn edrych yn dderbyniol oddi tano.
• Addaswch werthoedd y @screen-*newidynnau Llai fel bod eich papur argraffydd yn cael ei ystyried yn fwy na bach iawn.
• Ychwanegu ymholiadau cyfryngau arferol i newid y torbwyntiau maint grid ar gyfer cyfryngau print yn unig.

Hefyd, o Safari v8.0, .containergall lled sefydlog achosi i Safari ddefnyddio maint ffont anarferol o fach wrth argraffu. Gweler #14868 a byg WebKit #138192 am ragor o fanylion. Un ateb posibl ar gyfer hyn yw ychwanegu'r CSS canlynol:

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

Porwr stoc Android

Allan o'r bocs, mae Android 4.1 (a hyd yn oed rhai datganiadau mwy newydd yn ôl pob tebyg) yn anfon gyda'r app Porwr fel y porwr gwe rhagosodedig o ddewis (yn hytrach na Chrome). Yn anffodus, mae gan yr app Porwr lawer o fygiau ac anghysondebau gyda CSS yn gyffredinol.

Dewiswch fwydlenni

Ar <select>elfennau, ni fydd porwr stoc Android yn arddangos y rheolyddion ochr os oes border-radiusa / neu bordergymhwyso. (Gweler y cwestiwn hwn StackOverflow am fanylion.) Defnyddiwch y pyt o god isod i gael gwared ar y CSS tramgwyddus a gwneud y <select>fel elfen unstyled ar y porwr stoc Android. Mae'r sniffian asiant defnyddiwr yn osgoi ymyrraeth â phorwyr Chrome, Safari a 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>

Eisiau gweld enghraifft?Edrychwch ar y demo JS Bin hwn.

Dilyswyr

Er mwyn darparu'r profiad gorau posibl i borwyr hen a bygi, mae Bootstrap yn defnyddio haciau porwr CSS mewn sawl man i dargedu CSS arbennig at rai fersiynau porwr er mwyn gweithio o gwmpas bygiau yn y porwyr eu hunain. Mae'r haciau hyn yn ddealladwy yn achosi dilyswyr CSS i gwyno eu bod yn annilys. Mewn cwpl o leoedd, rydym hefyd yn defnyddio nodweddion CSS ymyl gwaedu nad ydynt eto wedi'u safoni'n llawn, ond dim ond ar gyfer gwelliant cynyddol y defnyddir y rhain.

Nid yw'r rhybuddion dilysu hyn o bwys yn ymarferol gan fod y rhan nad yw'n haclyd o'n CSS yn dilysu'n llawn ac nid yw'r dognau haclyd yn ymyrryd â gweithrediad priodol y rhan nad yw'n haclyd, a dyna pam rydym yn anwybyddu'r rhybuddion penodol hyn yn fwriadol.

Yn yr un modd mae gan ein dogfennau HTML rai rhybuddion dilysu HTML dibwys ac anaml oherwydd ein bod wedi cynnwys datrysiad ar gyfer nam Firefox penodol .

Cefnogaeth trydydd parti

Er nad ydym yn cefnogi unrhyw ategion neu ychwanegion trydydd parti yn swyddogol, rydym yn cynnig rhywfaint o gyngor defnyddiol i helpu i osgoi problemau posibl yn eich prosiectau.

Blwch-sizing

Mae rhai meddalwedd trydydd parti, gan gynnwys Google Maps a Google Custom Search Engine, yn gwrthdaro â Bootstrap oherwydd * { box-sizing: border-box; }, nid yw rheol sy'n ei gwneud paddingyn effeithio ar led cyfrifedig terfynol elfen. Dysgwch fwy am fodel blwch a maint yn CSS Tricks .

Yn dibynnu ar y cyd-destun, gallwch ddiystyru yn ôl yr angen (Opsiwn 1) neu ailosod maint y blychau ar gyfer rhanbarthau cyfan (Opsiwn 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();
}

Hygyrchedd

Mae Bootstrap yn dilyn safonau gwe cyffredin a - gydag ychydig iawn o ymdrech ychwanegol - gellir ei ddefnyddio i greu gwefannau sy'n hygyrch i'r rhai sy'n defnyddio AT .

Hepgor llywio

Os yw'ch llywio yn cynnwys llawer o ddolenni ac yn dod cyn y prif gynnwys yn y DOM, ychwanegwch Skip to main contentddolen cyn y llywio (am esboniad syml, gweler yr erthygl Prosiect A11Y hwn ar ddolenni llywio sgip ). Bydd defnyddio'r .sr-onlydosbarth yn cuddio'r ddolen sgip yn weledol, a bydd y .sr-only-focusabledosbarth yn sicrhau bod y ddolen yn dod yn weladwy unwaith y bydd wedi'i ffocysu (ar gyfer defnyddwyr bysellfwrdd sy'n gweld).

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

Penawdau nythu

Wrth nythu penawdau ( <h1>- <h6>), dylai pennawd eich prif ddogfen fod yn <h1>. Dylai penawdau dilynol wneud defnydd rhesymegol o <h2>-<h6> fel bod darllenwyr sgrin yn gallu llunio tabl cynnwys ar gyfer eich tudalennau.

Dysgwch fwy yn HTML CodeSniffer a Penn State's AccessAbility .

Cyferbyniad lliw

Ar hyn o bryd, mae rhai o'r cyfuniadau lliw diofyn sydd ar gael yn Bootstrap (fel y botwm styled amrywiol amrywiol , rhai o'r cod amlygu lliwiau a ddefnyddir ar gyfer blociau cod sylfaenol , y dosbarth cynorthwyydd .bg-primary cefndir cyd-destunol , a'r lliw cyswllt rhagosodedig pan gaiff ei ddefnyddio ar gefndir gwyn) â chymhareb cyferbyniad isel (islaw'r gymhareb a argymhellir o 4.5:1 ). Gall hyn achosi problemau i ddefnyddwyr â golwg gwan neu sy'n lliwddall. Efallai y bydd angen addasu'r lliwiau rhagosodedig hyn i gynyddu eu cyferbyniad a'u darllenadwyedd.

Adnoddau ychwanegol

• Nod tudalen "HTML Codesniffer" ar gyfer nodi problemau hygyrchedd
• Estyniad Offer Datblygwr Hygyrchedd Chrome
• Dadansoddwr Cyferbyniad Lliw
• Y Prosiect A11Y
• Dogfennaeth hygyrchedd MDN

Cwestiynau Cyffredin am Drwydded

Mae Bootstrap yn cael ei ryddhau o dan drwydded MIT ac mae'n hawlfraint 2016 Twitter. Wedi'i ferwi i ddarnau llai, gellir ei ddisgrifio gyda'r amodau canlynol.

Mae'n gofyn i chi:

• Cadwch y drwydded a'r hysbysiad hawlfraint sydd wedi'u cynnwys yn ffeiliau CSS a JavaScript Bootstrap pan fyddwch chi'n eu defnyddio yn eich gweithiau

Mae'n caniatáu i chi:

• Dadlwythwch a defnyddiwch Bootstrap yn rhydd, yn gyfan gwbl neu'n rhannol, at ddibenion personol, preifat, mewnol cwmni neu fasnachol
• Defnyddiwch Bootstrap mewn pecynnau neu ddosbarthiadau rydych chi'n eu creu
• Addasu'r cod ffynhonnell
• Caniatáu is-drwydded i addasu a dosbarthu Bootstrap i drydydd partïon nad ydynt wedi'u cynnwys yn y drwydded

Mae'n eich gwahardd i:

• Dal yr awduron a pherchnogion y drwydded yn atebol am iawndal gan fod Bootstrap yn cael ei ddarparu heb warant
• Dal crewyr neu ddeiliaid hawlfraint Bootstrap yn atebol
• Ailddosbarthu unrhyw ddarn o Bootstrap heb ei briodoli'n briodol
• Defnyddiwch unrhyw farciau sy'n eiddo i Twitter mewn unrhyw ffordd a allai nodi neu awgrymu bod Twitter yn cefnogi eich dosbarthiad
• Defnyddiwch unrhyw farciau sy'n eiddo i Twitter mewn unrhyw ffordd a allai nodi neu awgrymu eich bod wedi creu'r feddalwedd Twitter dan sylw

Nid yw'n gofyn i chi:

• Cynhwyswch ffynhonnell Bootstrap ei hun, neu unrhyw addasiadau y gallech fod wedi'u gwneud iddi, mewn unrhyw ailddosbarthiad y gallwch ei gydosod sy'n ei gynnwys
• Cyflwyno'r newidiadau a wnewch i Bootstrap yn ôl i'r prosiect Bootstrap (er bod adborth o'r fath yn cael ei annog)

Mae trwydded lawn Bootstrap wedi'i lleoli yn ystorfa'r prosiect am ragor o wybodaeth.

Cyfieithiadau

Mae aelodau'r gymuned wedi cyfieithu dogfennaeth Bootstrap i wahanol ieithoedd. Nid oes unrhyw un yn cael ei gefnogi'n swyddogol ac efallai na fyddant bob amser yn gyfredol.

• Bootstrap 中文文档 (Tsieinëeg)
• Bootstrap 3 中文手冊 (Tsieinëeg (Traddodiadol))
• Bootstrap yn Dansk (Daneg)
• Bootstrap en Français (Ffrangeg)
• Bootstrap auf Deutsch (Almaeneg)
• Bootstrap yn Eidaleg (Eidaleg)
• Bootstrap 한국어 (Corea)
• Bootstrap em Português do Brasil (Portiwgaleg Brasil)
• Bootstrap по-русски (Rwsieg)
• Bootstrap en Español (Sbaeneg)
• Türkçe Bootstrap (Twrceg)
• Bootstrap українською (Wcreineg)
• Bootstrap bằng tiếng Việt (Fietnameg)

Nid ydym yn helpu i drefnu na chynnal cyfieithiadau, rydym yn cysylltu â nhw.

Wedi gorffen cyfieithiad newydd neu well? Agorwch gais tynnu i'w ychwanegu at ein rhestr.