ዳግም አስነሳ

ዳግም አስነሳ፣ በአንድ ፋይል ውስጥ ያሉ የተወሰኑ የCSS ለውጦች ስብስብ፣ ለመገንባት የሚያምር፣ ተከታታይ እና ቀላል መነሻ ለማቅረብ Bootstrapን ጀምር።

በዚህ ገጽ ላይ

አቀራረብ

ዳግም ማስነሳት በNormalize ላይ ይገነባል፣ ብዙ የኤችቲኤምኤል ኤለመንቶችን በመጠኑም ቢሆን ሃሳባቸውን የጠበቁ ቅጦችን ኤለመንት መራጮችን ብቻ ያቀርባል። ተጨማሪ የቅጥ አሰራር የሚከናወነው በክፍሎች ብቻ ነው. ለምሳሌ፣ <table>ለቀላል መነሻ አንዳንድ ቅጦችን ዳግም አስነሳን እና በኋላ፣፣ .tableእና .table-borderedሌሎችንም እናቀርባለን።

በዳግም ማስነሳት ውስጥ ምን መሻር እንዳለብን የምንመርጥበት መመሪያዎቻችን እና ምክንያቶቻችን እዚህ አሉ።

አንዳንድ የአሳሽ ነባሪ እሴቶችን ከ rems ይልቅ ems ን ለመጠቀም ለሚመች አካል ክፍተት ያዘምኑ።
አስወግድ margin-top. ቀጥ ያሉ ህዳጎች ሊወድቁ ይችላሉ፣ ይህም ያልተጠበቀ ውጤት ያስገኛሉ። ከሁሉም በላይ ግን አንድ አቅጣጫ marginቀላል የአዕምሮ ሞዴል ነው.
በመሣሪያ መጠኖች ላይ ቀላል ልኬትን ለማግኘት፣ የማገጃ አባሎች rems ለ margins መጠቀም አለባቸው።
በተቻለ መጠን fontበመጠቀም ከ - ተዛማጅ ንብረቶች መግለጫዎችን በትንሹ ያቆዩ ።inherit

የሲኤስኤስ ተለዋዋጮች

በ v5.2.0 ውስጥ ተጨምሯል

በ v5.1.1፣ የምንፈልጋቸውን @imports በሁሉም የCSS ቅርቅቦቻችን (፣፣ እና ጨምሮ bootstrap.css) bootstrap-reboot.cssለማካተት bootstrap-grid.cssደረጃ አደረግን _root.scss። ይህ የ CSS ተለዋዋጮችን ወደ ሁሉም ቅርቅቦች ያክላል :root፣ ምንም ያህል በዚያ ጥቅል ውስጥ ጥቅም ላይ ቢውሉም። በስተመጨረሻ Bootstrap 5 ሳስን ሁልጊዜ ማጠናቀር ሳያስፈልግ ተጨማሪ የእውነተኛ ጊዜ ማበጀትን ለማቅረብ በጊዜ ሂደት ተጨማሪ የሲኤስኤስ ተለዋዋጮችን ማየቱን ይቀጥላል ። አካሄዳችን ምንጫችን Sass ተለዋዋጮችን ወስደን ወደ CSS ተለዋዋጮች መቀየር ነው። በዚህ መንገድ፣ የCSS ተለዋዋጮችን ባትጠቀሙም፣ አሁንም የ Sass ሃይል አለህ። ይህ አሁንም በሂደት ላይ ያለ እና ሙሉ በሙሉ ተግባራዊ ለማድረግ ጊዜ ይወስዳል።

ለምሳሌ፣ እነዚህን :rootየሲኤስኤስ ተለዋዋጮች ለተለመዱ <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};

በተግባር፣ እነዛ ተለዋዋጮች በእንደገና ማስነሳት ውስጥ ይተገበራሉ።

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>። <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>የተገለጸ background-color፣ ያልተገባ ለ #fff.

ቤተኛ ቅርጸ-ቁምፊ ቁልል

ቡትስትራፕ በእያንዳንዱ መሳሪያ እና ስርዓተ ክወና ላይ ለተሻለ የጽሁፍ ስራ “ቤተኛ የቅርጸ-ቁምፊ ቁልል” ወይም “የስርዓት ቅርጸ-ቁምፊ ቁልል”ን ይጠቀማል። እነዚህ የሥርዓት ቅርጸ-ቁምፊዎች የተነደፉት በተለይ የዛሬዎቹን መሳሪያዎች ግምት ውስጥ በማስገባት፣ በስክሪኖች ላይ የተሻሻለ አተረጓጎምን፣ ተለዋዋጭ የቅርጸ-ቁምፊ ድጋፍን እና ሌሎችንም ይዘዋል። ስለ ቤተኛ የቅርጸ-ቁምፊ ቁልል ተጨማሪ ያንብቡ በዚህ Smashing መጽሔት ጽሑፍ ውስጥ ።

$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;

የፎንት ቁልል የኢሞጂ ቅርጸ ቁምፊዎችን ስለሚያካትት ብዙ የተለመዱ ምልክቶች/ዲንግባት የዩኒኮድ ቁምፊዎች እንደ ባለብዙ ቀለም ሥዕሎች እንደሚቀርቡ ልብ ይበሉ። የእነሱ ገጽታ በአሳሹ/የፕላትፎርም ቤተኛ ኢሞጂ ቅርጸ-ቁምፊ ላይ ጥቅም ላይ በሚውልበት ዘይቤ ይለያያል፣ እና በማንኛውም የCSS colorቅጦች አይነኩም።

ይህ በመላው ቡትስትራፕ በአለም አቀፍ ደረጃ font-familyየሚተገበር እና በራስ ሰር የሚወረሰው ነው። <body>አለምአቀፉን ለመቀየር ቡትስትራፕን font-familyያዘምኑ እና እንደገና ያጠናቅቁ።$font-family-base

ርዕሶች እና አንቀጾች

ሁሉም የርዕስ ክፍሎች - ለምሳሌ <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>ዎች በ border-top, በ ነባሪው opacity: .25እና በራስ ሰር ይወርሳሉ ፣ በወላጅ በኩል ሲዘጋጅም border-colorጭምር color። colorበጽሑፍ፣ በድንበር እና ግልጽ ባልሆኑ መገልገያዎች ሊሻሻሉ ይችላሉ።

html

<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በርቷል <ul>እና <ol>ኤለመንቶችን ዳግም አስጀምረናል።

ሁሉም ዝርዝሮች የላይኛው ህዳግ ተወግዷል
እና የታችኛው ህዳግ መደበኛ
የጎጆ ዝርዝሮች ምንም የታችኛው ህዳግ የላቸውም
- በዚህ መንገድ እነሱ የበለጠ እኩል ገጽታ አላቸው
- በተለይም ተጨማሪ የዝርዝር እቃዎች ሲከተሉ
የግራ ንጣፍ እንዲሁ እንደገና ተጀምሯል።

የታዘዘ ዝርዝር እነሆ
ከጥቂት የዝርዝር እቃዎች ጋር
አጠቃላይ እይታም ተመሳሳይ ነው።
እንደ ቀዳሚው ያልታዘዘ ዝርዝር

ለቀላል የቅጥ አሰራር፣ ግልጽ ተዋረድ እና ለተሻለ ክፍተት መግለጫ ዝርዝሮች ተዘምነዋል margin። ወደ <dd>ድጋሚ አስጀምር እና መጨመር ። ዎች ደፋር ናቸው .margin-left0margin-bottom: .5rem<dt>

መግለጫ ዝርዝሮች: የመግለጫ ዝርዝር ቃላትን ለመወሰን ፍጹም ነው።
ጊዜ: ለቃሉ ፍቺ.; ለተመሳሳይ ቃል ሁለተኛ ትርጉም.
ሌላ ቃል: የዚህ ሌላ ቃል ፍቺ።

የመስመር ውስጥ ኮድ

የውስጠ-መስመር ኮድ ቅንጥቦችን በ <code>. የኤችቲኤምኤል አንግል ቅንፎችን ለማምለጥ እርግጠኛ ይሁኑ።

ለምሳሌ <section>በውስጥ መስመር መጠቅለል አለበት።

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ኮድ ያግዳል

<pre>ኤስን ለብዙ የኮድ መስመሮች ተጠቀም ። አንዴ በድጋሚ፣ ለትክክለኛው ስራ በኮዱ ውስጥ ካሉ ማንኛቸውም አንግል ቅንፎች ማምለጥዎን ያረጋግጡ። ኤለመንቱ እንደገና ተጀምሯል <pre>እሱን ለማስወገድ እና ለእሱ ክፍሎችን margin-topለመጠቀም ።remmargin-bottom

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

html

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

ተለዋዋጮች

ተለዋዋጮችን ለማመልከት <var>መለያውን ይጠቀሙ።

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

የተጠቃሚ ግቤት

<kbd>በተለምዶ በቁልፍ ሰሌዳ የገባውን ግቤት ለማመልከት ይጠቀሙ ።

ማውጫዎችን ለመቀየር የማውጫውን cdስም ይተይቡ።
ቅንብሮችን ለማርትዕ ተጫን ctrl + ,

html

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>መለያውን ይጠቀሙ።

ይህ ጽሑፍ ከኮምፒዩተር ፕሮግራም እንደ ናሙና መውጣት ነው.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

ጠረጴዛዎች

ሰንጠረዦች በትንሹ ወደ ቅጥ <caption>s ተስተካክለዋል፣ ድንበሮች ወድቀዋል፣ እና text-alignበጠቅላላው ወጥነት ያለው መሆኑን ያረጋግጣሉ። ለድንበሮች፣ ንጣፍ እና ሌሎች ተጨማሪ ለውጦች ከክፍል ጋር አብረው .tableይመጣሉ ።

ይህ የምሳሌ ሠንጠረዥ ነው፣ እና ይዘቱን ለመግለጽ ይህ መግለጫ ጽሁፍ ነው።
የሠንጠረዥ ርዕስ	የሠንጠረዥ ርዕስ	የሠንጠረዥ ርዕስ	የሠንጠረዥ ርዕስ
የጠረጴዛ ሕዋስ	የጠረጴዛ ሕዋስ	የጠረጴዛ ሕዋስ	የጠረጴዛ ሕዋስ
የጠረጴዛ ሕዋስ	የጠረጴዛ ሕዋስ	የጠረጴዛ ሕዋስ	የጠረጴዛ ሕዋስ
የጠረጴዛ ሕዋስ	የጠረጴዛ ሕዋስ	የጠረጴዛ ሕዋስ	የጠረጴዛ ሕዋስ

html

<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>ዎች፣ ልክ እንደ የመስክ ስብስቦች፣ እንዲሁ እንደ አርእስት እንዲታይ እንደገና ተቀይሯል።
<label>s እንዲተገበር display: inline-blockለመፍቀድ ተቀናብሯል።margin
<input>s፣ <select>s፣ <textarea>s እና <button>s ባብዛኛው በ Normalize ነው የሚቀርበው፣ ነገር ግን ዳግም ማስነሳት የእነሱን marginእና ስብስቦችንም ያስወግዳል line-height: inherit።
<textarea>አግድም መጠን መቀየር ብዙ ጊዜ የገጽ አቀማመጥን "ይሰብራል" እንደመሆኑ መጠን በአቀባዊ ብቻ እንዲቀየር ተስተካክለዋል።
<button>s እና <input>የአዝራር አባሎች cursor: pointerመቼ ይኖራቸዋል :not(:disabled)።

እነዚህ ለውጦች እና ሌሎችም ከዚህ በታች ይታያሉ።

ምሳሌ አፈ ታሪክ

ምሳሌ ግቤት

ምሳሌ ኢሜይል

ምሳሌ ስልክ

ምሳሌ url

ምሳሌ ቁጥር

ምሳሌ ፍለጋ

የምሳሌ ክልል

የፋይል ግቤት ምሳሌ

ምሳሌ ይምረጡ

በዚህ አመልካች ሳጥን ላይ ምልክት ያድርጉ

አማራጭ አንድ ይህ እና ያ ነው። አማራጭ ሁለት የእነዚህን ተወዳጅ የቅጽ መቆጣጠሪያዎች መጠቅለያ ለማሳየት እጅግ በጣም ረጅም የሆነ ሌላ ነገር ነው። አማራጭ ሶስት ተሰናክሏል።

የጽሑፍ አካባቢ ምሳሌ

የምሳሌ ቀን

ምሳሌ ጊዜ

የይለፍ ቃል ምሳሌ

ምሳሌ የቀን ሰዓት - አካባቢያዊ

ምሳሌ ሳምንት

ምሳሌ ወር

ምሳሌ ቀለም

ምሳሌ ውፅዓት 100

የቀን እና የቀለም ግቤት ድጋፍ

ያስታውሱ የቀን ግብዓቶች በሁሉም አሳሾች ማለትም Safari ሙሉ በሙሉ አይደገፉም ።

በአዝራሮች ላይ ጠቋሚዎች

role="button"ዳግም ማስጀመር ነባሪ ጠቋሚውን ወደ ቀይር ማሻሻያ ያካትታል pointer። አባሎች በይነተገናኝ መሆናቸውን ለማመልከት ይህንን ባህሪ ወደ ክፍሎች ያክሉት። <button>ይህ ሚና የራሳቸውን cursorለውጥ ለሚያገኙ ንጥረ ነገሮች አስፈላጊ አይደለም ።

የአዝራር ያልሆነ አባል አዝራር

html

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

የተለያዩ አካላት

አድራሻ

የአሳሹን ነባሪ ከ ወደ ዳግም <address>ለማስጀመር ኤለመንት ተዘምኗል ። እንዲሁም አሁን በዘር የሚተላለፍ ነው, እና ተጨምሯል. s ለቅርብ ቅድመ አያት (ወይም አጠቃላይ የስራ አካል) የእውቂያ መረጃን ለማቅረብ ናቸው። መስመሮችን በመጨረስ ቅርጸትን ያስቀምጡ ።font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

ትዊተር ፣ ኢንክ .
_

ሙሉ ስም
[email protected]

Blockquote

በብሎክ ጥቅሶች ላይ ያለው ነባሪ marginነው ፣ ስለዚህ ያንን ከሌሎች አካላት ጋር ለሚስማማ ነገር 1em 40pxዳግም እናስጀምረዋለን።0 0 1rem

በብሎክquote ኤለመንት ውስጥ የሚገኝ በጣም የታወቀ ጥቅስ።

በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው

የመስመር ውስጥ አካላት

<abbr>ኤለመንቱ በአንቀፅ ጽሁፍ ውስጥ ጎልቶ እንዲታይ ለማድረግ መሰረታዊ የቅጥ አሰራርን ይቀበላል ።

የኤችቲኤምኤል ምህጻረ ቃል አባል ።

ማጠቃለያ

cursorበማጠቃለያው ላይ ያለው ነባሪ ነው፣ ስለዚህ እሱን ጠቅ በማድረግ ንጥረ ነገሩ ከእሱ ጋር መስተጋብር መፍጠር እንደሚቻል ለማስተላለፍ ያንን textዳግም እናስጀምረዋለን።pointer

አንዳንድ ዝርዝሮች

ስለ ዝርዝሮቹ ተጨማሪ መረጃ።

ተጨማሪ ዝርዝሮች እንኳን

ስለ ዝርዝሮቹ ተጨማሪ ዝርዝሮች እዚህ አሉ.

HTML5 `[hidden]`ባህሪ

ኤችቲኤምኤል 5 በነባሪነት የተቀየሰ አዲስ ዓለም አቀፋዊ ባህሪ[hidden] ያክላል ። display: noneሃሳብን ከ PureCSS[hidden] { display: none !important; } በመዋስ፣ በአጋጣሚ እንዳይገለበጥ በማገዝ ይህንን ነባሪ እናሻሽላለን display።

<input type="text" hidden>

jQuery አለመጣጣም

[hidden]ከ jQuery $(...).hide()እና $(...).show()ዘዴዎች ጋር ተኳሃኝ አይደለም። ስለዚህ፣ በአሁኑ ጊዜ በተለይ የንጥረ ነገሮችን [hidden]ለመቆጣጠር ሌሎች ቴክኒኮችን አንደግፍም ።display

የአንድን ኤለመንት ታይነት ለመቀያየር፣ ማለትም አልተሻሻለምdisplay እና ኤለመንቱ አሁንም የሰነዱን ፍሰት ሊነካ ይችላል፣ በምትኩ ክፍሉን.invisible ይጠቀሙ ።

ዳግም አስነሳ

አቀራረብ

የሲኤስኤስ ተለዋዋጮች

የገጽ ነባሪዎች

ቤተኛ ቅርጸ-ቁምፊ ቁልል

ርዕሶች እና አንቀጾች

አግድም ደንቦች

ዝርዝሮች

የመስመር ውስጥ ኮድ

ኮድ ያግዳል

ተለዋዋጮች

የተጠቃሚ ግቤት

የናሙና ውፅዓት

ጠረጴዛዎች

ቅጾች

የቀን እና የቀለም ግቤት ድጋፍ

በአዝራሮች ላይ ጠቋሚዎች

የተለያዩ አካላት

አድራሻ

Blockquote

የመስመር ውስጥ አካላት

ማጠቃለያ

HTML5 [hidden]ባህሪ

jQuery አለመጣጣም

HTML5 `[hidden]`ባህሪ