Source

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

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 .<body>
  • The <body>akkasumas addunyaa font-family, line-height, fi text-align. 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

Qubeewwan weeb durtii (Helvetica Neue, Helvetica, fi Arial) Bootstrap 4 keessatti gadhiifamanii meeshaa fi OS hunda irratti barruu gaarii agarsiisuuf “tuullaa qubee dhalootaan” bakka bu’aniiru. Waa'ee tuullaa qubee dhalootaa barruu Smashing Magazine kana keessatti bal'inaan dubbisi .

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

Mata dureewwanii fi keewwata

Qaamonni mataduree hundi—fkn, <h1>—fi <p>akka isaan margin-tophaqamaniif deebisanii saagamu. Mata dureewwan margin-bottom: .5remdabalataa fi keewwata margin-bottom: 1remaddaan fageenya salphaa ta'eef.

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 haqaman fi a margin-bottom: 1rem. Tarreewwan man'ee qaban margin-bottom.

  • Lorem ipsum dolor taa'aa amet
  • Consectetur adipiscing elit jedhamuun beekama
  • Lakkoofsa guutuu molestie lorem at mass
  • Faasilisis kan pretium nisl aliquet keessatti argamu
  • Nulla volutpat alikiyaam velit jedhamuun beekama
    • Phasellus iaculis neque jedhamuun beekama
    • Purus sodales ultricies jedhamuun beekama
    • Vestibulum laoreet porttiitor sem
    • Ak tristique libero volutpat irratti
  • Faucibus porta lacus fringilla vel jedhamuun beekama
  • Aenean taa'u amet erat nunc
  • Eget porttitor lorem jedhamtu
  1. Lorem ipsum dolor taa'aa amet
  2. Consectetur adipiscing elit jedhamuun beekama
  3. Lakkoofsa guutuu molestie lorem at mass
  4. Faasilisis kan pretium nisl aliquet keessatti argamu
  5. Nulla volutpat alikiyaam velit jedhamuun beekama
  6. Faucibus porta lacus fringilla vel jedhamuun beekama
  7. Aenean taa'u amet erat nunc
  8. Eget porttitor lorem jedhamtu

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.
Euismod jedhama
Vestibulum id ligula porta felis euismod sanyiin eget laasiiniyaa odio sem.
Donec id elit non mi porta gravida yeroo eget metus jedhamutti.
Malesuada portaa jedhama
Etiam porta sem malesuada guddaa mollis euismod jedhamuun beekama.

Barruu dursee foormaatii ta'e

Elementiin <pre>isaa balleessuuf fi yuunitii isaaf margin-topfayyadamuuf deebi'ee saaga .remmargin-bottom

.fakkeenya-qaama { .
  margin-gadi: 1rem;
} .

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.

Jijjiiramni kun, fi kanneen biroo, armaan gaditti agarsiifamaniiru.

Fakkeenya sheekkoo

100 ta’a

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

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.

Mata duree Madda keessatti nama beekamaa

Qaamolee sarara keessaa

Elementiin <abbr>barruu keewwataa keessaa adda akka bahu gochuuf akkaataa bu'uuraa fudhata.

Nulla attr vitae elit libero, afaan oromoo kan afaan oromoo fi hiika isaa pdf.

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 dabalamu dabalata. Yaada PureCSS irraa liqeessuun , durtii kana irratti fooyyessinee akka tasaa akka hin irra darbine [hidden] { display: none !important; }gargaaruuf gochuudhaan. displayOsoo [hidden]dhalootaan IE10n hin deeggaramne, labsiin ifa ta'e CSS keenya keessatti rakkoo sana irra darba.

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