Alustage Bootstrapiga

Bootstrap on võimas, paljude funktsioonidega kasutajaliidese tööriistakomplekt. Ehitage midagi – alates prototüübist kuni tootmiseni – minutitega.

Sellel lehel

Kiire algus

Alustage Bootstrapi tootmisvalmis CSS-i ja JavaScripti kaasamisega CDN-i kaudu, ilma et oleks vaja mingeid ehitusetappe. Vaadake seda selle Bootstrap CodePeni demo abil praktikas .

index.htmlLooge oma projekti juurtes uus fail. Kaasake <meta name="viewport">märgend ka mobiilseadmetes õige reageerimise tagamiseks.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Kaasake Bootstrapi CSS ja JS. Asetage <link>märgend <head>meie CSS-i jaoks ja <script>meie JavaScripti kogumi märgend (sh Popper positsioneerimisrippmenüüde, popperite ja tööriistavihjete jaoks) enne sulgemist </body>. Lisateavet meie CDN-i linkide kohta .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Võite lisada ka Popperi ja meie JS-i eraldi. Kui te ei kavatse kasutada rippmenüüd, hüpikaknaid ega tööriistavihjeid, säästke mõned kilobaidid, jättes Popperi kaasamata.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Tere, Maailm! Avage leht oma valitud brauseris, et näha oma Bootstrapped lehte. Nüüd saate alustada Bootstrapiga ehitamist, luues oma paigutuse , lisades kümneid komponente ja kasutades meie ametlikke näiteid .

CDN-i lingid

Viitena on siin meie peamised CDN-i lingid.

Kirjeldus	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

CDN-i saate kasutada ka mis tahes meie lisajärgu toomiseks, mis on loetletud sisulehel .

Järgmised sammud

Lugege veidi lisateavet mõne olulise globaalse keskkonna seadete kohta , mida Bootstrap kasutab.
Lugege selle kohta, mida Bootstrap sisaldab, meie sisujaotises ja allpool olevat JavaScripti vajavate komponentide loendit .
Kas vajate veidi rohkem jõudu? Kaaluge Bootstrapiga loomist, kaasates lähtefailid paketihalduri kaudu .
Kas soovite kasutada Bootstrapi moodulina koos <script type="module">? Vaadake jaotist Bootstrapi kasutamine moodulina .

JS 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 Collapse ja Offcanvase pistikprogrammide laiendamiseks, et rakendada reageerivat käitumist
Navid koos Tab pluginaga sisupaanide vahetamiseks
Lõuendid kuvamiseks, positsioneerimiseks ja kerimiseks
Scrollspy kerimiskäitumise ja navigeerimisvärskenduste jaoks
Röstsaid kuvamiseks ja loobumiseks
Tööriistad ja hüpikaknad kuvamiseks ja positsioneerimiseks (vajalik on ka Popper )

Tähtsad globaalsed

Bootstrap kasutab käputäis olulisi globaalseid stiile ja sätteid, mis kõik on peaaegu eranditult suunatud brauseriüleste stiilide normaliseerimisele . Sukeldume sisse.

HTML5 doktüüp

Bootstrap nõuab HTML5 doctype kasutamist. Ilma selleta näete naljakat ja mittetäielikku stiili.

<!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äidet selle toimimise kohta näete kiirkäivituses .

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 pöörduge kogukonna poole nende kasulike ressursside abil.

Lugege ametlikku Bootstrapi ajaveebi ja tellige see .
Küsige ja uurige meie GitHubi arutelusid .
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 .