Komencu kun Bootstrap

Bootstrap estas potenca, plenplena interfaca ilaro. Konstruu ion ajn—de prototipo ĝis produktado—en minutoj.

Sur ĉi tiu paĝo

Rapida komenco

Komencu inkludante la produktadpretan CSS kaj JavaScript de Bootstrap per CDN sen bezono de iuj konstruaj paŝoj. Vidu ĝin praktike kun ĉi tiu Bootstrap CodePen-demo .

Kreu novan index.htmldosieron en via projekta radiko. Enmetu la <meta name="viewport">etikedon ankaŭ por taŭga respondema konduto en porteblaj aparatoj.

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

Inkluzivi CSS kaj JS de Bootstrap. Metu la <link>etikedon en la <head>por nia CSS, kaj la <script>etikedon por nia JavaScript-pakaĵo (inkluzive de Popper por poziciigi falmenuojn, poppers kaj konsiletojn) antaŭ la fermo </body>. Lernu pli pri niaj CDN-ligiloj .

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

Vi ankaŭ povas inkluzivi Popper kaj nian JS aparte. Se vi ne planas uzi falmenuojn, popovers aŭ konsiletojn, ŝparu kelkajn kilobajtojn ne inkludante Popper.

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

Saluton mondo! Malfermu la paĝon en via elektita retumilo por vidi vian Bootstrapped paĝon. Nun vi povas komenci konstrui kun Bootstrap kreante vian propran aranĝon , aldonante dekojn da komponantoj kaj utiligante niajn oficialajn ekzemplojn .

CDN-ligiloj

Kiel referenco, ĉi tie estas niaj ĉefaj CDN-ligiloj.

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

Vi ankaŭ povas uzi la CDN por preni iun ajn el niaj aldonaj konstruaĵoj listigitaj en la paĝo Enhavo .

Sekvaj paŝoj

Legu iom pli pri iuj gravaj tutmondaj medio-agordoj , kiujn Bootstrap uzas.
Legu pri tio, kio estas inkluzivita en Bootstrap en nia enhavo-sekcio kaj la listo de komponantoj, kiuj postulas JavaScript , sube.
Ĉu vi bezonas iom pli da potenco? Konsideru konstrui kun Bootstrap inkludante la fontdosierojn per pakaĵmanaĝero .
Ĉu vi volas uzi Bootstrap kiel modulon kun <script type="module">? Bonvolu raporti al nia uzado de Bootstrap kiel modula sekcio.

JS-komponentoj

Ĉu vi scivolas, kiuj komponantoj eksplicite postulas nian JavaScript kaj Popper? Alklaku la ligilon de montri komponantojn sube. Se vi tute ne certas pri la ĝenerala paĝa strukturo, daŭre legu por ekzempla paĝa ŝablono.

Montru komponantojn postulantajn JavaScript

Atentigoj por forigo
Butonoj por ŝanĝi ŝtatojn kaj markobutono/radia funkcio
Karuselo por ĉiuj glitkondutoj, kontroloj kaj indikiloj
Kolapso por ŝanĝi videblecon de enhavo
Menumenuoj por montri kaj poziciigi (ankaŭ postulas Popper )
Modaloj por montrado, poziciigado kaj rula konduto
Navbar por etendi niajn Collapse kaj Offcanvas kromaĵojn por efektivigi respondemajn kondutojn
Navs kun la Tab-aldonaĵo por ŝanĝi enhavajn fenestrojn
Eksterkanvasoj por montrado, poziciigado kaj rula konduto
Scrollspy por rula konduto kaj navigado ĝisdatigoj
Tostoj por montri kaj forĵeti
Konsiletoj kaj popovers por montri kaj poziciigi (ankaŭ postulas Popper )

Gravaj tutmondaj

Bootstrap uzas manplenon da gravaj tutmondaj stiloj kaj agordoj, ĉiuj el kiuj preskaŭ ekskluzive estas orientita al la normaligo de krucretumiloj. Ni plonĝu.

HTML5-dokumentotipo

Bootstrap postulas la uzon de la HTML5-dokumentotipo. Sen ĝi, vi vidos iom funky kaj nekompleta stilo.

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

Respondema meta-etikedo

Bootstrap estas disvolvita unue por poŝtelefono , strategio en kiu ni unue optimumigas kodon por porteblaj aparatoj kaj poste pligrandigas komponantojn laŭbezone per CSS-adresaj demandoj. Por certigi taŭgan bildigon kaj tuŝan zomon por ĉiuj aparatoj, aldonu la respondeman vidfendan meta-etikedon al via <head>.

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

Vi povas vidi ekzemplon de tio en ago en la rapida komenco .

Skatolo-grandeco

Por pli simpla grandeco en CSS, ni ŝanĝas la tutmondan box-sizingvaloron de content-boxal border-box. Ĉi tio certigas paddingne influas la finan kalkulitan larĝon de elemento, sed ĝi povas kaŭzi problemojn kun iu triaparta programaro kiel Google Maps kaj Google Custom Search Engine.

En la malofta okazo, kiam vi devas anstataŭi ĝin, uzu ion kiel la jenon:

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

Kun la ĉi-supra fragmento, nestitaj elementoj—inkluzive de generita enhavo per ::beforekaj ::after— ĉiuj heredos la specifitan box-sizingpor tio .selector-for-some-widget.

Lernu pli pri kestomodelo kaj grandeco ĉe CSS-Trukoj .

Rekomencu

Por plibonigita trans-retumila bildigo, ni uzas Reboot por korekti nekonsekvencojn inter retumiloj kaj aparatoj dum li provizas iomete pli opiniajn rekomencojn al oftaj HTML-elementoj.

Komunumo

Restu ĝisdatigita pri la disvolviĝo de Bootstrap kaj kontaktu la komunumon per ĉi tiuj helpemaj rimedoj.

Legu kaj abonu al La Oficiala Bootstrap Blogo .
Demandu kaj esploru niajn GitHub-Diskutojn .
Babilu kun kunuloj Bootstrappers en IRC. Sur la irc.libera.chatservilo, en la #bootstrapkanalo.
Efektiviga helpo troveblas ĉe Stack Overflow (etikedita bootstrap-5).
Programistoj devas uzi la ŝlosilvorton bootstrapen pakaĵoj kiuj modifas aŭ aldonas al la funkcieco de Bootstrap dum distribuado per npm aŭ similaj liveraj mekanismoj por maksimuma malkovro.

Vi ankaŭ povas sekvi @getbootstrap en Twitter por la plej novaj klaĉoj kaj mirindaj muzikfilmetoj.