Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
in English

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.

Wɔ kratafa yi so

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ɔ

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

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

JS

Yɛn afã horow no pii hwehwɛ sɛ yɛde JavaScript di dwuma na ama ayɛ adwuma. Titiriw no, wɔhwehwɛ yɛn ankasa JavaScript plugins ne Popper . Fa s a edidi so yi mu biako to<script> baabi a ɛbɛn wo nkratafa no awiei, wɔ </body>tag a wɔde wie no anim pɛɛ, na ama wɔatumi ayɛ adwuma.

Saka

Fa Bootstrap JavaScript plugin ne dependency biara ka yɛn bundle abien no mu biako ho. Ne nyinaa bootstrap.bundle.jsne Popperbootstrap.bundle.min.js ka ho ma yɛn nnwinnade ne popovers. 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/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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/@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 ahorow

Sɛ wode <script type="module">, yɛsrɛ wo hwɛ yɛn a yɛde Bootstrap di dwuma sɛ module ɔfã no.

Nneɛma a ɛwom

Wopɛ sɛ wohu nneɛma a ɛwom no pefee sɛ ɛhwehwɛ yɛn JavaScript ne Popper no? 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 plugin no mu de adi dwuma wɔ mmuae suban mu
  • Offcanvases a wɔde kyerɛ, gyinabea, ne nhoma mmobɔwee suban
  • 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 ) .
  • Scrollspy ma scroll suban ne akwantuo ho nsɛm foforɔ

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

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

Sɛ wopɛ anammɔn a edi hɔ a, 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">

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-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 ama nsɛmmɔnedi ne nnwom video ahorow a ɛyɛ hu a aba foforo.