in English

Sissejuhatus

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

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JS

Paljud meie komponendid nõuavad toimimiseks JavaScripti. Täpsemalt nõuavad need jQuery , Popper.js ja meie enda JavaScripti pistikprogramme. Kasutame jQuery õhukest ehitust , kuid toetatakse ka täisversiooni.

Nende lubamiseks asetage üks järgmistest lehtedest <script>oma lehtede lõppu, vahetult enne sulgevat märgendit. </body>Kõigepealt peab tulema jQuery, seejärel Popper.js ja seejärel meie JavaScripti pistikprogrammid.

Kimp

Kaasake kõik, mida vajate, ühes skriptis meie komplektiga. Meie bootstrap.bundle.jsja bootstrap.bundle.min.jshõlmavad Popperit , kuid mitte jQueryt . Lisateavet Bootstrapis sisalduva kohta leiate meie sisuosast .

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Eraldi

Kui otsustate kasutada eraldi skriptide lahendust, peab esmalt olema Popper.js ja seejärel meie JavaScripti pistikprogrammid.

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Komponendid

Kas soovite teada, millised komponendid nõuavad jQueryt, meie JS-i ja Popper.js-i? Klõpsake allpool olevat komponentide kuvamise linki. Kui te pole lehe struktuuris kindel, jätkake lehe malli näidis 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.js )
  • 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.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>

See on kõik, mida vajate lehe üldiste nõuete 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, shrink-to-fit=no">

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.

  • Jälgige Twitteris @getbootstrap .
  • Lugege ametlikku Bootstrapi ajaveebi ja tellige see .
  • Vestelge teiste Bootstrapperitega IRC-s. irc.freenode.netServeris, kanalis ##bootstrap.
  • Rakendusabi leiate aadressilt Stack Overflow (sildiga bootstrap-4).
  • Arendajad peaksid kasutama märksõna bootstrappakettidel, mis muudavad või täiendavad Bootstrapi funktsionaalsust npm - i või sarnaste edastamismehhanismide kaudu levitamisel, et tagada maksimaalne leitavus.

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