Source

Enkonduko

Komencu kun Bootstrap, la plej populara kadro de 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, provizitan senpage de homoj ĉe jsDelivr. Ĉ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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Multaj el niaj komponantoj postulas la uzon de JavaScript por funkcii. Specife, ili postulas jQuery , Popper.js , kaj niajn proprajn JavaScript-kromaĵojn. Metu la sekvajn <script>s proksime de la fino de viaj paĝoj, tuj antaŭ la ferma </body>etikedo, por ebligi ilin. jQuery devas veni unue, poste Popper.js, kaj poste niaj JavaScript-kromaĵoj.

Ni uzas la sveltan konstruon de jQuery , sed la plena versio ankaŭ estas subtenata.

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

Ĉu vi scivolas, kiuj komponantoj eksplicite postulas jQuery, nian JS kaj Popper.js? 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.

Nia bootstrap.bundle.jskaj bootstrap.bundle.min.jsinkluzivas Popper , sed ne jQuery . Por pliaj informoj pri kio estas inkluzivita en Bootstrap, bonvolu vidi nian enhavsekcion .

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
  • Dropdowns por montrado kaj poziciigado (ankaŭ postulas Popper.js )
  • Modaloj por montrado, poziciigado kaj rula konduto
  • Navbar por etendi nian Kolapsan kromaĵon por efektivigi respondeman konduton
  • Konsiletoj kaj popovers por montri kaj poziciigi (ankaŭ postulas Popper.js )
  • Scrollspy por rula konduto kaj navigado ĝisdatigoj

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

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-amaskomunikilaj 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 transretumila 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.

  • Sekvu @getbootstrap en Twitter .
  • Legu kaj abonu al La Oficiala Bootstrap Blogo .
  • Babilu kun kunuloj Bootstrappers en IRC. Sur la irc.freenode.netservilo, 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.