Skip to main content Skip ad navigationem soUicitudo
in English

Introductio

Incipias ab Bootstrap, mundi maxime popularis compages ad aedificandas resivas, primos mobiles sites, cum jsDelivr et a template starter page.

In hac pagina

Velox satus

Vultus cito Bootstrap ad propositum tuum addere? Utere jsDelivr, gratis aperto fonte CDN. Utens sarcina procurator vel postulo ut download fons lima? Head to the downloads page .

CSS

Effingo-crustulum cum stylesheetis <link>in tua <head>, ante omnia alia schedulis onerandis nostris CSS.

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

JS

Multi ex nostris componentibus usum JavaScript ad functionem requirunt. Speciatim, JavaScript plugins et Popper nostra requirunt . Pone unum e sequentibus<script> circa finem paginarum tuarum, ante clausulam </body>, ut eas efficias.

Fasciculus

Include omnem Bootstrap JavaScript plugin et dependentia cum uno e nostris duobus fasciculis. Ambas bootstrap.bundle.jset bootstrap.bundle.min.jsincludunt Popper pro instrumentis nostris et popoveribus. Ad plura de illis quae in Bootstrap inclusa sunt, videbis sectionem contenta nostra.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Separate

Si solutionem scriptorum separatorum ire volueris, Popper primum debet venire (si instrumenta vel popovers utens), deinde nostra JavaScript plugins.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modules

Si uteris <script type="module">, placere ad nostrum Bootstrap utentem sectionem moduli referas.

Components

Curiosa quae membra expresse requirunt nostrum JavaScript et Popper? Clica ostendo partes inferiores vinculum. Si de structura paginae generalis omnino incerta es, exemplum paginae exemplum observa.

Ostendere components requirunt JavaScript
  • Alets dimissis
  • Bullae pro toggling civitatibus et checkbox/radio functionality
  • Carousel pro omnibus lapsus mores, imperium, indices
  • Ruina pro toggling uisibiliter content
  • Dropdowns ostentandi ac positioning (etiam Popper requirit )
  • Modales ostentandi, positionis, ac morum volumen
  • Navbar ad plugin nostri Collapse extendendo ad mores responsuros efficiendos
  • Offcanvases ad ostentationem, positionem, ac librum morum
  • Bibunt ad ostentandam et dimissionem
  • Tooltips et popovers ad ostentationem et positioning (etiam postulat Popper )
  • Scrollspy pro volumen agendi et navigationis updates

Starter template

Vide ut paginas tuas cum recentissimis signis et evolutionis signis constituas. Hoc significat HTML5 doctypum utens et incluso meta tag in aspectu ad mores responsuros proprios. Omnia simul pone, et paginae tuae ut hoc videant;

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Proximis gradibus, disce propositum soUicitudo vel officialium nostrorum exempla ut incipias exponere contentus situs tui ac componentes.

Maximus globals

Bootstrap paucis stylis globali momentis et uncinis utitur quos scire debes ut cum illo utaris, quae omnia fere ad ordinationem stylorum navigatoris crucis unice struunt. Eamus dive in.

HTML5 doctype

Bootstrap usum doctypi HTML5 requirit. Sine ea, videbis aliquid futu- rum dicendi incompletum, sed etiam singultum non parvam facere debet.

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

Respondens meta tag

Bootstrap primum mobile est elaboratum , consilium in quo codicem optimize mobilium machinarum primum ac deinde componentes ut opus CSS instrumentorum queries utendo conscendunt. Ut recte reddendo et tangas zooming pro omnibus machinis studeas, aspectum meta responsivum tuo tag addere <head>.

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

Huius rei exemplum videre potes in template starter .

Arca-sizing

Ut directior consideratio in CSS, box-sizingvalorem globalem ab content-boxad border-box. Hoc efficit padding, ut latitudinem elementi ultimam computatam non afficit, sed problemata cum aliqua tertia-pars programmatis causare potest sicut Google Maps et Google Custom Search Engine.

Raro opus est ut vincat, utere simili sequenti:

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

Praecisis snippete, elementis nidos - contentum generatum comprehendens ::beforeet - omnia pro eo ::afterdeterminata possidebunt .box-sizing.selector-for-some-widget

Disce plus de archa exemplari et inspectione in CSS Furta .

Reboot

Pro meliore transversis limitibus reddendo, Reboot ad emendandas repugnantias per navigatores et machinas utimur, dum leviter magis opiniones resets communibus HTML elementis praebes.

Communitas

Hodie in Bootstrap evolutione subsiste et cum his utilibus facultatibus communitatem porrige.

  • Legere et subscribe to Officiali Bootstrap Blog .
  • Loqui cum sociis Bootstrapers in IRC. In irc.libera.chatservo, in #bootstrapalveo.
  • Auxilium exsequendum inveniri potest apud Stack Overflow (tagged bootstrap-5).
  • Tincidunt uti keyword bootstrapin fasciculis quae modificant vel augent functioni suae Bootstrap cum distribuendi per npm vel similes machinationes traditionis ad maximam inveniendi facultatem.

Potes etiam sequi @getbootstrap in Twitter pro recentissimis confabulationibus et musicis terribilis.