Source

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.

Fillim i shpejte

Po kërkoni të shtoni shpejt Bootstrap në projektin tuaj? Përdorni jsDelivr, të ofruar falas nga njerëzit në jsDelivr. 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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ë jQuery , Popper.js dhe shtojcat tona JavaScript. Vendosni <script>s në vijim afër fundit të faqeve tuaja, pikërisht përpara etiketës mbyllëse </body>, për t'i aktivizuar ato. jQuery duhet të vijë së pari, pastaj Popper.js dhe më pas shtojcat tona JavaScript.

Ne përdorim ndërtimin e hollë të jQuery , por versioni i plotë është gjithashtu i mbështetur.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Jeni kurioz se cilët komponentë kërkojnë në mënyrë eksplicite jQuery, JS-në tonë dhe Popper.js? 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.js )
  • 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
  • Këshilla veglash dhe popover për shfaqje dhe pozicionim (kërkon gjithashtu Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Kjo është gjithçka që ju nevojitet për kërkesat e përgjithshme të faqes. Vizitoni dokumentet 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ë cilat të gjitha 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, shrink-to-fit=no">

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 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ër-shfletuesve, ne përdorim Reboot për të korrigjuar mospërputhjet midis shfletuesve dhe pajisjeve, ndërkohë që 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.

  • Ndiqni @getbootstrap në Twitter .
  • Lexoni dhe abonohuni në Blogun Zyrtar të Bootstrap .
  • Bisedoni me shokët e Bootstrappers në IRC. Në irc.freenode.netserver, në ##bootstrapkanal.
  • Ndihma për zbatimin mund të gjendet në Stack Overflow (etiketuar bootstrap-4).
  • 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.