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.

Fuula kana irratti

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 rembakka 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 tokko marginkan moodeela sammuu salphaa ta’eedha.
Hammangaa meeshaa hunda keessatti iskeelii salphaa ta'eef, elementoonni ugguraa rems'f s fayyadamuu qabu margin.
fontIbsa qabeentota -walqabatan xiqqaa eegi , inherityeroo danda'ametti fayyadami.

Jijjiiramoota CSS

v5.1.1 keessatti dabalameera

v5.1.1 waliin, @imports keenya barbaachisu baandaawwan CSS keenya hunda irratti (, dabalatee bootstrap.css, bootstrap-reboot.cssfi bootstrap-grid.csshammachuudhaaf _root.scss. Kun :rootjijjiiramoota 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-sizingakka addunyaatti elementii hunda irratti saagama— *::beforefi dabalatee *::after, gara border-box. Kunis bal'inni elementii labsame sababa padding ykn border tiin gonkumaa akka hin caalle mirkaneessa.
- Bu'uurri tokkollee , font-sizeirratti hin labsamu <html>, garuu 16pxfudhatama (durtii biraawzari). filannoo fayyadamaa kabajuu fi mala caalaatti dhaqqabamaa ta'e mirkaneessuudhaan karaa gaaffii miidiyaatiin deebii salphaa gosa-iskeelii kennuudhaaf font-size: 1remirratti hojiirra oola . Durtii biraawzari kun jijjiiramaa <body>fooyyessuudhaan irra darbuun ni danda'ama .$font-size-root
The <body>akkasumas addunyaa font-family, font-weight, line-height, fi color. Kunis booda elementoota unkaa tokko tokkoon dhaala wal hin simne qubee ittisuuf.
Nageenyaaf, <body>kan labse qaba background-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-familykan hojiirra oolu <body>fi ofumaan akka addunyaatti guutummaa Bootstrap keessatti dhaala. Global jijjiiruuf , Bootstrap font-familyhaaromsi 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, :rootjijjiiramoota 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-tophaqamaniif deebisanii saagamu. Mata dureewwan margin-bottom: .5remitti dabalamanii fi keeyyata margin-bottom: 1remsalphaatti 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-topkan baafamanii fi a margin-bottom: 1rem. Tarreewwan man'ee qaban margin-bottom. padding-leftAkkasumas 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 margins fooyya'aniiru. <dd>s gara tti deebisuu margin-leftfi 0itti 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.

Fakkeenyaaf, <section>akka sarara keessaatti marfamuu qaba.

For example, <code>&lt;section&gt;</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-topfayyadamuuf deebi'ee saaga .remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Jijjiiramoota

Jijjiiramoota agarsiisuuf <var>mallattoo fayyadami.

y = m x + b jedhamuun beekama

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

Galmeewwan jijjiiruuf, cdmaqaa galmee itti aansuun barreessi.
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.

Barreeffamni kun akka bu’aa fakkeenyaa sagantaa kompiitaraa irraa argamutti akka ilaalamu yaadameeti.

<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-alignguutummaatti walsimachuu mirkaneessa. Jijjiiramni dabalataa daangaa, padding, fi kanneen biroo gita waliin.table dhufa .

Kun gabatee fakkeenyaati, kunis qabiyyee ibsuuf mata duree isaati.
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 oolu display: inline-blockhayyamuuf qindaa'u.margin
<input>s, <select>s, <textarea>s, fi <button>s irra caalaa Normalize tiin ilaalama, garuu Reboot isaanii marginfi saaga line-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 button cursor: pointeryeroo qaban :not(:disabled).

Jijjiiramni kun, fi kanneen biroo, armaan gaditti agarsiifamaniiru.

Fakkeenya sheekkoo

Fakkeenya galtee

Fakkeenya email

Fakkeenya bilbilaa

Fakkeenya url

Fakkeenya lakkoofsa

Fakkeenya barbaaduu

Fakkeenya daangaa

Fakkeenya galtee faayilii

Fakkeenya filadhu

Sanduuqa filannoo kana mallatteessi

Filannoon tokko kana fi sana Filannoon lama waan biraa kan akkasumas super dheeraa ta'ee marfamuu to'annoo unkaa faashinii kanaa agarsiisuuf. Filannoon sadii hanqifamee jira

Fakkeenya naannoo barreeffamaa

Fakkeenya guyyaa

Fakkeenya yeroo

Fakkeenya jecha icciitii

Fakkeenya datetime-local

Fakkeenya torban

Fakkeenya ji'a

Fakkeenya halluu

Bu’aa fakkeenyaa 100 ta’a

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 cursorjijjiirama mataa isaanii argataniif.

Qabduu elementii qaree hin taane

<span role="button" tabindex="0">Non-button element button</span>

Qaamolee adda addaa

Teessoo

Qaamni <address>durtii biraawzari font-styleirraa italicgara tti deebisuudhaaf fooyya'a normal. line-heightakkasumas amma dhaalamee margin-bottom: 1remjira, dabalameera. <address>s odeeffannoo quunnamtii akaakayyuu dhiyoo jiruuf (ykn qaama hojii guutuuf) dhiyeessuuf kan qophaa’aniidha. Sararoota waliin xumuruun foormaatii eegi <br>.

Twitter, Inc.
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 marginblockquotes irratti 1em 40px, kanaaf sana gara 0 0 1remwaan 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.

Qaama gabaabduu HTML .

Cuunfaa

Durtii cursorgabaabduu irratti , kanaaf elementichi irratti cuqaasuun akka waliin walqunnamuu danda'u dabarsuudhaaf sana textgara 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 displayhin fooyya'ee fi qaamni ammallee dhangala'aa galmee irratti dhiibbaa uumuu danda'a, bakka isaa .invisiblegita fayyadami .

Irra deebi'ii jalqabi

Akkaataa

Jijjiiramoota CSS

Fuula durtii

Tuullaa qubee dhalootaa

Jijjiiramoota CSS

Mata dureewwanii fi keewwata

Tarreewwan

Koodii sarara keessaa

Uggura koodii

Jijjiiramoota

Galtee fayyadamaa

Bu’aa sample

Gabateewwan

Unkaalee

Deeggarsa galtee guyyaa & halluu

Agarsiistota qaree irratti

Qaamolee adda addaa

Teessoo

Ugguraa jedhu

Qaamolee sarara keessaa

Cuunfaa

[hidden]Amala HTML5

jQuery wal hin simne

`[hidden]`Amala HTML5