ዳግማይ ምጅማር
ሪቦት፡ እኩብ ባእታ-ፍሉይ CSS ለውጢ ኣብ ሓደ ፋይል፡ kickstart Bootstrap ንምህናጽ ውቁብ፡ ቅኑዕን ቀሊልን መበገሲ መስመር ንምሃብ።
ቅረብ
Reboot ኣብ Normalize ይሃንጽ፣ ንብዙሓት HTML ባእታታት ብመጠኑ ርእይቶ ዘለዎም ቅዲታት ብመምረጺ ባእታታት ጥራይ ብምጥቃም ይህብ። ተወሳኺ ቅዲ ምስ ክፍልታት ጥራይ እዩ ዝግበር። ንኣብነት ገለ <table>
ቅዲታት ንዝቐለለ መበገሲ መስመር ዳግማይ ንጅምር ድሒርና ድማ .table
, .table-bordered
, ካልእን ንህብ።
ኣብ ሪቦት እንታይ ክትግለጽ ከም ዘለና ዝመረጽናሉ መምርሕታትናን ምኽንያታትናን ኣብዚ ኣለዉ፤
rem
ገለ ናይ መርበብ ሓበሬታ ነባሪ ክብርታት ኣብ ክንዲem
s ንዝተመጣጠነ ርሕቀት ኣካላት s ንምጥቃም ኣዘምን ።- ካብ
margin-top
. ቀጥታዊ ወሰን ክፈርስ ይኽእል እዩ፣ እዚ ድማ ዘይተጸበናዮ ውጽኢት ከስዕብ ይኽእል። ካብኡ ዝዓቢ ግን፡ ሓደ ኣንፈት ናይmargin
ዝቐለለ ኣእምሮኣዊ ሞዴል እዩ። - ንዝቐለለ ምዕባይ ኣብ መላእ ዓቐናት መሳርሒ፡ ብሎክ ባእታታት
rem
s ንmargin
s ክጥቀሙ ይግባእ። - ኣዋጃት ናይ
font
-ተዛመድቲ ንብረታት ኣብ ዝተሓተ ደረጃ ምሓዝ፣inherit
ብዝተኻእለ መጠን ተጠቐም።
ናይ CSS ተለዋዋጢ ረቛሒታት
ኣብ v5.2.0 ተወሰኸምስ v5.1.1፡ ንሕና ዘድልየና @import
s ኣብ ኩሎም CSS ጽንጽዋያትና (ን bootstrap.css
, bootstrap-reboot.css
, and bootstrap-grid.css
) ሓዊስካ ንኸተካትት ደረጃ ኣቐሚጥናዮ _root.scss
። እዚ ኣብ ኩሎም ጽንጽዋያት ደረጃ CSS ተለዋዋጢ ይውስኽ :root
፣ ክንደይ ካብኣቶም ኣብቲ ጽንጽዋይ ይጥቀሙ ብዘየገድስ። ኣብ መወዳእታ ቡትስትራፕ 5 ምስ ግዜ ዝያዳ ተለዋዋጢ CSS ክውሰኽ ክቕጽል እዩ ፣ ምእንቲ ኩሉ ግዜ ዳግማይ ምትእኽኻብ ሳስ ዝያዳ ኣብ ሓቀኛ ግዜ ምምዕርራይ ንምሃብ። ኣቀራርባና ምንጪ Sass variablesና ወሲድና ናብ CSS variables ምቕያር እዩ። በዚ መንገዲ እዚ ዋላ CSS variables እንተዘይተጠቐምካ ኩሉ ሓይሊ Sass ኣለካ። እዚ ገና ኣብ ምክያድ ስለዘሎ ምሉእ ብምሉእ ንምትግባር ግዜ ክወስድ እዩ።
ንኣብነት ነዞም :root
ናይ CSS ተለዋዋጢ ንልሙዳት <body>
ቅዲታት ኣብ ግምት ኣእትውዎም፤
@if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{$font-family-base};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
--#{$prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$prefix}body-text-align: #{$body-text-align};
}
--#{$prefix}body-bg: #{$body-bg};
ብተግባር ድሕሪኡ እቶም ተለዋዋጢ ረቛሒታት ኣብ Reboot ከምዚ ዝስዕብ ይትግበሩ፤
body {
margin: 0; // 1
font-family: var(--#{$prefix}body-font-family);
@include font-size(var(--#{$prefix}body-font-size));
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
color: var(--#{$prefix}body-color);
text-align: var(--#{$prefix}body-text-align);
background-color: var(--#{$prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
እዚ ድማ ብዝደለኻዮ ኣብ ሓቀኛ ግዜ ምምዕርራይ ክትገብር የኽእለካ፤
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
ገጽ ነባሪ ይኸውን
እቶም <html>
and <body>
ባእታታት ዝሓሸ ገጽ-ስፍሕ ዝበለ ነባሪ ንምሃብ ይመሓየሹ። ብዝያዳ ብፍሉይ፤
- እቲ
box-sizing
ብዓለም ደረጃ ኣብ ነፍሲ ወከፍ ባእታ ተቐሚጡ ኣሎ-ሓዊስካን*::before
፣*::after
ናብborder-box
. እዚ ድማ ብሰንኪ ፓዲንግ ወይ ዶብ ካብቲ ዝተኣወጀ ስፍሓት ባእታ ፈጺሙ ከምዘይሓልፍ የረጋግጽ።font-size
ኣብቲ ፣ ዝኾነ መሰረት ኣይእወጅን<html>
፣ ግን16px
ይግመት (ናይ መርበብ ሓበሬታ ነባሪ)። ኣብ ልዕሊ እቲ ንቐሊል ምላሽ ዝህብ ዓይነት-ምዕባይ ብመንገዲ ናይ ሚድያ ሕቶታት ኣብ ርእሲኡ ምርጫታት ተጠቀምቲ ብምኽባርን ዝያዳ ተበጻሒ ኣገባብ ብምርግጋጽንfont-size: 1rem
ይትግበር ። እዚ ናይ መርበብ ሓበሬታ ነባሪ ነቲ ተለዋዋጢ<body>
ብምቕያር ክግለጽ ይኽእል ።$font-size-root
- እቲ
<body>
ውን ዓለማዊfont-family
,font-weight
,line-height
, ከምኡውንcolor
. እዚ ድሒሩ ብገለ ቅርጺ ባእታታት ይውረስ ምእንቲ ዘይምስምማዕ ቅርጺ ፊደላት ይከላኸል። - ንውሕስነት፡ እቲ
<body>
has a declaredbackground-color
, defaulting to#fff
.
ተወላዲ ቅርጺ ፊደል ቁጽሪ
ቡትስትራፕ ኣብ ነፍሲ ወከፍ መሳርሒን ኦኤስን ንዝበለጸ ጽሑፍ ምቕራብ “native font stack” ወይ “system font stack” ይጥቀም። እዞም ናይ ስርዓት ቅርጺ ፊደላት ብፍሉይ ናይ ሎሚ መሳርሒታት ኣብ ግምት ብምእታው ዝተነድፉ ኮይኖም፡ ኣብ ስክሪናት ዝተመሓየሸ ኣቀራርባ፡ ተለዋዋጢ ቅርጺ ፊደላት ዝድግፉን ካልእን ሒዞም እዮም። ብዛዕባ ተወላዲ ቅርጺ ፊደላት ኣብዚ ጽሑፍ መጽሔት ስማሽን ዝያዳ ኣንብብ ።
$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,
// older macOS and iOS
"Helvetica Neue"
// Linux
"Noto Sans",
"Liberation Sans",
// Basic web fallback
Arial,
// 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-base
Bootstrap ኣዘምንን ዳግማይ ኣጠቓልልን።
ኣርእስትታትን ሕጡበ-ጽሑፋትን
ኩሎም ናይ ርእሲ ባእታታት-ንኣብነት <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. ቡትስትራፕ ዝብል ርእሲ |
ልኡል ሕግታት
እቲ <hr>
ባእታ ተቐሊሉ ኣሎ። ምስ ነባሪ መርበብ ሓበሬታ ዝመሳሰል <hr>
፡ s ብመንገዲ ፡ ቅዲ border-top
ኣለዎም፡ ነባሪ ኣለዎም opacity: .25
፡ ብኣውቶማቲክ ድማ border-color
via ናቶም ይወርሱ color
፡ እንተላይ መዓስ color
ብመንገዲ ወላዲ ይቕመጥ። ብጽሑፍ፣ ዶብን ዘይንጹርነትን ዩቲሊቲታት ክቕየሩ ይኽእሉ።
<hr>
<div class="text-success">
<hr>
</div>
<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">
ዝርዝራት
ኩሎም ዝርዝር— <ul>
, <ol>
, ከምኡውን <dl>
—ናቶም ተኣልዮምን margin-top
ሓደ margin-bottom: 1rem
. ዝተሰቕሉ ዝርዝር margin-bottom
. padding-left
ነቲ on <ul>
ን <ol>
elements ን እውን ዳግማይ ኣቐሚጥናዮ ኣለና ።
- ኩሎም ዝርዝራት ላዕለዋይ ወሰንኦም ተኣልዮም ኣለዉ።
- ታሕተዋይ ወሰኖም ድማ ንቡር ኮይኑ
- ዝተሰፍሩ ዝርዝር ታሕተዋይ ወሰን የብሎምን።
- በዚ መንገዲ እዚ ዝያዳ ምዕሩይ መልክዕ ኣለዎም።
- ብፍላይ ዝያዳ ዝርዝር ነገራት ምስ ዝስዕብ
- እቲ ጸጋማይ መሸፈኒ እውን ዳግማይ ተሰሪዑ ኣሎ።
- ስርዓት ዘለዎ ዝርዝር ኣብዚ ኣሎ።
- ምስ ውሑዳት ዝርዝር ነገራት
- ሓደ ዓይነት ሓፈሻዊ መልክዕ ኣለዎ።
- ከምቲ ዝሓለፈ ዘይተሰርዐ ዝርዝር
ንዝቐለለ ቅዲ፡ ንጹር ስርዓተ-መሰረትን ዝሓሸ ርሕቀትን፡ ዝርዝር መግለጺታት ዝተመሓየሹ margin
s ኣለዎም። <dd>
s margin-left
ናብ ዳግማይ 0
ምትካልን ምውሳኽን margin-bottom: .5rem
. <dt>
s ብድሙቕ ተጻሒፉ ኣሎ .
- መግለጺ ዝርዝር
- ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።
- ቃል
- ትርጉም ናይቲ ቃል።
- ካልኣይ ትርጉም ናይ ተመሳሳሊ ቃል።
- ካልእ ቃል
- ትርጉም ናይዚ ካልእ ቃል።
ናይ ውሽጢ መስመር ኮድ
ኣብ ውሽጢ መስመር ዝርከቡ ቁንጣሮ ኮድ ብ <code>
. ካብ ናይ HTML ኩርናዕ ቅንጥብጣብ ምህዳምካ ኣረጋግጽ።
<section>
ከም ውሽጢ መስመር ክጥቕለል ይግባእ።
For example, <code><section></code> should be wrapped as inline.
ኮድ ብሎክስ
<pre>
ንብዙሓት መስመራት ኮድ s ተጠቐም ። ሕጂ’ውን፡ ንግቡእ ምቕራብ ኣብቲ ኮድ ካብ ዝኾነ ናይ ኩርናዕ ቅንጥብጣብ ምህዳምካ ኣረጋግጽ። እቲ <pre>
ባእታ ናቱ ንምእላይን ን ናቱ ኣሃዱታት margin-top
ንምጥቃምን ዳግማይ ይስራዕ ።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>
ተለዋዋጢ ረቛሒታት
ንተለዋዋጢ ረቛሒታት ንምምልካት ነቲ <var>
መለለዪ ተጠቐም።
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
ናይ ተጠቃሚ ምእታው
<kbd>
ብተለምዶ ብመንገዲ ቁልፊ ሰሌዳ ዝኣቱ ምእታው ንምምልካት the ተጠቐም ።
ቅጥዕታት ንምእራም፡ ንጽቀጥ 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>
ናሙና ውጽኢት
ካብ ሓደ ፕሮግራም ዝመጽእ ናሙና ውጽኢት ንምምልካት ነቲ <samp>
መለለዪ ተጠቐም።
<samp>This text is meant to be treated as sample output from a computer program.</samp>
ሰደቓታት
ሰደቓታት ቁሩብ ምስ ቅዲ <caption>
s ይስተኻኸሉ፣ ዶባት ይፈርሱ፣ ኣብ text-align
ምሉእ ድማ ቅኑዕነት የረጋግጹ። ተወሳኺ ለውጢ ንዶባት፡ መሸፈኒን ካልእን ምስቲ ክፍሊ .table
ይመጽእ .
ኣርእስቲ ሰደቓ | ኣርእስቲ ሰደቓ | ኣርእስቲ ሰደቓ | ኣርእስቲ ሰደቓ |
---|---|---|---|
ዋህዮ ሰደቓ | ዋህዮ ሰደቓ | ዋህዮ ሰደቓ | ዋህዮ ሰደቓ |
ዋህዮ ሰደቓ | ዋህዮ ሰደቓ | ዋህዮ ሰደቓ | ዋህዮ ሰደቓ |
ዋህዮ ሰደቓ | ዋህዮ ሰደቓ | ዋህዮ ሰደቓ | ዋህዮ ሰደቓ |
<table>
<caption>
This is an example table, and this is its caption to describe the contents.
</caption>
<thead>
<tr>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</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-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
ብሎክኮት ምግባር
እቲ ነባሪ margin
ኣብ blockquotes እዩ ፣ ስለዚ ምስ ካልኦት ባእታታት ዝያዳ ዝሰማማዕ ነገር ንምርካብ 1em 40px
ንሱ ናብ ዳግማይ ንሰርዖ።0 0 1rem
ፍሉጥ ጥቕሲ፡ ኣብ ብሎክኮት ባእታ ዝሓዘ።
ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ
ኣብ ውሽጢ መስመር ዝርከቡ ባእታታት
እቲ <abbr>
ባእታ ኣብ መንጎ ጽሑፋት ሕጡበ-ጽሑፍ ፍሉይ ንኽኸውን መሰረታዊ ቅዲ ይረክብ።
መጠቃለሊ
እቲ ነባሪ cursor
ኣብ ጽማቕ text
፣ ስለዚ pointer
ነቲ ባእታ ኣብ ልዕሊኡ ብምጥዋቕ ክራኸብ ከም ዝኽእል ንምሕላፍ ንሱ ናብ ዳግማይ ንሰርዖ።
ገለ ዝርዝራት
ተወሳኺ ሓበሬታ ብዛዕባ ዝርዝር።
ካብኡ ንላዕሊ ዝርዝራት
ብዛዕባ ዝርዝራት ዝያዳ ዝርዝር ሓበሬታ ኣብዚ ኣሎ።
HTML5 [hidden]
ዝብል ባህሪ
HTML5 ሓድሽ ዓለማዊ ባህሪ[hidden]
display: none
ይውስኽ ፣ እዚ ድማ ከም ነባሪ ቅዲ ኣለዎ ። ካብ PureCSS ሓሳብ ተለቂሕና ፣ ብጌጋ ከይግለጽ [hidden] { display: none !important; }
ንምክልኻል ንምሕጋዝ ብምግባር ነዚ ነባሪ ነመሓይሽ display
።
<input type="text" hidden>
jQuery ዘይምስምማዕ
[hidden]
$(...).hide()
ምስ jQuery's ን $(...).show()
ሜላታትን ዝሰማማዕ ኣይኮነን ። ስለዚ ኣብዚ እዋን እዚ ብፍላይ [hidden]
ኣብ ልዕሊ ካልኦት ሜላታት ምምሕዳር display
ናይ ባእታታት ኣይንድግፍን ኢና።
ርኡይነት ናይ ሓደ ባእታ ንምቕያር ጥራይ፣ ማለት ናቱ display
ኣይተቐየረን እቲ ባእታ ጌና ንዋሕዚ ናይቲ ሰነድ ክጸልዎ ይኽእል እዩ፣ ኣብ ክንድኡ ነቲ .invisible
ክፍሊ ተጠቐም ።