Skip to main content Skip ad navigationem soUicitudo
Check
in English

Incipias cum Bootstrap

Bootstrap potens est, toolkit pluma conferta frontend. Aedificare aliquid-ex prototypo ad productionem-in minutis.

In hac pagina

Velox satus

Incipias ab comprehendo Bootstrap productionis paratae CSS et JavaScript per CDN sine necessitate ad gradus aedificandi. Vide in praxi cum hoc demo Bootstrap CodePen .


  1. Novam index.htmllimam in radix project tui. Includunt <meta name="viewport">tag tam ad mores responsivos in mobilibus machinis.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. Include Bootstrap's CSS et JS. Place the <link>tag in the <head>for our CSS, and the <script>tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) ante clausulam </body>. Disce plus de nostris CDN nexus .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

    Potes etiam Popper et noster JS separatim includere. Si guttatim, popoveri, aut ferramenta uti non vis, praeter quaedam chiliobyta non Popper comprehendo.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

  3. Salve, mundi! Aperi paginam in navigatro electionis ut tuam paginam Bootstrapped vide. Now you can start building with Bootstrap by creating your own layout , adding dozens of components , and utiliizing our official examples .

Ut referatur, hic sunt nexus nostri primariae CDN.

Descriptio URL
CSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Etiam CDN uti potes arcessere aliquem e nostris aedificationibus additis in Contents paginae recensitis .

Deinde gradibus

JS 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 nostrum Collapsum et Offcanvas plugins ampliandos ad mores responsuros efficiendos
  • Navs cum Tab plugin pro panibus contentis toggling
  • Offcanvases ad ostentationem, positionem, ac librum morum
  • Scrollspy pro volumen agendi et navigationis updates
  • Bibunt ad ostentandam et dimissionem
  • Tooltips et popovers ad ostentationem et positioning (etiam postulat Popper )

Maximus globals

Bootstrap paucis stylis globali momentis et uncinis utitur, quae omnia fere unice ad ordinationem crucis stylorum navigatri machinantur. Eamus dive in.

HTML5 doctype

Bootstrap usum doctypi HTML5 requirit. Sine qua risum aliquod et incompletum videbis stylum.

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

Exemplum videre potes huius in actu in vivo initio .

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 ad communitatem porrige.

  • Legere et subscribe to Officiali Bootstrap Blog .
  • Ask and explore our GitHub Discussions .
  • 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.