Source

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, a folks a ɛwɔ jsDelivr de ama kwa no 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.js , ne yɛn ankasa JavaScript plugins. Fa <script>s a edidi so yi to baabi a ɛbɛn wo nkratafa no awiei, ansa na wode </body>ahyɛnsode a wɔde bɛto mu no ayɛ adwuma, na ama wɔatumi ayɛ adwuma. Ɛsɛ sɛ jQuery di kan ba, afei Popper.js, na afei yɛn JavaScript plugins no.

Yɛde jQuery's slim build di dwuma , nanso nea edi mũ no nso wɔboa.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Wopɛ sɛ wohu nneɛma bɛn na ɛda adi pefee sɛ ɛhwehwɛ jQuery, yɛn JS, ne Popper.js? 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.js ) .
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
Nnwinnade ho nsɛm ne popovers a wɔde kyerɛ ne gyinabea (ɛsan nso hwehwɛ Popper.js ) .
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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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.

Di @getbootstrap akyi wɔ Twitter so .
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.freenode.netserver 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.