Sissejuhatus

Alustage Bootstrapiga, mis on maailma populaarseim raamistik tundlike, mobiilile orienteeritud saitide loomiseks koos jsDelivr ja malli avalehega.

Sellel lehel

Kiire algus

Kas soovite Bootstrapi kiiresti oma projekti lisada? Kasutage tasuta avatud lähtekoodiga CDN-i jsDelivr. Kas kasutate paketihaldurit või peate alla laadima lähtefailid? Minge allalaadimiste lehele .

CSS

Meie CSS-i laadimiseks kopeerige ja kleepige stiilitabel <link>oma sisse enne kõiki teisi laaditabeleid.<head>

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

JS

Paljud meie komponendid nõuavad toimimiseks JavaScripti. Täpsemalt, need nõuavad meie enda JavaScripti pluginaid ja Popperit . Nende lubamiseks asetage üks järgmistest lehtedest <script>oma lehtede lõppu, vahetult enne sulgevat märgendit.</body>

Kimp

Kaasake kõik Bootstrapi JavaScripti pistikprogrammid ja sõltuvused ühega meie kahest komplektist. Mõlemad bootstrap.bundle.jsja bootstrap.bundle.min.jssisaldavad Popperit meie tööriistanäpunäidete ja hüpikaknate jaoks. Lisateavet Bootstrapis sisalduva kohta leiate meie sisuosast .

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

Eraldi

Kui otsustate kasutada eraldi skriptide lahendust, peab esikohal olema Popper (kui kasutate vihjeid või hüpikaknaid) ja seejärel meie JavaScripti pistikprogrammid.

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

Moodulid

Kui kasutate <script type="module">, vaadake jaotist Bootstrapi kasutamine moodulina .

Komponendid

Kas soovite teada, millised komponendid nõuavad meie JavaScripti ja Popperit? Klõpsake allpool olevat komponentide kuvamise linki. Kui te pole lehe üldises struktuuris üldse kindel, jätkake lehe näidismalli lugemist.

Kuva JavaScripti nõudvad komponendid

Hoiatused loobumise kohta
Olekute ja märkeruutude/raadiofunktsioonide vahetamise nupud
Karussell kõigi slaidi käitumiste, juhtelementide ja indikaatorite jaoks
Ahendage sisu nähtavuse vahetamiseks
Kuvamise ja positsioneerimise rippmenüüd (vajalik on ka Popper )
Modaalid kuvamiseks, positsioneerimiseks ja kerimiskäitumiseks
Naviriba meie ahendamise pistikprogrammi laiendamiseks, et rakendada reageerivat käitumist
Röstsaid kuvamiseks ja loobumiseks
Tööriistad ja hüpikaknad kuvamiseks ja positsioneerimiseks (vajalik on ka Popper )
Scrollspy kerimiskäitumise ja navigeerimisvärskenduste jaoks

Stardi mall

Seadistage oma lehed kindlasti uusimate kujundus- ja arendusstandarditega. See tähendab HTML5 doktüübi kasutamist ja vaateava metasildi lisamist õige reageerimiskäitumise jaoks. Pange see kõik kokku ja teie lehed peaksid välja nägema järgmised:

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

Järgmiste toimingute jaoks külastage paigutuse dokumente või meie ametlikke näiteid , et alustada oma saidi sisu ja komponentide paigutust.

Tähtsad globaalsed

Bootstrap kasutab käputäis olulisi globaalseid stiile ja sätteid, millest peate selle kasutamisel teadlik olema. Kõik need on peaaegu eranditult suunatud brauseriüleste stiilide normaliseerimisele . Sukeldume sisse.

HTML5 doktüüp

Bootstrap nõuab HTML5 doctype kasutamist. Ilma selleta näete naljakat, mittetäielikku stiili, kuid selle lisamine ei tohiks põhjustada märkimisväärseid luksumisi.

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

Tundlik metasilt

Bootstrap töötatakse esmalt välja mobiilseadmete jaoks – strateegia, mille puhul optimeerime esmalt mobiilseadmete koodi ja seejärel suurendame CSS-i meediumipäringute abil komponente vastavalt vajadusele. Kõigi seadmete õige renderdamise ja puutetundliku suumimise tagamiseks lisage oma elemendile tundlik vaateava metasilt<head> .

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

Näete selle näidet käivitusmallis .

Karbi suuruse määramine

CSS-is täpsema suuruse muutmiseks lülitame globaalse box-sizingväärtuse content-boxväärtuselt border-box. See tagab, et paddingsee ei mõjuta elemendi lõplikku arvutatud laiust, kuid võib põhjustada probleeme mõne kolmanda osapoole tarkvaraga, nagu Google Maps ja Google'i kohandatud otsingumootor.

Harvadel juhtudel, kui peate selle tühistama, kasutage midagi sellist:

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

Ülaltoodud koodilõigu korral pärivad pesastatud elemendid, sealhulgas ::beforeja kaudu loodud sisu, kõik selle jaoks määratud elemendid .::afterbox-sizing.selector-for-some-widget

Lisateavet kasti mudeli ja suuruse kohta leiate veebisaidilt CSS Tricks .

Taaskäivitage

Brauseriülese renderduse parandamiseks kasutame brauserite ja seadmete ebakõlade parandamiseks taaskäivitamist , võimaldades samal ajal tavaliste HTML-i elementide pisut rohkem arvamust avaldavat lähtestamist.

kogukond

Olge Bootstrapi arenguga kursis ja võtke nende kasulike ressursside abil ühendust kogukonnaga.

Lugege ametlikku Bootstrapi ajaveebi ja tellige see .
Vestelge teiste Bootstrapperitega IRC-s. irc.libera.chatServeris, kanalis #bootstrap.
Rakendusabi leiate aadressilt Stack Overflow (sildiga bootstrap-5).
Arendajad peaksid kasutama märksõna bootstrappakettidel, mis muudavad või täiendavad Bootstrapi funktsioone, kui levitatakse npm - i või sarnaste edastusmehhanismide kaudu, et tagada maksimaalne leitavus.

Viimaseid kuulujutte ja ägedaid muusikavideoid saate jälgida ka Twitteris @getbootstrap .