Source

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 jsDelivr'i, mida jsDelivr'i inimesed pakuvad tasuta. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Paljud meie komponendid nõuavad toimimiseks JavaScripti. Täpsemalt nõuavad need jQuery , Popper.js ja meie enda JavaScripti pistikprogramme. Nende lubamiseks asetage järgmised <script>s-id 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.

Kasutame jQuery õhukest ehitust , kuid toetatakse ka täisversiooni.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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 üldises struktuuris üldse kindel, jätkake lehe näidismalli lugemist.

Meie bootstrap.bundle.jsja bootstrap.bundle.min.jshõlmavad Popperit , kuid mitte jQueryt . Lisateavet Bootstrapis sisalduva kohta leiate meie sisuosast .

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
  • 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 .