Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
in English

Prezantimi

Filloni me Bootstrap, kuadri më i popullarizuar në botë për ndërtimin e sajteve të përgjegjshme, të para për celularët, me jsDelivr dhe një faqe fillestare shabllon.

Në këtë faqe

Fillim i shpejte

Po kërkoni të shtoni shpejt Bootstrap në projektin tuaj? Përdorni jsDelivr, një CDN falas me burim të hapur. Përdorni një menaxher paketash apo keni nevojë të shkarkoni skedarët burimor? Shkoni te faqja e shkarkimeve .

CSS

Kopjoni-ngjisni fletën e stilit <link>në tuaj <head>para të gjitha fletëve të tjera të stilit për të ngarkuar CSS-në tonë.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Shumë nga komponentët tanë kërkojnë përdorimin e JavaScript për të funksionuar. Në mënyrë të veçantë, ata kërkojnë shtojcat tona JavaScript dhe Popper . Vendosni një nga të mëposhtmet<script> afër fundit të faqeve tuaja, pikërisht përpara etiketës mbyllëse </body>, për t'i aktivizuar ato.

Pako

Përfshi çdo shtojcë Bootstrap JavaScript dhe varësi me një nga dy paketat tona. Të dyja bootstrap.bundle.jsdhe bootstrap.bundle.min.jspërfshijnë Popper për këshillat tona të veglave dhe popovers. Për më shumë informacion rreth asaj që përfshihet në Bootstrap, ju lutemi shihni seksionin tonë të përmbajtjes .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Të ndara

Nëse vendosni të shkoni me zgjidhjen e skripteve të veçanta, Popper duhet të vijë së pari (nëse jeni duke përdorur këshilla veglash ose popovers), dhe më pas shtojcat tona JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Modulet

Nëse përdorni <script type="module">, ju lutemi referojuni seksionit tonë të përdorimit të Bootstrap si modul .

Komponentët

Jeni kurioz se cilët komponentë kërkojnë në mënyrë të qartë JavaScript dhe Popper tonë? Klikoni lidhjen e shfaqjes së komponentëve më poshtë. Nëse nuk jeni aspak të sigurt për strukturën e përgjithshme të faqes, vazhdoni të lexoni për një model faqeje shembull.

Shfaq komponentët që kërkojnë JavaScript
  • Sinjalizime për shkarkim
  • Butonat për ndryshimin e gjendjeve dhe kutinë e zgjedhjes/funksionalitetin e radios
  • Carousel për të gjitha sjelljet, kontrollet dhe treguesit e rrëshqitjes
  • Palos për ndryshimin e dukshmërisë së përmbajtjes
  • Dropdowns për shfaqje dhe pozicionim (kërkon gjithashtu Popper )
  • Modalet për shfaqjen, pozicionimin dhe sjelljen e lëvizjes
  • Shiriti navigues për zgjerimin e shtojcës sonë Collapse për të zbatuar sjellje të përgjegjshme
  • Dolli për shfaqje dhe shkarkim
  • Këshilla veglash dhe popover për shfaqje dhe pozicionim (kërkon gjithashtu Popper )
  • Scrollspy për sjelljen e lëvizjes dhe përditësimet e navigimit

Modeli fillestar

Sigurohuni që faqet tuaja të jenë të konfiguruara me standardet më të fundit të dizajnit dhe zhvillimit. Kjo do të thotë të përdorni një doctype HTML5 dhe të përfshini një meta etiketë të portit të shikimit për sjelljet e duhura reaguese. Mblidhni të gjitha së bashku dhe faqet tuaja duhet të duken kështu:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Për hapat e mëtejshëm, vizitoni dokumentet e Layout ose shembujt tanë zyrtarë për të filluar shtrimin e përmbajtjes dhe komponentëve të faqes suaj.

Globale të rëndësishme

Bootstrap përdor një sërë stilesh dhe cilësimesh të rëndësishme globale për të cilat duhet të jeni të vetëdijshëm kur e përdorni, të gjitha këto janë pothuajse ekskluzivisht të orientuara drejt normalizimit të stileve të ndërlidhura të shfletuesve. Le të zhytemi.

Doctype HTML5

Bootstrap kërkon përdorimin e tipit HTML5. Pa të, do të shihni një stil jo të plotë, por përfshirja e tij nuk duhet të shkaktojë ndonjë lemzë të konsiderueshme.

<!doctype html>
<html lang="en">
  ...
</html>

Meta-etiketë e përgjegjshme

Bootstrap është zhvilluar fillimisht në celular , një strategji në të cilën ne fillimisht optimizojmë kodin për pajisjet celulare dhe më pas zgjerojmë komponentët sipas nevojës duke përdorur pyetjet e medias CSS. Për të siguruar paraqitjen e duhur dhe zmadhimin me prekje për të gjitha pajisjet, shtoni meta-etiketën reaguese të portit të pamjes në pajisjen tuaj <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Ju mund të shihni një shembull të kësaj në veprim në shabllonin fillestar .

Madhësia e kutisë

Për përmasa më të drejtpërdrejta në CSS, ne e kalojmë box-sizingvlerën globale nga content-boxnë border-box. Kjo siguron paddingqë të mos ndikojë në gjerësinë përfundimtare të llogaritur të një elementi, por mund të shkaktojë probleme me disa softuer të palëve të treta si Google Maps dhe Google Custom Search Engine.

Në rastet e rralla që duhet ta anashkaloni, përdorni diçka si më poshtë:

.selector-for-some-widget {
  box-sizing: content-box;
}

Me fragmentin e mësipërm, elementët e mbivendosur—përfshirë përmbajtjen e gjeneruar nëpërmjet ::beforedhe— ::afterdo të trashëgojnë të gjithë atë të specifikuar box-sizingpër këtë .selector-for-some-widget.

Mësoni më shumë rreth modelit të kutisë dhe madhësisë në CSS Tricks .

Rindizni

Për paraqitje të përmirësuar të ndërsferësve, ne përdorim Reboot për të korrigjuar mospërputhjet midis shfletuesve dhe pajisjeve, ndërsa ofrojmë rivendosje pak më të mendimit për elementët e zakonshëm HTML.

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 Bootstrappers në IRC. Në irc.libera.chatserver, në #bootstrapkanal.
  • Ndihma për zbatimin mund të gjendet në Stack Overflow (etiketuar bootstrap-5).
  • 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.

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