Fi ase ne Bootstrap

Bootstrap yɛ ahoɔden, feature-packed frontend adwinnade. Si biribiara—efi nhwɛsode so kosi nea wɔyɛ so—wɔ simma kakraa bi mu.

Wɔ kratafa yi so

Mfiase ntɛm ara

Fi ase denam Bootstrap CSS ne JavaScript a wɔasiesie no sɛ wɔyɛ no a wode bɛka ho denam CDN so a enhia sɛ wosi anammɔn biara. Hwɛ no wɔ adeyɛ mu ne saa Bootstrap CodePen demo yi .

Yɛ index.htmlfael foforo wɔ wo project root no mu. Fa <meta name="viewport">tag no nso ka ho na ama woanya suban a ɛfata wɔ mobile mfiri ahorow mu.

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

Fa Bootstrap no CSS ne JS ka ho. Fa <link>tag no <head>to yɛn CSS no mu, ne <script>tag no ma yɛn JavaScript bundle (a Popper ka ho ma gyinabea a ɛwɔ dropdowns, poppers, ne adwinnade ho nsɛm) ansa na woatoto mu </body>. Sua pii fa yɛn CDN link ahorow no ho .

<!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-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Wubetumi nso de Popper ne yɛn JS aka ho wɔ ɔkwan soronko so. Sɛ woanyɛ nhyehyɛe sɛ wode dropdowns, popovers, anaa adwinnade ho nsɛm bedi dwuma a, sie kilobytes bi so denam Popper a womfa nka ho no so.

<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-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Hello, wiase! Bue krataafa no wɔ wo browser a wopɛ no mu na wubehu wo Bootstrapped krataafa no. Afei wubetumi afi ase de Bootstrap asi dan denam w'ankasa nhyehyɛe a wobɛbɔ , nneɛma du du pii a wode bɛka ho , ne yɛn nhwɛso ahorow a ɛyɛ aban de no a wode bedi dwuma no so .

CDN nkitahodi ahorow

Sɛ́ nhwɛso no, yɛn CDN link ahorow titiriw no ni.

Nkyerɛmu	URL a ɛwɔ hɔ
CSS a ɛwɔ hɔ no	`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`

Wubetumi nso de CDN no agye yɛn adan foforo biara a wɔakyerɛw wɔ Nsɛm a Ɛwɔ Mu krataafa no so .

Anamɔn a edi hɔ

Kenkan kakra fa wiase nyinaa nneɛma a atwa yɛn ho ahyia nhyehyɛe ahorow bi a ɛho hia a Bootstrap de di dwuma ho.
Kenkan nea ɛka Bootstrap ho wɔ yɛn nsɛm a ɛwɔ mu no fã ne nneɛma a ɛhia JavaScript a wɔahyehyɛ wɔ ase ha no ho asɛm.
Wohia tumi kakra a ɛboro so? Susuw ho sɛ wode Bootstrap besi denam source fael ahorow no a wode bɛka ho denam package manager so .
Worehwehwɛ sɛ wode Bootstrap bedi dwuma sɛ module a <script type="module">? Yɛsrɛ wo hwɛ yɛn a yɛde Bootstrap di dwuma sɛ module ɔfã no.

JS afã horow

Wopɛ sɛ wohu nneɛma bɛn na ɛhia yɛn JavaScript ne Popper no pefee? Klik show components link a ɛwɔ ase hɔ no so. Sɛ wo nnim koraa wɔ kratafa nhyehyɛe no nyinaa ho 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 ne Offcanvas plugins no mu de adi dwuma wɔ nneyɛe a ɛma mmuae
Navs ne Tab plugin no ma toggling nsɛm a ɛwɔ mu no
Offcanvases a wɔde kyerɛ, gyinabea, ne nhoma mmobɔwee suban
Scrollspy ma scroll suban ne akwantuo ho nsɛm foforɔ
Toasts a wɔde kyerɛ na wɔtow gu
Nnwinnade ho nsɛm ne popovers a wɔde kyerɛ ne gyinabea (ɛsan nso hwehwɛ Popper ) .

Wiase nyinaa nsɛm a ɛho hia

Bootstrap de nsa kakraa bi a ɛho hia wiase nyinaa ntadehyɛ ne nhyehyɛe ahorow di dwuma, a ɛkame ayɛ sɛ ne nyinaa yɛ nea wɔde kyerɛ 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 ne styling bi a enni mũ.

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

Wubetumi ahu eyi ho nhwɛso wɔ adeyɛ mu wɔ mfiase ntɛm no mu 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ɛ nobox-sizing ama ɛno no agyapade .selector-for-some-widget.

Sua pii fa box model ne sizing ho wɔ CSS Tricks .

Reboot no bio

Sɛ wopɛ sɛ wunya cross-browser rendering no yiye a, yɛde Reboot di dwuma 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 mu no so .
Bisa na hwehwɛ yɛn GitHub Nkɔmmɔbɔ no mu ahorow no mu .
Wo ne mfɛfo Bootstrappers a wɔwɔ IRC no nkɔmmɔ. Wɔ irc.libera.chatserver no so no, wɔ#bootstrap channel no mu.
Wobetumi ahu mmoa a wɔde bedi dwuma wɔ Stack Overflow (tagged bootstrap-5).
Ɛ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 wɔatumi ahunu no kɛseɛ.

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