Source

Inleiding

Begin met Bootstrap, die wêreld se gewildste raamwerk vir die bou van responsiewe, mobiele eerste werwe, met jsDelivr en 'n sjabloon-beginbladsy.

Vinnige begin

Wil jy Bootstrap vinnig by jou projek voeg? Gebruik jsDelivr, gratis verskaf deur die mense by jsDelivr. Gebruik u 'n pakketbestuurder of moet u die bronlêers aflaai? Gaan na die aflaaibladsy.

CSS

Kopieer-plak die stylblad <link>in jou <head>voor alle ander stylblaaie om ons CSS te laai.

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

JS

Baie van ons komponente vereis die gebruik van JavaScript om te funksioneer. Spesifiek, hulle benodig jQuery , Popper.js en ons eie JavaScript-inproppe. Plaas die volgende <script>s naby die einde van jou bladsye, reg voor die sluitingsmerker </body>, om hulle te aktiveer. jQuery moet eerste kom, dan Popper.js, en dan ons JavaScript-inproppe.

Ons gebruik jQuery se skraal gebou , maar die volledige weergawe word ook ondersteun.

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

Nuuskierig watter komponente jQuery, ons JS en Popper.js eksplisiet vereis? Klik op die wys komponente skakel hieronder. As jy enigsins onseker is oor die algemene bladsystruktuur, bly lees vir 'n voorbeeldbladsysjabloon.

Ons bootstrap.bundle.jsen bootstrap.bundle.min.jssluit Popper in , maar nie jQuery nie . Vir meer inligting oor wat by Bootstrap ingesluit is, sien asseblief ons inhoudsafdeling .

Wys komponente wat JavaScript vereis
  • Waarskuwings vir afwysing
  • Knoppies vir omskakeling van toestande en merkblokkie/radiofunksionaliteit
  • Karrousel vir alle glygedrag, kontroles en aanwysers
  • Vou in om die sigbaarheid van inhoud te wissel
  • Aftrekkies vir vertoon en posisionering (vereis ook Popper.js )
  • Modale vir vertoon, posisioneer en blaai gedrag
  • Navbar vir die uitbreiding van ons Invou-inprop om responsiewe gedrag te implementeer
  • Gereedskapwenke en popovers vir vertoon en posisionering (vereis ook Popper.js )
  • Scrollspy vir rolgedrag en navigasie-opdaterings

Beginner sjabloon

Maak seker dat jou bladsye opgestel is met die nuutste ontwerp- en ontwikkelingstandaarde. Dit beteken om 'n HTML5 doctype te gebruik en 'n viewport-meta-tag in te sluit vir behoorlike responsiewe gedrag. Sit dit alles saam en jou bladsye moet so lyk:

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

Dit is al wat jy nodig het vir algehele bladsyvereistes. Besoek die uitlegdokumente of ons amptelike voorbeelde om jou werf se inhoud en komponente te begin uitlê.

Belangrike globale

Bootstrap gebruik 'n handvol belangrike globale style en instellings waarvan u bewus moet wees wanneer u dit gebruik, wat almal byna uitsluitlik gerig is op die normalisering van kruisblaaierstyle. Kom ons duik in.

HTML5 doctype

Bootstrap vereis die gebruik van die HTML5 doctype. Daarsonder sal jy 'n paar funky onvolledige stilering sien, maar dit behoort nie aansienlike hik te veroorsaak nie.

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

Responsiewe metatag

Bootstrap word eers mobiel ontwikkel , 'n strategie waarin ons eers kode vir mobiele toestelle optimeer en dan komponente opskaal soos nodig met behulp van CSS-medianavrae. Om behoorlike weergawe en raakzoom vir alle toestelle te verseker, voeg die responsiewe kykpoort-metamerker by jou <head>.

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

Jy kan 'n voorbeeld hiervan in aksie sien in die beginsjabloon .

Doos-grootte

Vir meer eenvoudige groottes in CSS, skakel ons die globale box-sizingwaarde van content-boxna border-box. Dit verseker dat paddingdit nie die finale berekende breedte van 'n element beïnvloed nie, maar dit kan probleme veroorsaak met sommige derdeparty-sagteware soos Google Maps en Google Custom Search Engine.

By die seldsame geleentheid wat jy dit moet ignoreer, gebruik iets soos die volgende:

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

Met die bogenoemde brokkie sal geneste elemente – insluitend gegenereerde inhoud via ::beforeen ::after– almal die gespesifiseerde box-sizingdaarvoor erf .selector-for-some-widget.

Kom meer te wete oor boksmodel en grootte by CSS Tricks .

Herlaai

Vir verbeterde kruisblaaier-weergawe gebruik ons ​​Reboot om teenstrydighede oor blaaiers en toestelle reg te stel, terwyl ons effens meer eiesinnige terugstellings na algemene HTML-elemente verskaf.

Gemeenskap

Bly op hoogte van die ontwikkeling van Bootstrap en reik uit na die gemeenskap met hierdie nuttige hulpbronne.

  • Volg @getbootstrap op Twitter .
  • Lees en teken in op The Official Bootstrap Blog .
  • Gesels met ander Bootstrappers in IRC. Op die irc.freenode.netbediener, in die ##bootstrapkanaal.
  • Implementeringshulp kan gevind word by Stack Overflow (gemerk bootstrap-4).
  • Ontwikkelaars moet die sleutelwoord gebruik bootstrapop pakkette wat die funksionaliteit van Bootstrap verander of byvoeg wanneer hulle deur npm of soortgelyke afleweringsmeganismes versprei word vir maksimum ontdekbaarheid.

Jy kan ook @getbootstrap op Twitter volg vir die nuutste skinderpraatjies en wonderlike musiekvideo's.