ዳግማይ ምጅማር

ሪቦት፡ እኩብ ባእታ-ፍሉይ CSS ለውጢ ኣብ ሓደ ፋይል፡ kickstart Bootstrap ንምህናጽ ውቁብ፡ ቅኑዕን ቀሊልን መበገሲ መስመር ንምሃብ።

ቅረብ

Reboot ኣብ Normalize ይሃንጽ፣ ንብዙሓት HTML ባእታታት ብመጠኑ ርእይቶ ዘለዎም ቅዲታት ብመምረጺ ባእታታት ጥራይ ብምጥቃም ይህብ። ተወሳኺ ቅዲ ምስ ክፍልታት ጥራይ እዩ ዝግበር። ንኣብነት ገለ <table>ቅዲታት ንዝቐለለ መበገሲ መስመር ዳግማይ ንጅምር ድሒርና ድማ .table, .table-bordered, ካልእን ንህብ።

ኣብ ሪቦት እንታይ ክትግለጽ ከም ዘለና ዝመረጽናሉ መምርሕታትናን ምኽንያታትናን ኣብዚ ኣለዉ፤

remገለ ናይ መርበብ ሓበሬታ ነባሪ ክብርታት ኣብ ክንዲ ems ንዝተመጣጠነ ርሕቀት ኣካላት s ንምጥቃም ኣዘምን ።
ካብ margin-top. ቀጥታዊ ወሰን ክፈርስ ይኽእል እዩ፣ እዚ ድማ ዘይተጸበናዮ ውጽኢት ከስዕብ ይኽእል። ካብኡ ዝዓቢ ግን፡ ሓደ ኣንፈት ናይ marginዝቐለለ ኣእምሮኣዊ ሞዴል እዩ።
ንዝቐለለ ምዕባይ ኣብ መላእ ዓቐናት መሳርሒ፡ ብሎክ ባእታታት rems ን margins ክጥቀሙ ይግባእ።
ኣዋጃት ናይ font-ተዛመድቲ ንብረታት ኣብ ዝተሓተ ደረጃ ምሓዝ፣ inheritብዝተኻእለ መጠን ተጠቐም።

ገጽ ነባሪ ይኸውን

እቶም <html>and <body>ባእታታት ዝሓሸ ገጽ-ስፍሕ ዝበለ ነባሪ ንምሃብ ይመሓየሹ። ብዝያዳ ብፍሉይ፤

እቲ box-sizingብዓለም ደረጃ ኣብ ነፍሲ ወከፍ ባእታ ተቐሚጡ ኣሎ-ሓዊስካን *::before፣ *::afterናብ border-box. እዚ ድማ ብሰንኪ ፓዲንግ ወይ ዶብ ካብቲ ዝተኣወጀ ስፍሓት ባእታ ፈጺሙ ከምዘይሓልፍ የረጋግጽ።
font-sizeኣብቲ ፣ ዝኾነ መሰረት ኣይእወጅን <html>፣ ግን 16pxይግመት (ናይ መርበብ ሓበሬታ ነባሪ)። ኣብ ልዕሊ እቲ ንቐሊል ምላሽ ዝህብ ዓይነት-ምዕባይ ብመንገዲ ናይ ሚድያ ሕቶታት ኣብ ርእሲኡ ምርጫታት ተጠቀምቲ ብምኽባርን ዝያዳ ተበጻሒ ኣገባብ ብምርግጋጽን font-size: 1remይትግበር ።<body>
እቲ <body>ውን ዓለማዊ font-family, line-height, ከምኡውን text-align. እዚ ድሒሩ ብገለ ቅርጺ ባእታታት ይውረስ ምእንቲ ዘይምስምማዕ ቅርጺ ፊደላት ይከላኸል።
ንውሕስነት፡ እቲ <body>has a declared background-color, defaulting to #fff.

ተወላዲ ቅርጺ ፊደል ቁጽሪ

እቶም ነባሪ ቅርጽታት መርበብ ሓበሬታ (Helvetica Neue, Helvetica, and Arial) ኣብ Bootstrap 4 ተደርብዮም ብ“native font stack” ተተኪኦም ኣብ ነፍሲ ወከፍ መሳርሒን OSን ንዝበለጸ ጽሑፍ ምቕራብ። ብዛዕባ ተወላዲ ቅርጺ ፊደላት ኣብዚ ጽሑፍ መጽሔት ስማሽን ዝያዳ ኣንብብ ።

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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;

ኣስተውዕል፡ እቲ ቁጽሪ ቅርጺ ፊደላት ኢሞጂ ቅርጺ ፊደላት ስለዘጠቓልል፡ ብዙሓት ልሙዳት ምልክት/ዲንግባት ዩኒኮድ ፊደላት ከም ብዙሕ ሕብሪ ዘለዎም ስእላዊ ስእልታት ክቐርቡ እዮም። መልክዖም ከከምቲ ኣብቲ ናይቲ መርበብ ሓበሬታ/መድረኽ ተወላዲ ኢሞጂ ቅርጺ ዝጥቀመሉ ቅዲ ክፈላለ እዩ፡ ብዝኾነ colorቅዲ CSS ድማ ኣይክጽለዉን እዮም።

እዚ ኣብቲን ብኣውቶማቲክ ብዓለም ደረጃ ኣብ ምሉእ ቡትስትራፕ ይውረስን font-family። <body>ነቲ global ንምቕያር font-family፣ $font-family-baseBootstrap ኣዘምንን ዳግማይ ኣጠቓልልን።

ኣርእስትታትን ሕጡበ-ጽሑፋትን

ኩሎም ናይ ርእሲ ባእታታት-ንኣብነት <h1>፡ —እሞ ድማ ናቶም ንኽእለ <p>ዳግማይ ይስራዕ ። margin-topኣርእስታትን ንቐሊል ርሕቀት ዝኸውን margin-bottom: .5remሕጡበ-ጽሑፋትን ተወሰኹ ።margin-bottom: 1rem

ኣርእስቲ	ኣብነት
`<h1></h1>`	h1. ቡትስትራፕ ዝብል ርእሲ
`<h2></h2>`	h2. ቡትስትራፕ ዝብል ርእሲ
`<h3></h3>`	h3. ቡትስትራፕ ዝብል ርእሲ
`<h4></h4>`	h4. ቡትስትራፕ ዝብል ርእሲ
`<h5></h5>`	h5. ቡትስትራፕ ዝብል ርእሲ
`<h6></h6>`	h6. ቡትስትራፕ ዝብል ርእሲ

ዝርዝራት

ኩሎም ዝርዝር— <ul>, <ol>, ከምኡውን <dl>—ናቶም ተኣልዮምን margin-topሓደ margin-bottom: 1rem. ዝተሰቕሉ ዝርዝር ዝኾነ margin-bottom.

ኩሎም ዝርዝራት ላዕለዋይ ወሰንኦም ተኣልዮም ኣለዉ።
ታሕተዋይ ወሰኖም ድማ ንቡር ኮይኑ
ዝተሰፍሩ ዝርዝር ታሕተዋይ ወሰን የብሎምን።
- በዚ መንገዲ እዚ ዝያዳ ምዕሩይ መልክዕ ኣለዎም።
- ብፍላይ ዝያዳ ዝርዝር ነገራት ምስ ዝስዕብ
እቲ ጸጋማይ መሸፈኒ እውን ዳግማይ ተሰሪዑ ኣሎ።

ስርዓት ዘለዎ ዝርዝር ኣብዚ ኣሎ።
ምስ ውሑዳት ዝርዝር ነገራት
ሓደ ዓይነት ሓፈሻዊ መልክዕ ኣለዎ።
ከምቲ ዝሓለፈ ዘይተሰርዐ ዝርዝር

ንዝቐለለ ቅዲ፡ ንጹር ስርዓተ-መሰረትን ዝሓሸ ርሕቀትን፡ ዝርዝር መግለጺታት ዝተመሓየሹ margins ኣለዎም። <dd>s margin-leftናብ ዳግማይ 0ምትካልን ምውሳኽን margin-bottom: .5rem. <dt>s ብድሙቕ ተጻሒፉ ኣሎ .

መግለጺ ዝርዝር: ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።
ቃል: ትርጉም ናይቲ ቃል።; ካልኣይ ትርጉም ናይ ተመሳሳሊ ቃል።
ካልእ ቃል: ትርጉም ናይዚ ካልእ ቃል።

ቅድሚ ሕጂ ዝተቐረጸ ጽሑፍ

እቲ <pre>ባእታ ናቱ ንምእላይን ን ናቱ ኣሃዱታት margin-topንምጥቃምን ዳግማይ ይስራዕ ።remmargin-bottom

.ኣብነት-ባእታ { .
  ወሰን-ታሕተዋይ: 1rem;
} ።

ሰደቓታት

ሰደቓታት ቁሩብ ምስ ቅዲ <caption>s ይስተኻኸሉ፣ ዶባት ይፈርሱ፣ ኣብ text-alignምሉእ ድማ ቅኑዕነት የረጋግጹ። ተወሳኺ ለውጢ ንዶባት፡ መሸፈኒን ካልእን ምስቲ ክፍሊ .tableይመጽእ .

እዚ ኣብነት ዝኾነ ሰደቓ እዩ፣ እዚ ድማ ትሕዝቶኡ ንምግላጽ መግለፂኡ እዩ።
ኣርእስቲ ሰደቓ	ኣርእስቲ ሰደቓ	ኣርእስቲ ሰደቓ	ኣርእስቲ ሰደቓ
ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ
ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ
ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ

ቅጥዕታት

ዝተፈላለዩ ናይ ቅጥዒ ባእታታት ንዝቐለሉ መሰረታዊ ቅዲታት ዳግማይ ተጀሚሮም ኣለዉ። ገለ ካብቶም ኣዝዮም ጐሊሖም ዝረኣዩ ለውጥታት እነሆ፤

<fieldset>s ዶባት፣ መሸፈኒ፣ ወይ ወሰን ስለዘይብሎም ብቐሊሉ ከም መጠቕለሊ ንውልቀ እታዎታት ወይ ንጉጅለ እታዎታት ክጥቀሙ ይኽእሉ።
<legend>s ከም ስብስባት ሜዳታት እውን ከም ኣርእስቲ ዓይነታት ንኽረኣዩ ዳግማይ ቅዲ ተገይሩሎም ኣሎ።
<label>s ንኽትግበር display: inline-blockንኽፍቀድ marginናብ ተቐሚጦም ኣለዉ።
<input>s, <select>s, <textarea>s, and <button>s ዝበዝሑ ብ Normalize እዮም ዝድህሰሱ፣ Reboot ግን ናቶምን ይሰርዖምን የወግድ margin፣ line-height: inheritንሱ እውን።
<textarea>s ብኣግማድ ምቕያር ዓቐን መብዛሕትኡ ግዜ ንኣቀማምጣ ገጽ “ዝሰብሮ” ስለዝኾነ ብቐጥታ ዓቐኑ ጥራይ ክኸውን ይቕየር።
<button>sን <input>መጠወቒን ባእታታት cursor: pointerመዓስ ኣለዎም :not(:disabled).

እዚ ለውጥታትን ካልእን ኣብ ታሕቲ ተገሊጹ ኣሎ።

ኣብ መጠወቒታት ዝርከቡ ጠቋሚታት

role="button"ዳግማይ ምጅማር ነቲ ነባሪ መመልከቲ ናብ ንምቕያር ዝሕግዝ ምምሕያሽ የጠቓልል pointer። ባእታታት መስተጋብራዊ ምዃኖም ንምምልካት ንምሕጋዝ ነዚ ባህሪ ኣብ ባእታታት ወስኸሉ። እዚ ተራ እዚ ንባእታታት ኣድላዪ ኣይኮነን <button>፣ ንሳቶም ድማ ናይ ገዛእ ርእሶም cursorለውጢ ይረኽቡ።

ዘይመጠወቒ ባእታ መጠወቒ

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

ዝተፈላለዩ ባእታታት

አድራሻ

እቲ ባእታ ነቲ ናይ መርበብ ሓበሬታ ነባሪ ካብ ናብ <address>ዳግማይ ንምስራዕ ይመሓየሽ ። ሕጂ እውን ተወሪሱ ኣሎ፣ ተወሰኸ ድማ ኣሎ። s ንዝቐረበ ኣቦሓጎ (ወይ ምሉእ ኣካል ስራሕ) ርክብ ሓበሬታ ንምቕራብ እዮም። መስመራት ብ . ብምውዳእ ቅርጺ ምዕቃብ ።font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

ትዊተር፡ ኢንክ
1355 ማርኬት ስትሪት፡ ሱት 900
ሳን ፍራንሲስኮ፡ ሲኤ 94103
ፒ ፡ (123) 456-7890

ምሉእ ስም
[email protected]

ብሎክኮት ምግባር

እቲ ነባሪ marginኣብ blockquotes እዩ ፣ ስለዚ ምስ ካልኦት ባእታታት ዝያዳ ዝሰማማዕ ነገር ንምርካብ 1em 40pxንሱ ናብ ዳግማይ ንሰርዖ።0 0 1rem

ፍሉጥ ጥቕሲ፡ ኣብ ብሎክኮት ባእታ ዝሓዘ።

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ

ኣብ ውሽጢ መስመር ዝርከቡ ባእታታት

እቲ <abbr>ባእታ ኣብ መንጎ ጽሑፋት ሕጡበ-ጽሑፍ ፍሉይ ንኽኸውን መሰረታዊ ቅዲ ይረክብ።

ኑላ ኣትሪ ቪታ ኤሊት ሊበሮ፡ ሓደ ፋሬትራ ኣውጉ።

መጠቃለሊ

እቲ ነባሪ cursorኣብ ጽማቕ text, ስለዚ pointerነቲ ባእታ ኣብ ልዕሊኡ ብምጥዋቕ ክራኸብ ከም ዝኽእል ንምሕላፍ ናብ ዳግማይ ንሰርዖ።

ገለ ዝርዝራት

ተወሳኺ ሓበሬታ ብዛዕባ ዝርዝር።

ካብኡ ንላዕሊ ዝርዝራት

ብዛዕባ ዝርዝራት ዝያዳ ዝርዝር ሓበሬታ ኣብዚ ኣሎ።

HTML5 `[hidden]`ዝብል ባህሪ

HTML5 ሓድሽ ዓለማዊ ባህሪ[hidden]display: none ይውስኽ ፣ እዚ ድማ ከም ነባሪ ቅዲ ኣለዎ ። ካብ PureCSS ሓሳብ ተለቂሕና ፣ ብጌጋ ከይግለጽ [hidden] { display: none !important; }ንምክልኻል ንምሕጋዝ ብምግባር ነዚ ነባሪ ነመሓይሽ display። [hidden]ብመበቆል ብIE10 ዘይድገፍ እኳ እንተኾነ ፡ እቲ ኣብ CSSና ዘሎ ግሉጽ ኣዋጅ ግን ነቲ ጸገም ይሰግሮ።

<input type="text" hidden>

jQuery ዘይምስምማዕ

[hidden]$(...).hide()ምስ jQuery's ን $(...).show()ሜላታትን ዝሰማማዕ ኣይኮነን ። ስለዚ ኣብዚ እዋን እዚ ብፍላይ [hidden]ኣብ ልዕሊ ካልኦት ሜላታት ምምሕዳር displayናይ ባእታታት ኣይንድግፍን ኢና።

ርኡይነት ናይ ሓደ ባእታ ንምቕያር ጥራይ፣ ማለት ናቱ displayኣይተቐየረን እቲ ባእታ ጌና ንዋሕዚ ናይቲ ሰነድ ክጸልዎ ይኽእል እዩ፣ ኣብ ክንድኡ ነቲ .invisibleክፍሊ ተጠቐም ።