Enkonduko

Komencu kun Bootstrap, la plej populara kadro en la mondo por konstrui respondemajn, unue moveblajn retejojn, kun jsDelivr kaj ŝablona startpaĝo.

Rapida komenco

Ĉu vi volas rapide aldoni Bootstrap al via projekto? Uzu jsDelivr, senpagan malfermfontecan CDN. Ĉu vi uzas pakaĵadministrilon aŭ bezonas elŝuti la fontdosierojn? Iru al la paĝo pri elŝutoj .

CSS

Kopiu-algluu la stilfolion <link>en vian <head>antaŭ ĉiuj aliaj stilfolioj por ŝargi nian CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Multaj el niaj komponantoj postulas la uzon de JavaScript por funkcii. Specife, ili postulas jQuery , Popper , kaj niajn proprajn JavaScript-kromaĵojn. Ni uzas la sveltan konstruon de jQuery , sed la plena versio ankaŭ estas subtenata.

Metu unu el la sekvaj apud <script>la fino de viaj paĝoj, tuj antaŭ la ferma </body>etikedo, por ebligi ilin. jQuery devas veni unue, poste Popper, kaj poste niaj JavaScript-kromaĵoj.

Pakaĵo

Inkluzivi ĉiun Bootstrap JavaScript kromaĵo kun unu el niaj du pakaĵoj. Ambaŭ bootstrap.bundle.jskaj bootstrap.bundle.min.jsinkluzivas Popper por niaj konsiletoj kaj popovers, sed ne jQuery . Unue inkluzivu jQuery, poste Bootstrap JavaScript-faskon. Por pliaj informoj pri kio estas inkluzivita en Bootstrap, bonvolu vidi nian enhavsekcion .

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

Apartigi

Se vi decidas iri kun la aparta skripto-solvo, Popper devas veni unue (se vi uzas konsiletojn aŭ popovers), kaj poste niajn JavaScript-kromaĵojn.

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

Komponentoj

Ĉu vi scivolas, kiuj komponantoj eksplicite postulas jQuery, nian JavaScript kaj Popper? Alklaku la ligilon de montri komponantojn sube. Se vi ne certas pri la 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 nian Kolapsan kromaĵon por efektivigi respondeman konduton
Scrollspy por rula konduto kaj navigado ĝisdatigoj
Konsiletoj kaj popovers por montri kaj poziciigi (ankaŭ postulas Popper )

Komenca ŝablono

Nepre agordu viajn paĝojn kun la plej novaj normoj pri dezajno kaj disvolviĝo. Tio signifas uzi HTML5-doktipon kaj inkluzivi vidfendan meta-etikedon por taŭgaj respondemaj kondutoj. Kunigu ĉion kaj viaj paĝoj devus aspekti jene:

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

Tio estas ĉio, kion vi bezonas por ĝeneralaj paĝaj postuloj. Vizitu la Dokumentojn pri Aranĝo aŭ niajn oficialajn ekzemplojn por komenci aranĝi la enhavon kaj komponantojn de via retejo.

Gravaj tutmondaj

Bootstrap uzas kelkajn gravajn tutmondajn stilojn kaj agordojn, kiujn vi devos konscii kiam vi uzas ĝin, ĉiuj el kiuj preskaŭ ekskluzive estas direktitaj al la normaligo de krucretumiloj. Ni plonĝu.

HTML5-dokumentotipo

Bootstrap postulas la uzon de la HTML5-dokumentotipo. Sen ĝi, vi vidos iom funky nekompleta stilo, sed inkluzivi ĝin ne devus kaŭzi iujn konsiderindajn singultojn.

<!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, shrink-to-fit=no">

Vi povas vidi ekzemplon de tio en ago en la komenca ŝablono .

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 Propra Serĉilo.

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 .
Babilu kun kunuloj Bootstrappers en IRC. Sur la irc.libera.chatservilo, en la #bootstrapkanalo.
Efektiviga helpo troveblas ĉe Stack Overflow (etikedita bootstrap-4).
Programistoj devas uzi la ŝlosilvorton bootstrapĉe pakaĵoj, kiuj modifas aŭ aldonas al la funkcioj 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.

CSP-oj kaj enigitaj SVG-oj

Pluraj Bootstrap-komponentoj inkluzivas enigitajn SVG-ojn en nia CSS por stiligi komponentojn konstante kaj facile tra retumiloj kaj aparatoj. Por organizoj kun pli striktaj CSP - agordoj , ni dokumentis ĉiujn okazojn de niaj enigitaj SVG-oj (ĉiuj estas aplikataj per background-image) por ke vi povu pli detale revizii viajn elektojn.

Fermi butonon (uzata en atentigoj kaj modaloj)
Propraj markobutonoj kaj radiobutonoj
Formŝaltiloj
Ikonoj pri validado de formoj
Propraj elektaj menuoj
Karuselaj kontroloj
Navbar baskuli butonoj

Surbaze de komunuma konversacio , iuj elektoj por trakti ĉi tion en via propra kodbazo inkluzivas anstataŭigi la URL-ojn per loke gastigitaj aktivoj, forigi la bildojn kaj uzi enliniajn bildojn (ne eblas en ĉiuj komponantoj), kaj modifi vian CSP. Nia rekomendo estas zorge revizii viajn proprajn sekurecpolitikojn kaj decidi pri plej bona vojo antaŭen, se necese.