ዳግም አስነሳ
ዳግም አስነሳ፣ በአንድ ፋይል ውስጥ ያሉ የተወሰኑ የCSS ለውጦች ስብስብ፣ ለመገንባት የሚያምር፣ ተከታታይ እና ቀላል መነሻ ለማቅረብ Bootstrapን ጀምር።
አቀራረብ
ዳግም ማስነሳት በNormalize ላይ ይገነባል፣ ብዙ የኤችቲኤምኤል ኤለመንቶችን በመጠኑም ቢሆን ሃሳባቸውን የጠበቁ ቅጦችን ኤለመንት መራጮችን ብቻ ያቀርባል። ተጨማሪ የቅጥ አሰራር የሚከናወነው በክፍሎች ብቻ ነው. ለምሳሌ፣ <table>
ለቀላል መነሻ አንዳንድ ቅጦችን ዳግም አስነሳን እና በኋላ፣፣ .table
እና .table-bordered
ሌሎችንም እናቀርባለን።
በዳግም ማስነሳት ውስጥ ምን መሻር እንዳለብን የምንመርጥበት መመሪያዎቻችን እና ምክንያቶቻችን እዚህ አሉ።
- አንዳንድ የአሳሽ ነባሪ እሴቶችን ከ
rem
s ይልቅem
s ን ለመጠቀም ለሚመች አካል ክፍተት ያዘምኑ። - አስወግድ
margin-top
. ቀጥ ያሉ ህዳጎች ሊወድቁ ይችላሉ፣ ይህም ያልተጠበቀ ውጤት ያስገኛሉ። ከሁሉም በላይ ግን አንድ አቅጣጫmargin
ቀላል የአዕምሮ ሞዴል ነው. - በመሣሪያ መጠኖች ላይ ቀላል ልኬትን ለማግኘት፣ የማገጃ አባሎች
rem
s ለmargin
s መጠቀም አለባቸው። - በተቻለ መጠን
font
በመጠቀም ከ - ተዛማጅ ንብረቶች መግለጫዎችን በትንሹ ያቆዩ ።inherit
የሲኤስኤስ ተለዋዋጮች
በ v5.1.1 ውስጥ ተጨምሯል
በ v5.1.1፣ የምንፈልጋቸውን @import
s በሁሉም የCSS ቅርቅቦቻችን ላይ ደረጃ አደረግን ( bootstrap.css
፣ bootstrap-reboot.css
እና bootstrap-grid.css
ጨምሮ _root.scss
። :root
ከጊዜ በኋላ ተጨማሪ የ CSS ተለዋዋጮችን ይመልከቱ።
የገጽ ነባሪዎች
የተሻሉ የገጽ-አቀፍ ነባሪዎችን ለማቅረብ አባላቱ እና አባላቶቹ ተዘምነዋል <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,
// 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;
የፎንት ቁልል የኢሞጂ ቅርጸ ቁምፊዎችን ስለሚያካትት ብዙ የተለመዱ ምልክቶች/ዲንግባት ዩኒኮድ ቁምፊዎች እንደ ባለብዙ ቀለም ሥዕሎች እንደሚቀርቡ ልብ ይበሉ። የእነሱ ገጽታ በአሳሹ/የፕላትፎርም ቤተኛ ኢሞጂ ቅርጸ-ቁምፊ ላይ ጥቅም ላይ በሚውልበት ዘይቤ ይለያያል፣ እና በማንኛውም የCSS color
ቅጦች አይነኩም።
ይህ በመላው ቡትስትራፕ በአለም አቀፍ ደረጃ font-family
የሚተገበር እና በራስ ሰር የሚወረሰው ነው። <body>
አለምአቀፉን ለመቀየር ቡትስትራፕን font-family
ያዘምኑ እና እንደገና ያጠናቅቁ።$font-family-base
የሲኤስኤስ ተለዋዋጮች
ቡትስትራፕ 5 እየበሰለ ሲሄድ፣ Sassን ሁልጊዜ ማጠናቀር ሳያስፈልገው ተጨማሪ የእውነተኛ ጊዜ ማበጀትን ለማቅረብ ተጨማሪ እና ተጨማሪ ቅጦች በ CSS ተለዋዋጮች ይገነባሉ ። አካሄዳችን ምንጫችን Sass ተለዋዋጮችን ወስደን ወደ CSS ተለዋዋጮች መቀየር ነው። በዚህ መንገድ፣ የCSS ተለዋዋጮችን ባትጠቀሙም፣ አሁንም የ Sass ሃይል አለህ። ይህ አሁንም በሂደት ላይ ያለ እና ሙሉ በሙሉ ተግባራዊ ለማድረግ ጊዜ ይወስዳል።
ለምሳሌ፣ እነዚህን :root
የሲኤስኤስ ተለዋዋጮች ለተለመዱ <body>
ቅጦች አስቡባቸው
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
በተግባር፣ እነዛ ተለዋዋጮች በእንደገና ማስነሳት ውስጥ ይተገበራሉ።
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-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>
ርዕሶች እና አንቀጾች
ሁሉም የርዕስ ክፍሎች - ለምሳሌ <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
። padding-left
በርቷል <ul>
እና <ol>
ኤለመንቶችን ዳግም አስጀምረናል።
- ሁሉም ዝርዝሮች የላይኛው ህዳግ ተወግዷል
- እና የታችኛው ህዳግ መደበኛ
- የጎጆ ዝርዝሮች ምንም የታችኛው ህዳግ የላቸውም
- በዚህ መንገድ እነሱ የበለጠ እኩል ገጽታ አላቸው
- በተለይም ተጨማሪ የዝርዝር እቃዎች ሲከተሉ
- የግራ ንጣፍ እንዲሁ እንደገና ተጀምሯል።
- የታዘዘ ዝርዝር እነሆ
- ከጥቂት የዝርዝር እቃዎች ጋር
- አጠቃላይ እይታም ተመሳሳይ ነው።
- እንደ ቀዳሚው ያልታዘዘ ዝርዝር
ለቀላል የቅጥ አሰራር፣ ግልጽ ተዋረድ እና ለተሻለ ክፍተት መግለጫ ዝርዝሮች ተዘምነዋል margin
። ወደ <dd>
ድጋሚ አስጀምር እና መጨመር ። ዎች ደፋር ናቸው .margin-left
0
margin-bottom: .5rem
<dt>
- መግለጫ ዝርዝሮች
- የመግለጫ ዝርዝር ቃላትን ለመወሰን ፍጹም ነው።
- ጊዜ
- ለቃሉ ፍቺ.
- ለተመሳሳይ ቃል ሁለተኛ ትርጉም.
- ሌላ ቃል
- የዚህ ሌላ ቃል ፍቺ።
የመስመር ውስጥ ኮድ
የውስጠ-መስመር ኮድ ቅንጥቦችን በ <code>
. የኤችቲኤምኤል አንግል ቅንፎችን ለማምለጥ እርግጠኛ ይሁኑ።
<section>
በውስጥ መስመር መጠቅለል አለበት።
For example, <code><section></code> should be wrapped as inline.
ኮድ ያግዳል
<pre>
ኤስን ለብዙ የኮድ መስመሮች ተጠቀም ። አንዴ በድጋሚ፣ ለትክክለኛው ስራ በኮዱ ውስጥ ካሉ ማንኛቸውም አንግል ቅንፎች ማምለጥዎን ያረጋግጡ። ኤለመንቱ እንደገና ተጀምሯል <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>
በተለምዶ በቁልፍ ሰሌዳ የገባውን ግቤት ለማመልከት ይጠቀሙ ።
ቅንብሮችን ለማርትዕ ተጫን 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
ይመጣሉ ።
የሠንጠረዥ ርዕስ | የሠንጠረዥ ርዕስ | የሠንጠረዥ ርዕስ | የሠንጠረዥ ርዕስ |
---|---|---|---|
የጠረጴዛ ሕዋስ | የጠረጴዛ ሕዋስ | የጠረጴዛ ሕዋስ | የጠረጴዛ ሕዋስ |
የጠረጴዛ ሕዋስ | የጠረጴዛ ሕዋስ | የጠረጴዛ ሕዋስ | የጠረጴዛ ሕዋስ |
የጠረጴዛ ሕዋስ | የጠረጴዛ ሕዋስ | የጠረጴዛ ሕዋስ | የጠረጴዛ ሕዋስ |
ቅጾች
ለቀላል የመሠረት ቅጦች የተለያዩ የቅጽ ክፍሎች እንደገና ተጀምረዋል። አንዳንድ በጣም ታዋቂ ለውጦች እነኚሁና፡
<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)
።
እነዚህ ለውጦች እና ሌሎችም ከዚህ በታች ይታያሉ።
የቀን እና የቀለም ግቤት ድጋፍ
ያስታውሱ የቀን ግብዓቶች በሁሉም አሳሾች ማለትም Safari ሙሉ በሙሉ አይደገፉም ።
በአዝራሮች ላይ ጠቋሚዎች
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>
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
ይጠቀሙ ።