Irra deebi'ii jalqabi
Reboot, walitti qabama jijjiirama CSS elementii addaa faayilii tokko keessatti, kickstart Bootstrap sarara bu'uuraa bareedaa, walfakkaatu, fi salphaa irratti ijaaruuf kennuudhaaf.
Akkaataa
Reboot Normalize irratti ijaara, elementoota HTML hedduu akkaataa hamma tokko yaada qaban filattoota elementii qofa fayyadamuun kenna. Istayiliin dabalataa kan hojjetamu daree qofa waliin. Fakkeenyaaf, <table>
akkaataawwan tokko tokko sarara bu'uuraa salphaa ta'eef deebifnee jalqabna boodarra .table
, .table-bordered
, fi kanneen biroo kennina.
Qajeelfamni keenya fi sababoonni Reboot keessatti maal akka irra darbinu filachuuf kunooti:
- Gatiiwwan durtii biraawzari tokko tokko akka addaan baafannaa qaama safaramuu danda'uuf
rem
bakka s fayyadamuuf fooyyessa.em
- irraa fagaadhaa
margin-top
. Margiin dhaabbataa kufuu danda’a, kunis bu’aa hin eegamne argamsiisa. Kan caalaa barbaachisaa ta’e garuu, kallattii tokkomargin
kan moodeela sammuu salphaa ta’eedha. - Hammangaa meeshaa hunda keessatti iskeelii salphaa ta'eef, elementoonni ugguraa
rem
s'f s fayyadamuu qabumargin
. font
Ibsa qabeentota -walqabatan xiqqaa eegi ,inherit
yeroo danda'ametti fayyadami.
Jijjiiramoota CSS
v5.1.1 keessatti dabalameera
v5.1.1 waliin, @import
s keenya barbaachisu baandaawwan CSS keenya hunda irratti (, dabalatee bootstrap.css
, bootstrap-reboot.css
fi bootstrap-grid.css
hammachuudhaaf _root.scss
. Kun :root
jijjiiramoota CSS sadarkaa baandaawwan hundaatti dabalata, meeqa isaanii baandaa sana keessatti fayyadaman osoo hin ilaalin. Dhuma irratti Bootstrap 5 itti fufa jijjiiramoota CSS dabalataa yeroon dabalaman ilaali.
Fuula durtii
Qaamonni <html>
fi <body>
durtii fuula guutuu fooyya'aa ta'e kennuudhaaf fooyya'u. Caalaatti ibsuuf:
- The
box-sizing
akka addunyaatti elementii hunda irratti saagama—*::before
fi dabalatee*::after
, garaborder-box
. Kunis bal'inni elementii labsame sababa padding ykn border tiin gonkumaa akka hin caalle mirkaneessa.- Bu'uurri tokkollee ,
font-size
irratti hin labsamu<html>
, garuu16px
fudhatama (durtii biraawzari). filannoo fayyadamaa kabajuu fi mala caalaatti dhaqqabamaa ta'e mirkaneessuudhaan karaa gaaffii miidiyaatiin deebii salphaa gosa-iskeelii kennuudhaaffont-size: 1rem
irratti hojiirra oola . Durtii biraawzari kun jijjiiramaa<body>
fooyyessuudhaan irra darbuun ni danda'ama .$font-size-root
- Bu'uurri tokkollee ,
- The
<body>
akkasumas addunyaafont-family
,font-weight
,line-height
, ficolor
. Kunis booda elementoota unkaa tokko tokkoon dhaala wal hin simne qubee ittisuuf. - Nageenyaaf,
<body>
kan labse qababackground-color
, defaulting to#fff
.
Tuullaa qubee dhalootaa
Bootstrap meeshaa fi OS hunda irratti barreeffama gaarii agarsiisuuf “native font stack” ykn “system font stack” fayyadama. Qubeewwan sirnaa kunniin addatti meeshaalee har'aa yaada keessa galchuun kan qophaa'an yoo ta'u, agarsiisa fooyya'aa iskiriinii irratti, deeggarsa qubee jijjiiramaa fi kkf. Waa'ee tuullaa qubee dhalootaa barruu Smashing Magazine kana keessatti bal'inaan dubbisi .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
Hubadhu, tuullaan qubee qubeewwan imoojii waan of keessaa qabuuf, arfiileen yuunikoodii mallattoo/dingbat waliigalaa hedduun akka fakkiiwwan halluu hedduu qabanitti ni agarsiifamu. Bifti isaanii garaagarummaa qabaata, akkaataa qubee emoji dhalootaa biraawzari/waltajjii keessatti fayyadamnu irratti hundaa'uun, akkasumas akkaataa CSS kamiinuu hin miidhaman color
.
Kunis font-family
kan hojiirra oolu <body>
fi ofumaan akka addunyaatti guutummaa Bootstrap keessatti dhaala. Global jijjiiruuf , Bootstrap font-family
haaromsi fi irra deebi'ii qindeessii.$font-family-base
Jijjiiramoota CSS
Bootstrap 5 bilchaachuu itti fufeen, akkaataan baay'een jijjiiramoota CSS waliin akka mala yeroo hunda Sass irra deebi'anii qindeessuu osoo hin barbaachisin dhuunfachiisa yeroo dhugaa caalaa kennuudhaaf ni ijaarama. Malli keenya jijjiiramoota Sass madda keenyaa fudhachuun gara jijjiiramoota CSS tti jijjiiruudha. Akkasitti, jijjiiramoota CSS yoo hin fayyadamnellee, ammas humna Sass hunda qabda. Kunis ammallee adeemsa irra kan jiru yoo ta’u, guutummaatti hojiirra oolchuuf yeroo kan fudhatu ta’a.
Fakkeenyaaf, :root
jijjiiramoota CSS kana <body>
akkaataa waliigalaadhaaf ilaali:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
Qabatamaan, jijjiiramoonni sun sana booda Reboot keessatti akkasitti hojiirra oolu:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
Kan yeroo dhugaa keessatti akka barbaaddetti dhuunfachiisuuf si dandeessisu:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Mata dureewwanii fi keewwata
Qaamonni mataduree hundi—fkn, <h1>
—fi <p>
akka isaan margin-top
haqamaniif deebisanii saagamu. Mata dureewwan margin-bottom: .5rem
itti dabalamanii fi keeyyata margin-bottom: 1rem
salphaatti addaan baasuuf.
Mata duree | Fakkeenya |
---|---|
<h1></h1> |
h1. Mata duree bootstrap jedhu |
<h2></h2> |
h2. Mata duree bootstrap jedhu |
<h3></h3> |
h3. Mata duree bootstrap jedhu |
<h4></h4> |
h4. Mata duree bootstrap jedhu |
<h5></h5> |
h5. Mata duree bootstrap jedhu |
<h6></h6> |
h6. Mata duree bootstrap jedhu |
Tarreewwan
Tarreewwan hundi— <ul>
, <ol>
, fi <dl>
—isaanii margin-top
kan baafamanii fi a margin-bottom: 1rem
. Tarreewwan man'ee qaban margin-bottom
. padding-left
Akkasumas on <ul>
fi <ol>
elementoota reset gooneerra .
- Tarreewwan hundinuu margina isaanii isa gubbaa irraa haqameera
- Akkasumas margi isaanii inni gadii normalize ta'e
- Tarreewwan man'ee margaa jalaa hin qaban
- Haala kanaan bifa wal qixa ta’e qabu
- Keessattuu yeroo wantoota tarree dabalataa hordofan
- Padding bitaas reset ta'eera
- Tarree tartiiba qabu kunooti
- Wantoota tarree muraasa waliin
- Ilaalcha waliigalaa wal fakkaatu qaba
- Akkuma tarree hin tartiibamin duraanii
Akkaataa salphaa, sadarkaa ifa ta'e, fi addaan fageenya fooyya'aa ta'eef, tarreewwan ibsaa margin
s fooyya'aniiru. <dd>
s gara tti deebisuu margin-left
fi 0
itti dabaluu margin-bottom: .5rem
. <dt>
s jajjaboodhaan barreeffamaniiru .
- Tarreewwan ibsa
- Tarreen ibsa jechoota hiikuuf mijataa dha.
- Jecha
- Hiika jecha kanaaf kenname.
- Jecha walfakkaataaf hiika lammaffaa.
- Jecha biraa
- Hiika jecha biraa kanaaf.
Koodii sarara keessaa
Cuquliisa koodii sarara keessaa waliin marsi <code>
. Qabduu kofa HTML jalaa miliquu kee mirkaneessi.
<section>
akka sarara keessaatti marfamuu qaba.
For example, <code><section></code> should be wrapped as inline.
Uggura koodii
<pre>
Sararoota koodii hedduudhaaf s fayyadami . Ammas, sirriitti agarsiisuuf koodii keessatti qaree kofa kamiyyuu miliquu kee mirkaneessi. Elementiin <pre>
isaa balleessuuf fi yuunitii isaaf margin-top
fayyadamuuf deebi'ee saaga .rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Jijjiiramoota
Jijjiiramoota agarsiisuuf <var>
mallattoo fayyadami.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Galtee fayyadamaa
<kbd>
Galtee akkaataa adda addaatiin karaa kiiboordii galfamu agarsiisuuf kan fayyadami .
Sajoo gulaaluuf, dhiibi ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Bu’aa sample
Bu'aa fakkeenyaa sagantaa irraa agarsiisuuf <samp>
mallattoo fayyadami.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Gabateewwan
Gabateewwan xiqqoo akkaataa <caption>
s tti sirreeffamu, daangaawwan kuffisuu, fi text-align
guutummaatti walsimachuu mirkaneessa. Jijjiiramni dabalataa daangaa, padding, fi kanneen biroo gita waliin.table
dhufa .
Mata duree gabatee | Mata duree gabatee | Mata duree gabatee | Mata duree gabatee |
---|---|---|---|
Man'ee gabatee | Man'ee gabatee | Man'ee gabatee | Man'ee gabatee |
Man'ee gabatee | Man'ee gabatee | Man'ee gabatee | Man'ee gabatee |
Man'ee gabatee | Man'ee gabatee | Man'ee gabatee | Man'ee gabatee |
Unkaalee
Qaamonni unkaa adda addaa akkaataa bu'uuraa salphaa ta'aniif irra deebi'anii jalqabamaniiru. Jijjiiramawwan baayʼee mulʼatan keessaa muraasni kunooti:
<fieldset>
s daangaa, padding, ykn margin hin qaban kanaaf salphaatti akka marfata galtee dhuunfaa ykn garee galtee fayyadamuu ni danda'u.<legend>
s, akkuma tuuta man'ee, akkasumas akka mataduree saawwanii akka agarsiifamaniif irra deebi'amee akkaataa kaa'ameera.<label>
s akka hojiirra ooludisplay: inline-block
hayyamuuf qindaa'u.margin
<input>
s,<select>
s,<textarea>
s, fi<button>
s irra caalaa Normalize tiin ilaalama, garuu Reboot isaaniimargin
fi saagaline-height: inherit
, akkasumas saaga.<textarea>
s akka safara jijjiirraa qajeelaa yeroo baay'ee qindaa'ina fuula “cabsa”tti vertikaaliin qofa akka safaramuu danda'uuf fooyya'u.<button>
s fi<input>
elementoonni buttoncursor: pointer
yeroo qaban:not(:disabled)
.
Jijjiiramni kun, fi kanneen biroo, armaan gaditti agarsiifamaniiru.
Deeggarsa galtee guyyaa & halluu
Galteen guyyaa guutummaatti biraawzaroota hundaan, jechuunis Safariin akka hin deeggaramne yaada keessa galchaa .
Agarsiistota qaree irratti
role="button"
Reboot qaree durtii gara tti jijjiiruuf fooyya'iinsa of keessaa qaba pointer
. Qaamolee wal-qunnamsiisoo ta'uu isaanii agarsiisuuf gargaaruuf amalli kana elementoota irratti dabali. Gaheen kun <button>
elementootaaf barbaachisaa miti, kanneen cursor
jijjiirama mataa isaanii argataniif.
<span role="button" tabindex="0">Non-button element button</span>
Qaamolee adda addaa
Teessoo
Qaamni <address>
durtii biraawzari font-style
irraa italic
gara tti deebisuudhaaf fooyya'a normal
. line-height
akkasumas amma dhaalamee margin-bottom: 1rem
jira, dabalameera. <address>
s odeeffannoo quunnamtii akaakayyuu dhiyoo jiruuf (ykn qaama hojii guutuuf) dhiyeessuuf kan qophaa’aniidha. Sararoota waliin xumuruun foormaatii eegi <br>
.
1355 Market St, Suite 900
Saan Firaansiiskoo, CA 94103
P: (123) 456-7890. Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo Maqaa Guutuu
[email protected]
Ugguraa jedhu
Durtiin margin
blockquotes irratti 1em 40px
, kanaaf sana gara 0 0 1rem
waan elementoota biroo wajjin caalaatti walsimuuf deebisna.
Caqasa beekamaa, elementii caqasa ugguraa keessatti qabame.
Mata duree Madda keessatti nama beekamaa
Qaamolee sarara keessaa
Elementiin <abbr>
barruu keewwataa keessaa adda akka bahu gochuuf akkaataa bu'uuraa fudhata.
Cuunfaa
Durtii cursor
gabaabduu irratti , kanaaf elementichi irratti cuqaasuun akka waliin walqunnamuu danda'u dabarsuudhaaf sana text
gara deebisna .pointer
Bal'inaan tokko tokko
Odeeffannoo dabalataa waa'ee bal'inaan.
Dabalataanis bal'inaan
Waa'ee bal'ina isaa bal'inaan kunooti.
[hidden]
Amala HTML5
HTML5 amaloota waliigalaa haaraa maqaa[hidden]
display: none
, kan akka durtiitti akkaataa itti dabalu. Yaada PureCSS irraa liqeessuun , durtii kana irratti fooyyessinee akka tasaa akka hin irra darbine [hidden] { display: none !important; }
gargaaruuf gochuudhaan.display
<input type="text" hidden>
jQuery wal hin simne
[hidden]
jQuery's $(...).hide()
fi $(...).show()
malawwan waliin wal hin simne. Kanaafuu, yeroo ammaa kana tooftaalee biroo elementoota [hidden]
bulchuuf addatti hin raggaasifnu.display
Mul'achuu qaama tokkoo qofa jijjiiruuf, jechuun isaa display
hin fooyya'ee fi qaamni ammallee dhangala'aa galmee irratti dhiibbaa uumuu danda'a, bakka isaa .invisible
gita fayyadami .