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, 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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 dhe shtojcat tona JavaScript. Ne përdorim ndërtimin e hollë të jQuery , por versioni i plotë është gjithashtu i mbështetur.

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. jQuery duhet të vijë së pari, pastaj Popper dhe më pas shtojcat tona JavaScript.

Pako

Përfshi çdo shtojcë Bootstrap JavaScript 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 popover-et, por jo jQuery . Përfshini fillimisht jQuery, pastaj një paketë JavaScript Bootstrap. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponentët

Jeni kurioz se cilët komponentë kërkojnë në mënyrë eksplicite jQuery, JavaScript-in tonë dhe Popper? Klikoni lidhjen e shfaqjes së komponentëve më poshtë. Nëse nuk jeni të sigurt për strukturën e 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
Scrollspy për sjelljen e lëvizjes dhe përditësimet e navigimit
Këshilla veglash dhe popover për shfaqje dhe pozicionim (kërkon gjithashtu Popper )

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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 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ë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.

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

CSP-të dhe SVG-të e integruara

Disa komponentë të Bootstrap përfshijnë SVG-të e integruara në CSS-në tonë për të stiluar komponentët në mënyrë të qëndrueshme dhe të lehtë nëpër shfletues dhe pajisje. Për organizatat me konfigurime më strikte të CSP -së , ne kemi dokumentuar të gjitha rastet e SVG-ve tona të integruara (të cilat të gjitha aplikohen nëpërmjet background-image) në mënyrë që të mund të rishikoni më në detaje opsionet tuaja.

Butoni i mbylljes (përdoret në sinjalizime dhe modale)
Kutitë e kontrollit të personalizuara dhe butonat e radios
Çelësat e formës
Ikonat e vërtetimit të formularit
Menutë e përzgjedhura me porosi
Kontrollet e karuselit
Butonat e ndërrimit të shiritit të navigimit

Bazuar në bisedën në komunitet , disa opsione për adresimin e kësaj në bazën tuaj të kodeve përfshijnë zëvendësimin e URL-ve me asete të strehuara në nivel lokal, heqjen e imazheve dhe përdorimin e imazheve në linjë (nuk është e mundur në të gjithë komponentët) dhe modifikimin e CSP-së tuaj. Rekomandimi ynë është që të rishikoni me kujdes politikat tuaja të sigurisë dhe të vendosni për rrugën më të mirë përpara, nëse është e nevojshme.