Introductio
Incipias ab Bootstrap, mundi maxime popularis compages ad aedificandas resivas, primos mobiles sites, cum jsDelivr et a template starter page.
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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
JS
Multi ex nostris componentibus usum JavaScript ad functionem requirunt. Speciatim requirunt jQuery , Popper , et nostra JavaScript plugins. Utimur jQuery's gracili aedificante , sed plena litera etiam confirmatur.
Pone unum e sequentibus<script>
circa finem paginarum tuarum, ante clausulam </body>
, ut eas efficias. jQuery primum debet venire, deinde Popper, et deinde JavaScript plugins nostri.
Fasciculus
Include omnem Bootstrap JavaScript plugin cum uno e nostris duobus fasciculis. Ambas bootstrap.bundle.js
et popper pro nostris instrumentis et popoveris includunt, sed bootstrap.bundle.min.js
non jQuery . Include jQuery primum, deinde JavaScript fasciculum Bootstrap. Ad plura de illis quae in Bootstrap inclusa sunt, videbis sectionem contenta nostra.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
Components
Curious quae membra expresse requirunt jQuery, nostrum JavaScript, et Popper? Clica ostendo partes inferiores vinculum. Si de structura paginae incerta es, exemplum paginae exemplum serva.
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
- Scrollspy pro volumen agendi et navigationis updates
- Tooltips et popovers ad ostentationem et positioning (etiam postulat Popper )
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, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
-->
</body>
</html>
Hoc totum opus est ad altiorem paginam requisita. Visita propositum soUicitudo vel exempla officialia nostri ut incipias exponere contentus situs tui et 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, shrink-to-fit=no">
Huius rei exemplum videre potes in template starter .
Arca-sizing
Ut directior consideratio in CSS, box-sizing
valorem globalem ab content-box
ad border-box
. Hoc efficit padding
, ut latitudinem elementi ultimam computatam non afficit, sed problemata cum aliqua tertia parte programmatis efficere 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 ::before
et - omnia pro eo ::after
determinata 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.chat
servo, in#bootstrap
alveo. - Auxilium exsequendum inveniri potest apud Stack Overflow (tagged
bootstrap-4
). - Tincidunt uti keyword
bootstrap
in fasciculis quae ad officiationem Bootstrap modificandam vel adiciant cum per npm vel similes machinas traditionis ad maximam inveniendam distribuendam.
Potes etiam sequi @getbootstrap in Twitter pro recentissimis confabulationibus et musicis terribilis.
CSPs et immersa SVGs
Complures partes Bootstrap comprehendunt SVGs in nostro CSS infixae compositiones stili constanter ac facile per navigatores et machinas. Ad institutiones cum strictiore CSP configurationum , omnes instantias infixae SVGs (quae omnia per viam applicantur background-image
) documentavimus ut optiones tuas diligentius recognoscere possis.
- Prope button (in summis modalibus)
- Custom checkboxes and radio puga
- Forma permutat
- Forma icones sanatio
- Custom select menus
- Carousel controls
- Bullae Navbar toggle
Substructio in colloquio communitatis , nonnulla optiones ad hoc in codice tuo appellando includunt reponendas domicilia cum bonis localibus hostatis, imagines removentes et imagines inlines utentes (non possibilis in omnibus componentibus), et modificationem tuam CSP. Commendatio nostra est ut consilia securitatis tua diligenter recognoscas et in optima via, si opus fuerit, deinceps decernas.