ዳግማይ ምጅማር

ሪቦት፡ እኩብ ባእታ-ፍሉይ 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 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;

እዚ ኣብቲን ብኣውቶማቲክ ብዓለም ደረጃ ኣብ ምሉእ ቡትስትራፕ ይውረስን 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 ብድሙቕ ተጻሒፉ ኣሎ .

መግለጺ ዝርዝር: ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።
ዩይስሞድ: ቬስቲቡሉም ኢድ ሊጉላ ፖርታ ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ ኦዲዮ ሰም.; Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus.
ማሌሱዋዳ ፖርታ: ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ።

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

እቲ <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 ብኣግማድ ምቕያር ዓቐን መብዛሕትኡ ግዜ ንኣቀማምጣ ገጽ “ዝሰብሮ” ስለዝኾነ ብቐጥታ ዓቐኑ ጥራይ ክኸውን ይቕየር።

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

ዝተፈላለዩ ባእታታት

አድራሻ

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

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

ምሉእ ስም
[email protected]

ብሎክኮት ምግባር

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

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.

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

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

እቲ <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ክፍሊ ተጠቐም ።