Shkarko

Bootstrap (aktualisht v3.4.1) ka disa mënyra të thjeshta për të filluar shpejt, secila prej tyre tërheqëse për një nivel të ndryshëm aftësie dhe raste përdorimi. Lexoni për të parë se çfarë i përshtatet nevojave tuaja të veçanta.

jsDelivr

Njerëzit në jsDelivr ofrojnë me mirësjellje mbështetje CDN për CSS dhe JavaScript të Bootstrap. Thjesht përdorni këto lidhje jsDelivr .

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

Instaloni me Bower

Ju gjithashtu mund të instaloni dhe menaxhoni Less, CSS, JavaScript dhe fontet e Bootstrap duke përdorur Bower :

bower install bootstrap

Instaloni me npm

Ju gjithashtu mund të instaloni Bootstrap duke përdorur npm :

npm install bootstrap@3

require('bootstrap')do të ngarkojë të gjitha shtojcat jQuery të Bootstrap në objektin jQuery. Moduli bootstrapnë vetvete nuk eksporton asgjë. Ju mund t'i ngarkoni manualisht shtojcat jQuery të Bootstrap individualisht duke ngarkuar /js/*.jsskedarët nën drejtorinë e nivelit të lartë të paketës.

Bootstrap package.jsonpërmban disa meta të dhëna shtesë nën çelësat e mëposhtëm:

• less- shtegu drejt skedarit kryesor më pak burim të Bootstrap
• style- shtegu drejt CSS-së së paminifikuar të Bootstrap që është parapërpiluar duke përdorur cilësimet e paracaktuara (pa personalizim)

Instalo me Composer

Ju gjithashtu mund të instaloni dhe menaxhoni Bootstrap's Less, CSS, JavaScript dhe fontet duke përdorur Composer :

composer require twbs/bootstrap

Kërkohet parashtesa automatike për Less/Sass

Bootstrap përdor Autoprefixer për t'u marrë me prefikset e shitësve CSS . Nëse po përpiloni Bootstrap nga burimi i tij Less/Sass dhe nuk përdorni skedarin tonë Grunt, do t'ju duhet ta integroni vetë Autoprefixer në procesin e ndërtimit. Nëse jeni duke përdorur Bootstrap të parapërpiluar ose duke përdorur skedarin tonë Grunt, nuk keni nevojë të shqetësoheni për këtë sepse Autoprefixer është tashmë i integruar në skedarin tonë Grunt.

Çfarë përfshihet

Bootstrap mund të shkarkohet në dy forma, brenda të cilave do të gjeni drejtoritë dhe skedarët e mëposhtëm, duke grupuar logjikisht burime të përbashkëta dhe duke ofruar variacione të përpiluara dhe të minuara.

Bootstrap i parapërpiluar

Pasi të keni shkarkuar, hiqni dosjen e ngjeshur për të parë strukturën e Bootstrap (të përpiluar). Do të shihni diçka si kjo:

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

Kjo është forma më themelore e Bootstrap: skedarë të parakompiluar për përdorim të shpejtë të lëshimit në pothuajse çdo projekt në internet. Ne ofrojmë CSS dhe JS të përpiluara ( bootstrap.*), si dhe CSS dhe JS të përpiluara dhe të minuara ( bootstrap.min.*). Hartat e burimit CSS ( bootstrap.*.map) janë të disponueshme për përdorim me vegla të caktuara të zhvilluesve të shfletuesve. Përfshihen fontet nga Glyphicons, siç është edhe tema opsionale e Bootstrap.

Kodi burimor i bootstrap

Shkarkimi i kodit burimor të Bootstrap përfshin CSS, JavaScript dhe asetet e shkronjave të parapërpiluara, së bashku me burimin Less, JavaScript dhe dokumentacionin. Më konkretisht, ai përfshin sa vijon dhe më shumë:

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

, less/, js/dhe fonts/janë kodi burimor për fontet tona CSS, JS dhe ikonave (përkatësisht). Dosja dist/përfshin gjithçka të listuar në seksionin e shkarkimit të parapërpiluar më sipër. Dosja docs/përfshin kodin burimor për dokumentacionin tonë dhe examples/përdorimin e Bootstrap. Përtej kësaj, çdo skedar tjetër i përfshirë ofron mbështetje për paketat, informacionin e licencës dhe zhvillimin.

Përpilimi i CSS dhe JavaScript

Bootstrap përdor Grunt për sistemin e tij të ndërtimit, me metoda të përshtatshme për të punuar me kornizën. Kjo është mënyra se si ne përpilojmë kodin tonë, kryejmë teste dhe më shumë.

Instalimi i Grunt

Për të instaluar Grunt, fillimisht duhet të shkarkoni dhe instaloni node.js (i cili përfshin npm). npm qëndron për modulet e paketuara me nyje dhe është një mënyrë për të menaxhuar varësitë e zhvillimit përmes node.js.

1. Instaloni grunt-cliglobalisht me npm install -g grunt-cli.
2. Navigoni te /bootstrap/direktoria rrënjësore, më pas ekzekutoni npm install. npm do të shikojë package.jsonskedarin dhe do të instalojë automatikisht varësitë e nevojshme lokale të listuara atje.

Kur të përfundoni, do të jeni në gjendje të ekzekutoni komandat e ndryshme Grunt të ofruara nga linja e komandës.

Komandat e disponueshme Grunt

grunt dist(Thjesht përpiloni CSS dhe JavaScript)

Rigjeneron /dist/drejtorinë me skedarë CSS dhe JavaScript të përpiluara dhe të minuara. Si përdorues i Bootstrap, kjo është zakonisht komanda që dëshironi.

grunt watch(Shiko)

Shikon skedarët burim Less dhe i ripërpilon ato automatikisht në CSS sa herë që ruani një ndryshim.

grunt test(Kryej testet)

Drejton JSHint dhe ekzekuton testet QUnit në shfletues të vërtetë falë Karma .

grunt docs(Ndërtoni dhe testoni asetet e dokumenteve)

Ndërton dhe teston CSS, JavaScript dhe asete të tjera që përdoren gjatë ekzekutimit të dokumentacionit në nivel lokal nëpërmjet bundle exec jekyll serve.

grunt(Ndërtoni absolutisht gjithçka dhe bëni teste)

Përpilon dhe minimizon CSS dhe JavaScript, ndërton uebsajtin e dokumentacionit, ekzekuton vërtetuesin HTML5 kundrejt dokumenteve, rigjeneron asetet e Personalizuesit dhe më shumë. Kërkon Jekyll . Zakonisht është e nevojshme vetëm nëse jeni duke hakuar në vetë Bootstrap.

Zgjidhja e problemeve

Nëse hasni probleme me instalimin e varësive ose ekzekutimin e komandave Grunt, së pari fshini /node_modules/direktorinë e krijuar nga npm. Pastaj, riprodhoni npm install.

Shablloni bazë

Filloni me këtë shabllon bazë HTML ose modifikoni këta shembuj . Shpresojmë që ju do të personalizoni shabllonet dhe shembujt tanë, duke i përshtatur ato për t'iu përshtatur nevojave tuaja.

Kopjoni HTML-në më poshtë për të filluar punën me një dokument minimal Bootstrap.

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

Shembuj

Ndërtoni në shabllonin bazë të mësipërm me komponentët e shumtë të Bootstrap. Ne ju inkurajojmë të personalizoni dhe përshtatni Bootstrap për t'iu përshtatur nevojave të projektit tuaj individual.

Merrni kodin burimor për çdo shembull më poshtë duke shkarkuar depon e Bootstrap . Shembujt mund të gjenden në docs/examples/drejtori.

Duke përdorur kornizën

Modeli fillestar

Asgjë përveç bazave: përpiluar CSS dhe JavaScript së bashku me një kontejner.

Tema e bootstrap

Ngarko temën opsionale të Bootstrap për një përvojë të përmirësuar vizualisht.

Rrjetet

Shembuj të shumtë të paraqitjeve të rrjetit me të katër nivelet, foletë dhe më shumë.

Jumbotron

Ndërtoni rreth jumbotronit me një shirit navigimi dhe disa kolona bazë të rrjetit.

Jumbotron i ngushtë

Ndërtoni një faqe më të personalizuar duke ngushtuar kontejnerin e paracaktuar dhe jumbotron.

Shiritat e navigimit në veprim

Navbar

Modeli super bazë që përfshin shiritin e navigimit së bashku me disa përmbajtje shtesë.

Shiriti i navigimit të lartë statik

Shablloni super bazë me një shirit navigimi të lartë statik së bashku me disa përmbajtje shtesë.

Shiriti navigues i fiksuar

Shablloni super bazë me një shirit navigimi të sipërm fiks së bashku me disa përmbajtje shtesë.

Komponentët me porosi

Mbulesë

Një shabllon me një faqe për ndërtimin e faqeve kryesore të thjeshta dhe të bukura.

Karuseli

Personalizo shiritin e navigimit dhe karuselin, më pas shto disa komponentë të rinj.

Blog

Paraqitje e thjeshtë e blogut me dy kolona me navigim, kokë dhe lloj të personalizuar.

Paneli

Struktura bazë për një panel administratori me shirit anësor dhe navigues fiks.

Faqja e hyrjes

Paraqitja dhe dizajni i personalizuar i formularit për një shenjë të thjeshtë në formë.

Nav i justifikuar

Krijo një shirit navigimi të personalizuar me lidhje të justifikuara. Kokat lart! Jo shumë miqësore me Safari.

Fotot ngjitës

Bashkangjitni një fund të faqes në fund të portit të pamjes kur përmbajtja është më e shkurtër se ajo.

Fotot ngjitës me shiritin navigues

Bashkangjisni një fund të faqes në fund të portës së pamjes me një shirit navigimi të fiksuar në krye.

Eksperimentet

Bootstrap që nuk përgjigjet

Çaktivizoni me lehtësi reagimin e Bootstrap sipas dokumenteve tona .

Jashtë kanavacë

Ndërtoni një menu navigimi jashtë kanavacës që mund të ndërrohet për t'u përdorur me Bootstrap.

Mjetet

Bootlint

Bootlint është mjeti zyrtar i linterit të Bootstrap HTML. Ai kontrollon automatikisht për disa gabime të zakonshme HTML në faqet e internetit që përdorin Bootstrap në një mënyrë mjaft "vanilje". Komponentët/miniaplikacionet e Vanilla Bootstrap kërkojnë që pjesët e tyre të DOM të përputhen me struktura të caktuara. Bootlint kontrollon që shembujt e komponentëve të Bootstrap kanë HTML të strukturuar saktë. Merrni parasysh të shtoni Bootlint në zinxhirin e mjeteve të zhvillimit të uebit tuaj Bootstrap, në mënyrë që asnjë nga gabimet e zakonshme të mos ngadalësojë zhvillimin e projektit tuaj.

Komuniteti

Qëndroni të përditësuar mbi zhvillimin e Bootstrap dhe drejtojuni komunitetit me këto burime të dobishme.

• Lexoni dhe abonohuni në Blogun Zyrtar të Bootstrap .
• Bisedoni me shokët e Bootstrapper duke përdorur IRC në irc.freenode.netserver, në kanalin ##bootstrap .
• Për ndihmë për përdorimin e Bootstrap, pyesni në StackOverflow duke përdorur etiketëntwitter-bootstrap-3 .
• Zhvilluesit duhet të përdorin fjalën kyçe bootstrapnë paketat që modifikojnë ose shtojnë funksionalitetin e Bootstrap kur shpërndahen përmes npm ose mekanizmave të ngjashëm të shpërndarjes për zbulueshmëri maksimale.
• Gjeni shembuj frymëzues të njerëzve që ndërtojnë me Bootstrap në Bootstrap Expo .

Ju gjithashtu mund të ndiqni @getbootstrap në Twitter për thashethemet më të fundit dhe videot muzikore të mrekullueshme.

Çaktivizimi i reagimit

Bootstrap përshtat automatikisht faqet tuaja për madhësi të ndryshme ekrani. Ja se si ta çaktivizoni këtë veçori në mënyrë që faqja juaj të funksionojë si ky shembull që nuk përgjigjet .

Hapat për të çaktivizuar reagimin e faqes

1. Hiqni portën e shikimit të <meta>përmendur në dokumentet CSS
2. Shfuqizoni widthnë .containerpër çdo nivel të rrjetit me një gjerësi të vetme, për shembull width: 970px !important;Sigurohuni që kjo të vijë pas CSS-së së parazgjedhur të Bootstrap. Mund të shmangni opsionalisht !importantpyetjet me media ose disa përzgjedhës-fu.
3. Nëse përdorni shirita navigimi, hiqni të gjitha sjelljet e kolapsit dhe zgjerimit të shiritit të navigimit.
4. Për paraqitjet e rrjetit, përdorni .col-xs-*klasa përveç ose në vend të atyre të mesme/të mëdha. Mos u shqetësoni, rrjeti shumë i vogël i pajisjes përshkallëzohet në të gjitha rezolucionet.

Do t'ju duhet ende Respond.js për IE8 (pasi pyetjet tona për media janë ende atje dhe duhet të përpunohen). Kjo çaktivizon aspektet e "faqes celulare" të Bootstrap.

Shablloni Bootstrap me reagim të çaktivizuar

Kemi zbatuar këto hapa në një shembull. Lexoni kodin e tij burimor për të parë ndryshimet specifike të zbatuara.

Shikoni shembullin që nuk përgjigjet

Mbështetja e shfletuesit dhe pajisjes

Bootstrap është ndërtuar për të funksionuar më mirë në shfletuesit më të fundit të desktopit dhe celularit, që do të thotë se shfletuesit më të vjetër mund të shfaqin interpretime të stileve të ndryshme, megjithëse plotësisht funksionale, të disa komponentëve.

Shfletuesit e mbështetur

Në mënyrë të veçantë, ne mbështesim versionet më të fundit të shfletuesve dhe platformave të mëposhtme.

Shfletuesit alternativë që përdorin versionin më të fundit të WebKit, Blink ose Gecko, qoftë drejtpërdrejt ose nëpërmjet API-së së pamjes së uebit të platformës, nuk mbështeten në mënyrë eksplicite. Sidoqoftë, Bootstrap duhet (në shumicën e rasteve) të shfaqë dhe të funksionojë saktë edhe në këta shfletues. Informacione më specifike mbështetëse jepen më poshtë.

Pajisje celulare

Në përgjithësi, Bootstrap mbështet versionet më të fundit të shfletuesve të paracaktuar të secilës platformë kryesore. Vini re se shfletuesit proxy (si Opera Mini, modaliteti Turbo i Opera Mobile, UC Browser Mini, Amazon Silk) nuk mbështeten.

Shfletuesit e desktopit

Në mënyrë të ngjashme, versionet më të fundit të shumicës së shfletuesve të desktopit mbështeten.

Në Windows, ne mbështesim Internet Explorer 8-11 .

Për Firefox-in, përveç versionit më të fundit normal të qëndrueshëm, ne mbështesim gjithashtu versionin më të fundit të lëshimit të mbështetjes së zgjeruar (ESR) të Firefox-it.

Jozyrtarisht, Bootstrap duhet të duket dhe të sillet mjaft mirë në Chromium dhe Chrome për Linux, Firefox për Linux dhe Internet Explorer 7, si dhe Microsoft Edge, megjithëse ato nuk mbështeten zyrtarisht.

Për një listë të disa gabimeve të shfletuesit me të cilat Bootstrap duhet të përballet, shihni murin tonë të gabimeve të shfletuesit .

Internet Explorer 8 dhe 9

Internet Explorer 8 dhe 9 mbështeten gjithashtu, megjithatë, kini parasysh se disa veti CSS3 dhe elementë HTML5 nuk mbështeten plotësisht nga këta shfletues. Përveç kësaj, Internet Explorer 8 kërkon përdorimin e Respond.js për të mundësuar mbështetjen e pyetjeve mediatike.

Vizitoni Mund të përdor... për detaje mbi mbështetjen e shfletuesit të veçorive CSS3 dhe HTML5.

Internet Explorer 8 dhe Respond.js

Kujdes nga paralajmërimet e mëposhtme kur përdorni Respond.js në mjediset tuaja të zhvillimit dhe prodhimit për Internet Explorer 8.

Respond.js dhe CSS ndër-domainësh

Përdorimi i Respond.js me CSS të strehuar në një (nën)domen tjetër (për shembull, në një CDN) kërkon disa konfigurime shtesë. Shikoni dokumentet Respond.js për detaje.

Përgjigju.js dhefile://

Për shkak të rregullave të sigurisë së shfletuesit, Respond.js nuk funksionon me faqet e shikuara nëpërmjet file://protokollit (si kur hapni një skedar lokal HTML). Për të testuar veçori të përgjegjshme në IE8, shikoni faqet tuaja mbi HTTP(S). Shikoni dokumentet Respond.js për detaje.

Përgjigju.js dhe@import

Respond.js nuk funksionon me CSS që është referuar nëpërmjet @import. Në veçanti, disa konfigurime Drupal dihet se përdorin @import. Shikoni dokumentet Respond.js për detaje.

Internet Explorer 8 dhe madhësia e kutisë

IE8 nuk mbështet plotësisht box-sizing: border-box;kur kombinohet me min-width, max-width, min-heightose max-height. Për këtë arsye, që nga v3.0.1, ne nuk përdorim më max-widthnë .containers.

Internet Explorer 8 dhe @font-face

IE8 ka disa probleme @font-facekur kombinohet me :before. Bootstrap përdor atë kombinim me Glyphicons e tij. Nëse një faqe ruhet në memorie të fshehtë dhe ngarkohet pa mausin mbi dritare (dmth. shtypni butonin e rifreskimit ose ngarkoni diçka në një iframe), atëherë faqja jepet përpara se të ngarkohet fonti. Duke qëndruar pezull mbi faqe (trup) do të shfaqen disa nga ikonat dhe duke qëndruar pezull mbi ikonat e mbetura do të shfaqen edhe ato. Shih numrin #13863 për detaje.

Mënyrat e përputhshmërisë IE

Bootstrap nuk mbështetet në mënyrat e vjetra të pajtueshmërisë së Internet Explorer. Për t'u siguruar që po përdorni modalitetin më të fundit të paraqitjes për IE, merrni parasysh përfshirjen e <meta>etiketës së duhur në faqet tuaja:

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

Konfirmoni modalitetin e dokumentit duke hapur mjetet e korrigjimit: shtypni F12dhe kontrolloni "Modaliteti i dokumentit".

Ky etiketë përfshihet në të gjithë dokumentacionin dhe shembujt e Bootstrap për të siguruar paraqitjen më të mirë të mundshme në çdo version të mbështetur të Internet Explorer.

Shikoni këtë pyetje StackOverflow për më shumë informacion.

Internet Explorer 10 në Windows 8 dhe Windows Phone 8

Internet Explorer 10 nuk e dallon gjerësinë e pajisjes nga gjerësia e portit të pamjes , dhe për këtë arsye nuk i zbaton siç duhet kërkesat e medias në CSS të Bootstrap. Normalisht, thjesht do të shtonit një fragment të shpejtë të CSS për të rregulluar këtë:

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

Megjithatë, kjo nuk funksionon për pajisjet që përdorin versione të Windows Phone 8 më të vjetër se Përditësimi 3 (i njohur ndryshe si GDR3) , pasi bën që pajisjet e tilla të shfaqin një pamje kryesisht të desktopit në vend të pamjes së ngushtë të "telefonit". Për të adresuar këtë, do t'ju duhet të përfshini CSS-në dhe JavaScript-in e mëposhtëm për të zgjidhur problemin .

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

Për më shumë informacion dhe udhëzime përdorimi, lexoni Windows Phone 8 dhe Device-Width .

Si fillim, ne e përfshijmë këtë në të gjithë dokumentacionin dhe shembujt e Bootstrap si një demonstrim.

Rrumbullakimi i përqindjes Safari

Motori i interpretimit të versioneve të Safari para v7.1 për OS X dhe Safari për iOS v8.0 kishte disa probleme me numrin e numrave dhjetorë të përdorur në .col-*-1klasat tona të rrjetit. Pra, nëse do të kishit 12 kolona individuale të rrjetit, do të vini re se ato ishin të shkurtra në krahasim me rreshtat e tjerë të kolonave. Përveç përmirësimit të Safari/iOS, ju keni disa opsione për zgjidhje:

• Shtoni .pull-rightnë kolonën tuaj të fundit të rrjetit për të marrë shtrirjen në të djathtë
• Rregulloni përqindjet tuaja me dorë për të marrë rrumbullakimin e përsosur për Safari (më i vështirë se opsioni i parë)

Modalet, shiritat navigues dhe tastierat virtuale

Mbushje dhe lëvizje

Mbështetja për overflow: hiddenelementin <body>është mjaft e kufizuar në iOS dhe Android. Për këtë qëllim, kur kaloni pjesën e sipërme ose të poshtme të një modali në cilindo nga shfletuesit e këtyre pajisjeve, <body>përmbajtja do të fillojë të lëvizë. Shiko defektin e Chrome #175502 (rregulluar në Chrome v40) dhe defektin e WebKit #153852 .

Fushat e tekstit iOS dhe lëvizja

Që nga iOS 9.3, ndërsa një modal është i hapur, nëse prekja fillestare e një gjesti rrotullues është brenda kufirit të një teksti <input>ose një <textarea>, <body>përmbajtja poshtë modalit do të lëvizet në vend të vetë modalit. Shiko defektin e WebKit #153856 .

Tastierë virtuale

Gjithashtu, vini re se nëse përdorni një shirit navigimi fiks ose përdorni hyrje brenda një modali, iOS ka një defekt në paraqitje që nuk përditëson pozicionin e elementeve fikse kur aktivizohet tastiera virtuale. Disa zgjidhje për këtë përfshijnë transformimin e elementëve tuaj position: absoluteose thirrjen e një kohëmatësi në fokus për të provuar të korrigjoni pozicionimin me dorë. Kjo nuk trajtohet nga Bootstrap, kështu që ju takon juve të vendosni se cila zgjidhje është më e mira për aplikacionin tuaj.

Dropdowns Navbar

Elementi .dropdown-backdropnuk përdoret në iOS në navigacion për shkak të kompleksitetit të indeksimit z. Kështu, për të mbyllur skedarët me zbritje në shiritat e navigimit, duhet të klikoni drejtpërdrejt elementin rënës (ose çdo element tjetër që do të aktivizojë një ngjarje klikimi në iOS ).

Zmadhimi i shfletuesit

Zmadhimi i faqeve paraqet në mënyrë të pashmangshme paraqitjen e artefakteve në disa komponentë, si në Bootstrap ashtu edhe në pjesën tjetër të internetit. Në varësi të problemit, ne mund të jemi në gjendje ta rregullojmë atë (së pari kërkoni dhe më pas hapni një problem nëse është e nevojshme). Sidoqoftë, ne priremi t'i injorojmë këto pasi ato shpesh nuk kanë asnjë zgjidhje të drejtpërdrejtë përveç zgjidhjeve të paqarta.

Ngjitës :hover/ :focusnë celular

Edhe pse lëvizja e vërtetë pezull nuk është e mundur në shumicën e ekraneve me prekje, shumica e shfletuesve celularë imitojnë mbështetjen e pezullimit dhe e bëjnë :hover"ngjitëse". Me fjalë të tjera, :hoverstilet fillojnë të aplikohen pasi prekin një element dhe ndalojnë së aplikuari vetëm pasi përdoruesi prek një element tjetër. Kjo mund të shkaktojë që gjendjet e Bootstrap të :hover"ngecën" në mënyrë të padëshirueshme në shfletues të tillë. Disa shfletues celularë gjithashtu bëjnë të :focusngjashëm ngjitës. Aktualisht nuk ka asnjë zgjidhje të thjeshtë për këto çështje përveç heqjes tërësisht të stileve të tilla.

Shtypje

Edhe në disa shfletues modernë, printimi mund të jetë i çuditshëm.

Në veçanti, që nga Chrome v32 dhe pavarësisht nga cilësimet e marzhit, Chrome përdor një gjerësi të portës së pamjes dukshëm më të ngushtë se madhësia fizike e letrës kur zgjidh pyetjet e medias gjatë printimit të një faqeje interneti. Kjo mund të rezultojë në aktivizimin e papritur të rrjetës shumë të vogël të Bootstrap gjatë printimit. Shih çështjen #12078 dhe defektin e Chrome #273306 për disa detaje. Zgjidhjet e sugjeruara:

• Përqafoni rrjetin shumë të vogël dhe sigurohuni që faqja juaj të duket e pranueshme nën të.
• Personalizoni vlerat e @screen-*variablave më pak në mënyrë që letra e printerit tuaj të konsiderohet më e madhe se e vogël.
• Shtoni pyetje të personalizuara të medias për të ndryshuar pikat e ndarjes së madhësisë së rrjetit vetëm për mediat e shkruara.

Gjithashtu, që nga Safari v8.0, s-të me gjerësi fikse .containermund të bëjnë që Safari të përdorë një madhësi jashtëzakonisht të vogël fonti gjatë printimit. Shikoni #14868 dhe defektin e WebKit #138192 për më shumë detaje. Një zgjidhje e mundshme për këtë është shtimi i CSS-së së mëposhtme:

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

Shfletuesi i aksioneve Android

Nga kutia, Android 4.1 (dhe madje edhe disa versione më të reja me sa duket) dërgohen me aplikacionin Browser si shfletuesin e parazgjedhur të uebit (në krahasim me Chrome). Fatkeqësisht, aplikacioni i Shfletuesit ka shumë gabime dhe mospërputhje me CSS në përgjithësi.

Zgjidhni menutë

Në <select>elemente, shfletuesi i aksioneve Android nuk do të shfaqë kontrollet anësore nëse ka një border-radiusdhe/ose borderaplikuar. (Shih këtë pyetje të StackOverflow për detaje.) Përdorni copëzën e kodit më poshtë për të hequr CSS-në ofenduese dhe për ta paraqitur atë <select>si një element të pa stiluar në shfletuesin e aksioneve Android. Nuhatja e agjentit të përdoruesit shmang ndërhyrjet me shfletuesit Chrome, Safari dhe 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>

Dëshironi të shihni një shembull? Shikoni këtë demonstrim të JS Bin.

Validuesit

Për të ofruar përvojën më të mirë të mundshme për shfletuesit e vjetër dhe me gabime, Bootstrap përdor hakimet e shfletuesit CSS në disa vende për të synuar CSS speciale për disa versione të shfletuesit në mënyrë që të zgjidhë gabimet në vetë shfletuesit. Këto hakime bëjnë që vërtetuesit e CSS të ankohen se janë të pavlefshëm. Në disa vende, ne përdorim gjithashtu veçori të fundit CSS që nuk janë ende plotësisht të standardizuara, por ato përdoren thjesht për përmirësim progresiv.

Këto paralajmërime vërtetimi nuk kanë rëndësi në praktikë pasi pjesa jo-hacky e CSS-së tonë vërtetohet plotësisht dhe pjesët hacky nuk ndërhyjnë në funksionimin e duhur të pjesës jo-hacky, prandaj ne i shpërfillim qëllimisht këto paralajmërime të veçanta.

Dokumentet tona HTML gjithashtu kanë disa paralajmërime të parëndësishme dhe të parëndësishme të vërtetimit të HTML për shkak të përfshirjes sonë të një zgjidhjeje për një gabim të caktuar të Firefox-it .

Mbështetja e palës së tretë

Ndonëse ne nuk mbështesim zyrtarisht asnjë shtesë ose shtesë të palës së tretë, ne ofrojmë disa këshilla të dobishme për të ndihmuar në shmangien e problemeve të mundshme në projektet tuaja.

Madhësia e kutisë

Disa softuer të palëve të treta, duke përfshirë Google Maps dhe Google Custom Search Engine, bien ndesh me Bootstrap për shkak të * { box-sizing: border-box; }, një rregull që e bën atë paddingtë mos ndikojë në gjerësinë përfundimtare të llogaritur të një elementi. Mësoni më shumë rreth modelit të kutisë dhe madhësisë në CSS Tricks .

Në varësi të kontekstit, mund të anashkaloni sipas nevojës (Opsioni 1) ose të rivendosni madhësinë e kutisë për rajone të tëra (Opsioni 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();
}

Aksesueshmëria

Bootstrap ndjek standardet e zakonshme të uebit dhe - me përpjekje minimale shtesë - mund të përdoret për të krijuar sajte që janë të aksesueshme për ata që përdorin AT .

Kapërceni navigimin

Nëse navigimi juaj përmban shumë lidhje dhe vjen përpara përmbajtjes kryesore në DOM, shtoni një Skip to main contentlidhje përpara navigimit (për një shpjegim të thjeshtë, shihni këtë artikull të Projektit A11Y mbi kapërcimin e lidhjeve të navigimit ). Përdorimi i .sr-onlyklasës do të fshehë vizualisht lidhjen e kapërcimit dhe .sr-only-focusableklasa do të sigurojë që lidhja të bëhet e dukshme pasi të fokusohet (për përdoruesit e tastierës me shikim).

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

Titujt e mbivendosur

Kur futni titujt ( <h1>- <h6>), titulli kryesor i dokumentit tuaj duhet të jetë një <h1>. Titujt e mëpasshëm duhet të përdorin logjikisht <h2>- të <h6>tillë që lexuesit e ekranit të mund të ndërtojnë një tabelë të përmbajtjes për faqet tuaja.

Mësoni më shumë në HTML CodeSniffer dhe AccessAbility të Penn State .

Kontrasti i ngjyrave

Aktualisht, disa nga kombinimet e parazgjedhura të ngjyrave të disponueshme në Bootstrap (siç janë klasat e ndryshme të butonave të stilizuara , disa nga ngjyrat e theksuara të kodit të përdorura për blloqet e kodit bazë , klasa ndihmëse e .bg-primary sfondit kontekstual dhe ngjyra e parazgjedhur e lidhjes kur përdoret në një sfond të bardhë) kanë një raport të ulët kontrasti (nën raportin e rekomanduar prej 4,5:1 ). Kjo mund të shkaktojë probleme për përdoruesit me shikim të ulët ose që janë të verbër nga ngjyra. Këto ngjyra të paracaktuara mund të kenë nevojë të modifikohen për të rritur kontrastin dhe lexueshmërinë e tyre.

Burime shtesë

• Faqerojtësi "HTML Codesniffer" për identifikimin e problemeve të aksesueshmërisë
• Shtesa e Veglave të Zhvilluesve të Qasshmërisë së Chrome
• Analizues i kontrastit të ngjyrave
• Projekti A11Y
• Dokumentacioni i aksesueshmërisë MDN

Pyetjet e shpeshta të licencës

Bootstrap lëshohet nën licencën MIT dhe është e drejtë e autorit 2019 Twitter. E zbërthyer në copa më të vogla, mund të përshkruhet me kushtet e mëposhtme.

Kërkon nga ju që:

• Mbajeni licencën dhe njoftimin për të drejtën e autorit të përfshirë në skedarët CSS dhe JavaScript të Bootstrap kur i përdorni në veprat tuaja

Kjo ju lejon të:

• Shkarkoni dhe përdorni lirisht Bootstrap, tërësisht ose pjesërisht, për qëllime personale, private, të brendshme të kompanisë ose komerciale
• Përdorni Bootstrap në paketat ose shpërndarjet që krijoni
• Ndryshoni kodin burimor
• Jepni një nënlicencë për të modifikuar dhe shpërndarë Bootstrap palëve të treta që nuk përfshihen në licencë

Ju ndalon të:

• Mbani përgjegjës autorët dhe pronarët e licencës për dëmet pasi Bootstrap ofrohet pa garanci
• Mbani përgjegjës krijuesit ose mbajtësit e të drejtave të autorit të Bootstrap
• Rishpërndani çdo pjesë të Bootstrap pa atribuimin e duhur
• Përdorni çdo shenjë në pronësi të Twitter në çfarëdo mënyre që mund të thotë ose të nënkuptojë se Twitter miraton shpërndarjen tuaj
• Përdorni çdo shenjë në pronësi të Twitter në çfarëdo mënyre që mund të thotë ose të nënkuptojë se keni krijuar softuerin Twitter në fjalë

Nuk kërkon që ju të:

• Përfshini vetë burimin e Bootstrap, ose të çdo modifikimi që mund t'i keni bërë, në çdo rishpërndarje që mund të grumbulloni që e përfshin atë
• Paraqisni ndryshimet që bëni në Bootstrap përsëri në projektin Bootstrap (megjithëse një reagim i tillë inkurajohet)

Licenca e plotë e Bootstrap ndodhet në depon e projektit për më shumë informacion.

Përkthime

Anëtarët e komunitetit kanë përkthyer dokumentacionin e Bootstrap në gjuhë të ndryshme. Asnjë nuk mbështetet zyrtarisht dhe mund të mos jetë gjithmonë i përditësuar.

• Bootstrap 中文文档 (Kinez)
• Bootstrap në Dansk (Danisht)
• Bootstrap en Français (frëngjisht)
• Bootstrap auf Deutsch (Gjermanisht)
• Bootstrap në italisht (italisht)
• Bootstrap 한국어 (Koreanisht)
• Bootstrap em Português do Brasil (portugeze braziliane)
• Bootstrap по-русски (rusisht)
• Bootstrap en Español (Spanjisht)
• Türkçe Bootstrap (turqisht)
• Bootstrap українською (Ukrainisht)
• Bootstrap bằng tiếng Việt (Vietnameze)

Ne nuk ndihmojmë në organizimin ose pritjen e përkthimeve, ne thjesht lidhim me to.

Përfundoi një përkthim të ri apo më të mirë? Hapni një kërkesë tërheqjeje për ta shtuar në listën tonë.