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

JS

Paljud meie komponendid nõuavad toimimiseks JavaScripti. Täpsemalt nõuavad need jQuery , Popper 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 ja seejärel meie JavaScripti pistikprogrammid.

Kimp

Kaasake iga Bootstrapi JavaScripti pistikprogramm ühte meie kahest komplektist. Mõlemad bootstrap.bundle.jsja bootstrap.bundle.min.jshõlmavad Popperit meie tööriistanäpunäidete ja hüpikaknate jaoks, kuid mitte jQueryt . Kaasake esmalt jQuery, seejärel Bootstrapi JavaScripti pakett. Lisateavet Bootstrapis sisalduva kohta leiate meie sisuosast .

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

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

Komponendid

Kas soovite teada, millised komponendid nõuavad selgesõnaliselt jQueryt, meie JavaScripti ja Popperit? 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 )
  • Modaalid kuvamiseks, positsioneerimiseks ja kerimiskäitumiseks
  • Naviriba meie ahendamise pistikprogrammi laiendamiseks, et rakendada reageerivat käitumist
  • Scrollspy kerimiskäitumise ja navigeerimisvärskenduste jaoks
  • Tööriistad ja hüpikaknad kuvamiseks ja positsioneerimiseks (vajalik on ka Popper )

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

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.

  • Lugege ametlikku Bootstrapi ajaveebi ja tellige see .
  • Vestelge teiste Bootstrapperitega IRC-s. irc.libera.chatServeris, 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 .

CSP-d ja manustatud SVG-d

Mitmed Bootstrapi komponendid sisaldavad meie CSS-i manustatud SVG-sid, et kujundada komponente järjepidevalt ja hõlpsalt kõigis brauserites ja seadmetes. Rangemate CSP - konfiguratsioonidega organisatsioonide jaoks oleme dokumenteerinud kõik meie manustatud SVG-de eksemplarid (mida kõiki rakendatakse kaudu background-image), et saaksite oma valikud põhjalikumalt üle vaadata.

Tuginedes kogukonna vestlusele , hõlmavad mõned võimalused selle lahendamiseks teie enda koodibaasis URL-ide asendamist kohapeal hostitud varadega, piltide eemaldamist ja tekstisiseste piltide kasutamist (ei ole kõigis komponentides võimalik) ja CSP muutmist. Meie soovitus on oma turvapoliitika hoolikalt üle vaadata ja vajadusel otsustada, milline on parim edasiminek.