Karatasi ya Marejeleo ya Bootstrap
Marejeleo ya Bootstrap 5.3 yanayoweza kutafutwa na kuchapishwa — gridi, nafasi, uchapaji, rangi, vifaa vya flex, vitufe, fomu na vipengele. Bila malipo.
Grid na muundo
12<div class="container">
Container ya upana usiobadilika inayojibu
<div class="container-fluid">
Container ya upana kamili kwenye kila breakpoint
<div class="container-md">
100% upana hadi breakpoint ya md
<div class="row">
Safu ya grid, hushikilia columns
<div class="col">
Column ya kiotomatiki ya upana sawa
<div class="col-6">
Inaenea columns 6 kati ya 12
<div class="col-md-4">
Columns 4 kutoka breakpoint ya md kwenda juu
<div class="col-auto">
Column iliyopimwa kwa yaliyomo yake
<div class="offset-md-2">
Sukuma column columns 2 kulia
<div class="row g-3">
Nafasi ya gutter kati ya columns
<div class="row row-cols-3">
Lazimisha columns 3 sawa kwa safu
<div class="order-2">
Panga upya column ya flex/grid
Huduma za nafasi
12m-3
Margin pande zote (kipimo 0-5)
mt-2
Margin juu
mx-auto
Margins za usawa za kiotomatiki kuweka katikati
p-4
Padding pande zote
py-2
Padding ya wima (juu na chini)
ms-3
Margin ya mwanzo (kushoto katika LTR, inayojua RTL)
me-3
Margin ya mwisho (kulia katika LTR, inayojua RTL)
ps-2
Padding ya mwanzo, inayojua RTL
pe-2
Padding ya mwisho, inayojua RTL
gap-3
Pengo kati ya vitu vya flex/grid
m-n1
Margin hasi
p-md-5
Padding inayojibu kutoka md kwenda juu
Typografia
14<h1>..<h6>
Viwango vya vichwa vyenye mtindo chaguo-msingi
<p class="display-1">
Kichwa kikubwa cha display (display-1..6)
<p class="lead">
Aya inayoongoza inayojitokeza
fw-bold
Uzito wa fonti wa bold
fw-semibold
Uzito wa fonti wa semibold
fst-italic
Mtindo wa fonti wa italiki
text-center
Pangilia maandishi katikati
text-start
Pangilia maandishi mwanzoni, inayojua RTL
text-end
Pangilia maandishi mwishoni, inayojua RTL
text-truncate
Kata kufurika kwa ellipsis
text-uppercase
Badilisha maandishi kuwa herufi kubwa
fs-1
Ukubwa wa fonti unaojibu (fs-1..6)
lh-base
Urefu wa mstari wa msingi (lh-1, lh-sm, lh-lg)
font-monospace
Familia ya fonti ya monospace
Rangi na mandharinyuma
10text-primary
Rangi ya maandishi ya msingi
bg-primary
Rangi ya mandharinyuma ya msingi
bg-primary-subtle
Rangi nyepesi ya mandharinyuma ya msingi
text-primary-emphasis
Maandishi ya msingi yenye msisitizo, yanayojua mandhari
text-bg-primary
Mandharinyuma ya msingi yenye maandishi ya contrast kiotomatiki
link-primary
Msaidizi wa kiungo chenye rangi
bg-opacity-50
Tumia opacity ya 50% ya mandharinyuma
text-body-secondary
Maandishi ya mwili ya sekondari yaliyofifishwa
text-body-emphasis
Maandishi ya mwili yenye msisitizo wa juu
border-primary-subtle
Rangi nyepesi ya mpaka wa msingi
Huduma za flex
10d-flex
Tengeneza flex container
flex-row
Panga vitu kwenye safu
flex-column
Panga vitu kwenye column
justify-content-between
Tenga vitu kando ya mhimili mkuu
align-items-center
Weka vitu katikati kwenye mhimili wa kuvuka
flex-wrap
Ruhusu vipengele kujikunja
flex-grow-1
Ruhusu kitu kikue kujaza nafasi
flex-fill
Lazimisha upana wa unyumbufu sawa
align-self-end
Pangilia kitu kimoja mwishoni
flex-md-row
Mwelekeo wa flex unaojibu kutoka md
Display na nafasi
12d-none
Ficha kipengele
d-md-block
Onyesha kama block kutoka breakpoint ya md
position-relative
Uwekaji wa kiasi
position-absolute
Uwekaji kamili
position-fixed
Uwekaji usiobadilika
position-sticky
Uwekaji wa kunata
top-0 start-0
Bandika juu-kushoto, inayojua RTL
translate-middle
Weka katikati kupitia transform translate
fixed-top
Bandika kipengele juu ya viewport
sticky-top
Nata juu wakati wa scroll
z-3
Weka z-index (z-0..3)
invisible
Ficha lakini hifadhi nafasi ya muundo
Upimaji na mipaka
12w-100
Upana 100% wa mzazi
w-50
Upana 50% wa mzazi
h-100
Urefu 100% wa mzazi
mw-100
Upana wa juu 100%
vh-100
Urefu 100% wa viewport
border
Ongeza mpaka chaguo-msingi pande zote
border-0
Ondoa mipaka yote
border-primary
Pa rangi mpaka
rounded
Border-radius chaguo-msingi
rounded-pill
Umbo la kidonge lililozungushwa kabisa
rounded-circle
Border-radius ya mduara
shadow-sm
Kivuli kidogo cha boksi (shadow, shadow-lg)
Vitufe
9<button class="btn btn-primary">
Kitufe cha msingi kigumu
<button class="btn btn-outline-primary">
Toleo la kitufe la mstari wa nje
<button class="btn btn-lg">
Kitufe kikubwa (pia btn-sm)
<button class="btn btn-link">
Kitufe kilichotengenezwa kama kiungo
<button class="btn-close">
Kitufe cha jumla cha kufunga (×)
<button class="btn disabled">
Hali ya kitufe kilichozimwa
<button class="btn active">
Hali ya kitufe kinachotumika
<div class="d-grid"><button class="btn">
Kitufe cha block cha upana kamili kupitia d-grid
<div class="btn-group">
Panga vitufe pamoja
Fomu
11<input class="form-control">
Ingizo la maandishi lililotengenezwa
<label class="form-label">
Lebo ya sehemu ya fomu
<select class="form-select">
Dropdown ya select iliyotengenezwa
<div class="form-check">
Kifuniko cha checkbox/radio
<input class="form-check-input">
Ingizo la checkbox au radio lililotengenezwa
<div class="form-check form-switch">
Kipengele cha swichi ya kugeuza
<input class="form-control-lg">
Ingizo kubwa (pia form-control-sm)
<div class="input-group">
Panga ingizo na add-ons
is-invalid
Hali ya uthibitisho batili (is-valid)
<div class="form-floating">
Ingizo lenye lebo inayoelea
col-form-label
Lebo iliyopangwa kwa fomu za usawa
Vipengele
14<div class="card">
Kadi ya yaliyomo yenye unyumbufu
<nav class="navbar navbar-expand-lg">
Upau wa urambazaji unaojibu
data-bs-toggle="modal" data-bs-target="#m"
Sababisha kidirisha cha modal
data-bs-toggle="dropdown"
Geuza menyu ya dropdown
data-bs-toggle="collapse"
Geuza kipengele kinachoweza kukunjwa
<div class="accordion">
Paneli zinazoweza kukunjwa zilizopangwa
<div class="alert alert-dismissible">
Ujumbe wa tahadhari unaoweza kuondolewa
<span class="badge text-bg-primary">
Beji ndogo ya hesabu au lebo
<ul class="list-group">
Orodha ya vitu iliyotengenezwa
<ul class="nav nav-tabs">
Urambazaji wa tabs
<div class="toast">
Arifa nyepesi ya toast
<div class="offcanvas">
Paneli ya kando ya off-canvas
<div class="spinner-border">
Kionyeshi cha spinner cha kupakia
<nav><ul class="pagination">
Viungo vya urambazaji vya kurasa
Wasaidizi na mengineyo
11data-bs-theme="dark"
Wezesha hali ya rangi giza kwenye wigo
<div class="ratio ratio-16x9">
Boksi la uwiano wa mwonekano linalojibu
visually-hidden
Ficha kwa macho, hifadhi kwa wasomaji wa skrini
visually-hidden-focusable
Imefichwa hadi ilengwe (skip links)
stretched-link
Fanya mzazi kubonyezeka kabisa
clearfix
Safisha watoto walioelea
<div class="vstack gap-2">
Rundo la wima la vipengele
<div class="hstack gap-2">
Rundo la usawa la vipengele
<a class="icon-link">
Kiungo kilichopangwa na ikoni ya inline
<div class="progress">
Container ya upau wa maendeleo
<nav class="breadcrumb">
Njia ya urambazaji ya breadcrumb
Hakuna kipengele kinacholingana na “:q”.
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.