ዳግም አስነሳ

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

አቀራረብ

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

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

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

የገጽ ነባሪዎች

የተሻሉ የገጽ-አቀፍ ነባሪዎችን ለማቅረብ አባላቱ እና አባላቶቹ ተዘምነዋል <html>። <body>የበለጠ በተለይ፡-

box-sizingበአለምአቀፍ ደረጃ በሁሉም ኤለመንቶች ላይ ተቀምጧል - *::beforeእና *::afterጨምሮ border-box. ይህ የታወጀው የንጥል ስፋት በፕላዲንግ ወይም በድንበር ምክንያት ፈጽሞ እንደማይበልጥ ያረጋግጣል።
በ ላይ ምንም መሠረት font-sizeአልተገለጸም <html>ነገር ግን 16pxይታሰባል (የአሳሹ ነባሪ)። የተጠቃሚ ምርጫዎችን በማክበር እና የበለጠ ተደራሽ አቀራረብን በማረጋገጥ በሚዲያ መጠይቆች በኩል ለቀላል ምላሽ አይነት-መለካት font-size: 1remይተገበራል ።<body>
እንዲሁም <body>ዓለም አቀፋዊ font-family፣ line-heightእና text-align. የቅርጸ-ቁምፊ አለመመጣጠንን ለመከላከል ይህ በኋላ ላይ በአንዳንድ የቅጽ አካላት የተወረሰ ነው።
ለደህንነት ሲባል፣ <body>የተገለጸ background-color፣ ያልተገባ ለ #fff.

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

ነባሪ የድር ቅርጸ-ቁምፊዎች (Helvetica Neue፣ Helvetica እና Arial) በBootstrap 4 ውስጥ ተጥለዋል እና በእያንዳንዱ መሳሪያ እና ስርዓተ ክወና ላይ ለተሻለ የፅሁፍ አቀራረብ በ"ቤተኛ የቅርጸ-ቁምፊ ቁልል" ተተክተዋል። በዚህ Smashing Magazine ጽሑፍ ውስጥ ስለ ቤተኛ የቅርጸ-ቁምፊ ቁልል የበለጠ ያንብቡ ።

$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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

ይህ በመላው ቡትስትራፕ በአለም አቀፍ ደረጃ 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. የቡት ማሰሪያ ርዕስ

ዝርዝሮች

ሁሉም ዝርዝሮች—፣፣ <ul>እና <ol>— <dl>ተወግደዋል margin-topእና ሀ margin-bottom: 1rem. የጎጆ ዝርዝሮች የላቸውም margin-bottom።

Lorem ipsum dolor ሲት አሜት
Consectetur adipiscing elit
ኢንቲጀር molestie lorem at massa
ፋሲሊሲስ በፕሪቲየም ኒስላ አሊኬት
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor ሴም
- Ac tristique libero volutpat በ
Faucibus porta lacus fringilla vel
አኔን ሲት አሜት ኤራት ኑንክ
Eget porttitor lorem

Lorem ipsum dolor ሲት አሜት
Consectetur adipiscing elit
ኢንቲጀር molestie lorem at massa
ፋሲሊሲስ በፕሪቲየም ኒስላ አሊኬት
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
አኔን ሲት አሜት ኤራት ኑንክ
Eget porttitor lorem

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

መግለጫ ዝርዝሮች: የመግለጫ ዝርዝር ቃላትን ለመወሰን ፍጹም ነው።
ኢዩስሞድ: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida እና eget metus።
ማሌሱዳ ፖርታ: Etiam porta sem malesuada magna mollis euismod.

አስቀድሞ የተቀረጸ ጽሑፍ

ኤለመንቱ እንደገና ተጀምሯል <pre>እሱን ለማስወገድ እና ለእሱ ክፍሎችን margin-topለመጠቀም ።remmargin-bottom

.ምሳሌ-አባል {
  ህዳግ-ከታች: 1rem;
}

ጠረጴዛዎች

ሰንጠረዦች በትንሹ ወደ ቅጥ <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)።

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

ምሳሌ አፈ ታሪክ

ምሳሌ ግቤት

ምሳሌ ይምረጡ

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

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

የጽሑፍ አካባቢ ምሳሌ

የምሳሌ ቀን

ምሳሌ ጊዜ

ምሳሌ ውፅዓት 100

የተለያዩ አካላት

አድራሻ

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

ትዊተር ፣ ኢንክ
_
_

ሙሉ ስም
[email protected]

Blockquote

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat a ante።

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

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

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

Nulla attr vitae elit ሊበሮ፣ አንድ ፋሬትራ አውጉ።

ማጠቃለያ

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

አንዳንድ ዝርዝሮች

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

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

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

HTML5 `[hidden]`ባህሪ

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

<input type="text" hidden>

jQuery አለመጣጣም

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

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