Source

Ynlieding

Begjin mei Bootstrap, it populêrste ramt fan 'e wrâld foar it bouwen fan responsive, mobile-earste siden, mei jsDelivr en in sjabloanstartpagina.

Flugge start

Wolle jo Bootstrap fluch tafoegje oan jo projekt? Brûk jsDelivr, fergees levere troch de minsken by jsDelivr. In pakketbehearder brûke of de boarnebestannen moatte downloade? Gean nei de downloadside.

CSS

Kopiearje-plakke it stylblêd <link>yn jo <head>foar alle oare stylblêden om ús CSS te laden.

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

JS

In protte fan ús komponinten fereaskje it gebrûk fan JavaScript om te funksjonearjen. Spesifyk fereaskje se jQuery , Popper.js , en ús eigen JavaScript-plugins. Plak de folgjende <script>s tichtby it ein fan jo siden, rjochts foar de ôfslutende </body>tag, om se yn te skeakeljen. jQuery moat earst komme, dan Popper.js, en dan ús JavaScript-plugins.

Wy brûke jQuery's slim build , mar de folsleine ferzje wurdt ek stipe.

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

Nijsgjirrich hokker komponinten eksplisyt fereaskje jQuery, ús JS, en Popper.js? Klikje op 'e keppeling foar komponinten sjen litte hjirûnder. As jo ​​​​net wis binne oer de algemiene sidestruktuer, bliuw dan lêze foar in foarbyldsidesjabloan.

Us bootstrap.bundle.jsen bootstrap.bundle.min.jsbefetsje Popper , mar net jQuery . Foar mear ynformaasje oer wat is opnommen yn Bootstrap, sjoch asjebleaft ús seksje ynhâld .

Toan komponinten dy't JavaScript nedich binne
  • Alerts foar ûntslach
  • Knoppen foar it wikseljen fan steaten en karfakje / radiofunksjonaliteit
  • Carousel foar alle slide gedrach, kontrôles en yndikatoaren
  • Ynklap foar it wikseljen fan sichtberens fan ynhâld
  • Dropdowns foar werjaan en posysjonearring (fereasket ek Popper.js )
  • Modalen foar werjaan, posysjonearring en rôljegedrach
  • Navbar foar it útwreidzjen fan ús Collapse-plugin om responsyf gedrach te ymplementearjen
  • Tooltips en popovers foar werjaan en posysjonearring (fereasket ek Popper.js )
  • Scrollspy foar scrollgedrach en navigaasjeupdates

Starter sjabloan

Wês wis dat jo siden ynsteld hawwe mei de lêste noarmen foar ûntwerp en ûntwikkeling. Dat betsjut dat jo in HTML5-doktype brûke en in viewport-meta-tag opnimme foar juste responsive gedrach. Set it allegear byinoar en jo siden moatte der sa útsjen:

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

Dat is alles wat jo nedich binne foar algemiene side-easken. Besykje de Layout -dokuminten as ús offisjele foarbylden om de ynhâld en komponinten fan jo side te begjinnen.

Wichtige globalen

Bootstrap brûkt in hantsjefol wichtige globale stilen en ynstellingen wêrfan jo moatte bewust wêze as jo it brûke, dy't allegear hast allinich rjochte binne op de normalisaasje fan cross-browserstilen. Lit ús dûke yn.

HTML5 doctype

Bootstrap fereasket it gebrûk fan it HTML5 doctype. Sûnder it sille jo wat funky ûnfolsleine styling sjen, mar ynklusyf it soe gjin grutte hik moatte feroarsaakje.

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

Responsive meta tag

Bootstrap wurdt earst mobyl ûntwikkele , in strategy wêryn wy earst koade optimalisearje foar mobile apparaten en dan komponinten opskaalje as nedich mei CSS-mediafragen. Foegje de responsive viewport-metatag ta oan jo <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Jo kinne in foarbyld fan dit yn aksje sjen yn it startersjabloan .

Box-sizing

Foar mear rjochtlinige grutte yn CSS, skeakelje wy de globale box-sizingwearde fan content-boxnei border-box. Dit soarget foar paddinggjin ynfloed op de definitive berekkene breedte fan in elemint, mar it kin problemen feroarsaakje mei guon software fan tredden lykas Google Maps en Google Custom Search Engine.

By de seldsume gelegenheid moatte jo it oerskriuwe, brûk sa'n ding as it folgjende:

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

Mei it boppesteande snippet sille geneste eleminten - ynklusyf generearre ynhâld fia ::beforeen - allegear de spesifisearre foar dat ::aftererfje .box-sizing.selector-for-some-widget

Learje mear oer doazemodel en maatwurk by CSS Tricks .

Reboot

Foar ferbettere cross-browser-rendering brûke wy Reboot om inkonsistinsjes oer browsers en apparaten te korrigearjen, wylst wy in bytsje mear opinige resets leverje oan gewoane HTML-eleminten.

Mienskip

Bliuw op 'e hichte oer de ûntwikkeling fan Bootstrap en berikke de mienskip mei dizze nuttige boarnen.

  • Folgje @getbootstrap op Twitter .
  • Lês en abonnearje op The Official Bootstrap Blog .
  • Petear mei oare Bootstrappers yn IRC. Op de irc.freenode.nettsjinner, yn it ##bootstrapkanaal.
  • Implementaasjehelp kin fûn wurde by Stack Overflow (tagged bootstrap-4).
  • Untwikkelders moatte it kaaiwurd brûke bootstrapop pakketten dy't de funksjonaliteit fan Bootstrap wizigje of tafoegje by it fersprieden fia npm of ferlykbere leveringsmeganismen foar maksimale ûntdekking.

Jo kinne ek @getbootstrap folgje op Twitter foar de lêste roddels en bjusterbaarlike muzykfideo's.