Nnianimu

Fi ase fi Bootstrap, wiase nhyehyɛe a agye din sen biara a wɔde kyekye nsɛm a ɛyɛ mmuae, mobile-di kan, a jsDelivr ne template mfiase krataafa ka ho.

Mfiase ntɛm ara

Worehwehwɛ sɛ wode Bootstrap bɛka wo project no ho ntɛmntɛm? Fa jsDelivr, CDN a wɔabue ano a wontua hwee di dwuma. Wode package manager redi dwuma anaasɛ ɛsɛ sɛ wotwe source files no? Fa w’ani kyerɛ downloads krataafa no so .

CSS a ɛwɔ hɔ no

Copy-paste stylesheet <link>no kɔ wo <head>ansa na stylesheets afoforo nyinaa ahyɛ mu na fa yɛn CSS no ahyɛ mu.

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

JS

Yɛn afã horow no pii hwehwɛ sɛ yɛde JavaScript di dwuma na ama ayɛ adwuma. Titiriw no, wohia jQuery , Popper , ne yɛn ankasa JavaScript plugins. Yɛde jQuery's slim build di dwuma , nanso nea edi mũ no nso wɔboa.

Fa s a edidi so yi mu biako to<script> baabi a ɛbɛn wo nkratafa no awiei, ansa na </body>ahyɛnsode a wɔde to mu no anim pɛɛ, na ama wɔatumi ayɛ adwuma. Ɛsɛ sɛ jQuery di kan ba, afei Popper, na afei yɛn JavaScript plugins no.

Saka

Fa Bootstrap JavaScript plugin biara ka yɛn bundle abien no mu biako ho. Ne nyinaa bootstrap.bundle.jsne Popperbootstrap.bundle.min.js ka ho ma yɛn adwinnade ho nsɛm ne popovers, nanso ɛnyɛ jQuery . Fa jQuery ka ho kan, afei Bootstrap JavaScript bundle. Sɛ wopɛ nsɛm pii fa nea ɛka Bootstrap ho a, yɛsrɛ wo hwɛ yɛn nsɛm a ɛwɔ mu no fã hɔ.

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

Kyɛ mu

Sɛ wo si gyinae sɛ wode scripts ano aduru a ɛyɛ soronko no bɛkɔ a, ɛsɛ sɛ Popper di kan (sɛ wode adwinnade ho nsɛm anaa popovers redi dwuma a), na afei yɛn JavaScript plugins no.

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

Nneɛma a ɛwom

Wopɛ sɛ wohu nneɛma bɛn na ɛhwehwɛ pefee sɛ jQuery, yɛn JavaScript, ne Popper? Klik show components link a ɛwɔ ase hɔ no so. Sɛ wo nnim kratafa nhyehyɛe no a, kɔ so kenkan ma nhwɛso krataafa nsusuwso.

Kyerɛ afã horow a ɛhwehwɛ JavaScript

Kɔkɔbɔ ahorow a ɛfa sɛnea wobeyi obi afi adwumam ho
Buttons a wɔde toggling tebea ne checkbox/radio dwumadie
Carousel ma slide suban, controls, ne indicators nyinaa
Collapse ma toggling visibility a ɛwɔ nsɛm no mu
Dropdowns a wɔde bɛkyerɛ ne gyinabea (ɛsan nso hwehwɛ Popper ) .
Modals a wɔde kyerɛ, gyinabea, ne nhoma mmobɔwee suban
Navbar sɛ yɛatrɛw yɛn Collapse plugin no mu de adi dwuma wɔ mmuae suban mu
Scrollspy ma scroll suban ne akwantuo ho nsɛm foforɔ
Nnwinnade ho nsɛm ne popovers a wɔde kyerɛ ne gyinabea (ɛsan nso hwehwɛ Popper ) .

Starter nsusuwso

Hwɛ hu sɛ wode nhyehyɛe ne nkɔso gyinapɛn ahorow a aba foforo besiesie wo nkratafa no. Ɛno kyerɛ sɛ wode HTML5 doctype bedi dwuma na wode viewport meta tag aka ho ama mmuae a ɛfata. Fa ne nyinaa bom na ɛsɛ sɛ wo nkratafa no te sɛ eyi:

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

Ɛno nkutoo ne nea wuhia ma kratafa ahwehwɛde ahorow nyinaa. Kɔ Layout docs anaa yɛn aban nhwɛso ahorow no so na fi ase hyehyɛ wo sait no mu nsɛm ne nea ɛwom no.

Wiase nyinaa nsɛm a ɛho hia

Bootstrap de nsa kakraa bi a ɛho hia wiase nyinaa akwan ne nhyehyɛe ahorow a ɛho behia sɛ wuhu bere a wode redi dwuma no di dwuma, ɛkame ayɛ sɛ ne nyinaa yɛ nea ɛfa cross browser styles a wɔbɛma ayɛ nea ɛfata ho nkutoo. Momma yɛnkɔ mu.

HTML5 doctype a ɛwɔ hɔ

Bootstrap hwehwɛ sɛ wode HTML5 doctype no di dwuma. Sɛ enni hɔ a, wubehu funky bi a enni mũ styling, nanso sɛ ɛka ho a ɛnsɛ sɛ ɛde hiccups kɛse biara ba.

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

Meta tag a ɛma mmuae

Bootstrap is developed mobile first , ɔkwan a yɛfa so yɛ code yie ma mobile mfiri kan na afei yɛma afã horow no yɛ kɛse sɛnea ɛho hia denam CSS media nsɛmmisa so. Sɛnea ɛbɛyɛ a wobɛhwɛ ahu sɛ wobɛkyerɛ ase yiye na woaka kɛse ama mfiri ahorow nyinaa no, fa viewport meta tag a ɛyɛ mmuae no ka wo <head>.

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

Wubetumi ahu eyi ho nhwɛso wɔ adeyɛ mu wɔ starter template no mu .

Adaka a wɔde yɛ kɛse

Sɛ wopɛ sɛ wo sizing a ɛyɛ tẽẽ wɔ CSS mu a, yɛsesa wiase nyinaa box-sizingbotae no fi content-boxkɔ border-box. Eyi hwɛ hu paddingsɛ ɛnka element bi ntrɛwmu a etwa to a wɔabɔ ho akontaa no, nanso ebetumi de ɔhaw aba software bi a ɛto so abiɛsa te sɛ Google Maps ne Google Custom Search Engine so.

Wɔ bere a ɛntaa nsi a ɛsɛ sɛ wubu so no, fa biribi te sɛ nea edidi so yi di dwuma:

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

Sɛ wode atifi hɔ snippet no di dwuma a, nested elements—a generated content via ::beforene ka ho —ne ::afternyinaa benya nea wɔakyerɛ box-sizingama ɛno no agyapade .selector-for-some-widget.

Sua pii fa adaka no nhwɛso ne ne kɛseyɛ ho wɔ CSS Tricks .

Reboot no bio

Sɛnea ɛbɛyɛ a wobɛma cross-browser rendering atu mpɔn no, yɛde Reboot di dwuma de siesie nsɛm a ɛnhyia wɔ browser ne mfiri ahorow nyinaa so bere a yɛde adwene a ɛwɔ HTML nneɛma a wɔtaa yɛ no resets kakra ma no.

Mpɔtam

Kɔ so nya Bootstrap nkɔsoɔ ho nsɛm na fa saa nneɛma a ɛboa yi kɔ mpɔtam hɔfoɔ nkyɛn.

Kenkan na kyerɛw wo din wɔ The Official Bootstrap Blog no so .
Wo ne mfɛfo Bootstrappers a wɔwɔ IRC no nkɔmmɔ. Wɔ irc.libera.chatserver no so, wɔ #bootstrapchannel no mu.
Wobetumi ahu mmoa a wɔde bedi dwuma wɔ Stack Overflow (tagged bootstrap-4).
Ɛsɛ sɛ developers de keyword no di dwuma bootstrapwɔ packages a ɛsesa anaa ɛde ka Bootstrap dwumadie ho berɛ a wɔrekyekyɛ denam npm anaa delivery mechanisms a ɛte saa ara so ama maximum discoverability.

Wubetumi nso adi @getbootstrap akyi wɔ Twitter so anya nsɛmmɔnedi a aba foforo ne nnwom video ahorow a ɛyɛ hu.

CSPs ne SVGs a wɔde ahyɛ mu

Bootstrap afã horow pii de SVG ahorow a wɔde ahyɛ yɛn CSS no mu de ayɛ nneɛma no su daa na ɛnyɛ den wɔ browser ne mfiri ahorow so. For organizations with more strict CSP configurations , yɛakyerɛw yɛn SVGs a wɔde ahyɛ mu no nhwɛso nyinaa (a ne nyinaa yɛ nea wɔde di dwuma via background-image) sɛnea ɛbɛyɛ a wubetumi ahwɛ wo nhyehyɛe ahorow no mu yiye.

Close button (wɔde di dwuma wɔ kɔkɔbɔ ne modals mu) .
Nnaka a wɔahyɛ da ayɛ a wɔde hyɛ nneɛma mu ne radio so bɔtn ahorow
Fom a wɔde sesa nneɛma
Form validation ahyɛnsode ahorow
Menu ahorow a wɔpaw no sɛnea wopɛ
Carousel a wɔde di dwuma
Navbar a wɔde dannan nneɛma

Based on community conversation , akwan bi a wobɛfa so adi eyi ho dwuma wɔ w’ankasa codebase mu no bi ne sɛ wode agyapade a wɔagye wɔ mpɔtam hɔ besesa URL ahorow no, wubeyi mfonini ahorow no na wode mfonini ahorow a ɛwɔ line no adi dwuma (ɛnyɛ yiye wɔ afã horow no nyinaa mu), ne wo CSP no a wobɛsesa. Yɛn nyansahyɛ ne sɛ wobɛhwɛ w’ankasa ahobammɔ ho nhyehyɛe ahorow mu yiye na woasi ɔkwan a eye sen biara a wobɛfa so akɔ w’anim ho gyinae, sɛ ɛho hia a.