முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
in English

மறுதொடக்கம்

மறுதொடக்கம், ஒரு கோப்பில் உள்ள உறுப்பு-குறிப்பிட்ட CSS மாற்றங்களின் தொகுப்பு, கிக்ஸ்டார்ட் பூட்ஸ்டார்ப் ஒரு நேர்த்தியான, சீரான மற்றும் எளிமையான அடிப்படையை உருவாக்குவதற்கு வழங்குகிறது.

இந்தப் பக்கத்தில்

அணுகுமுறை

மறுதொடக்கம் இயல்பாக்கத்தின் மீது உருவாக்குகிறது, உறுப்பு தேர்வாளர்களை மட்டுமே பயன்படுத்தி ஓரளவு கருத்துடைய பாணிகளுடன் பல HTML கூறுகளை வழங்குகிறது. கூடுதல் ஸ்டைலிங் வகுப்புகளுடன் மட்டுமே செய்யப்படுகிறது. எடுத்துக்காட்டாக, <table>எளிமையான அடிப்படைக்கு சில ஸ்டைல்களை மறுதொடக்கம் செய்து பின்னர் .table, .table-bordered, மற்றும் பலவற்றை வழங்குகிறோம்.

மறுதொடக்கத்தில் எதை மீற வேண்டும் என்பதைத் தேர்ந்தெடுப்பதற்கான எங்களின் வழிகாட்டுதல்கள் மற்றும் காரணங்கள் இங்கே:

  • அளவிடக்கூடிய கூறு இடைவெளிக்கு remsக்குப் பதிலாக s ஐப் பயன்படுத்த சில உலாவி இயல்புநிலை மதிப்புகளைப் புதுப்பிக்கவும் .em
  • தவிர்க்கவும் margin-top. செங்குத்து விளிம்புகள் சரிந்து, எதிர்பாராத முடிவுகளைத் தரும். மிக முக்கியமாக, ஒற்றை திசையானது marginஎளிமையான மன மாதிரி.
  • சாதன அளவுகள் முழுவதும் எளிதாக அளவிடுவதற்கு, தொகுதி உறுப்புகள் remsக்கு margins ஐப் பயன்படுத்த வேண்டும்.
  • முடிந்தவரை பயன்படுத்தி , தொடர்புடைய சொத்துக்களின் அறிவிப்புகளை fontகுறைந்தபட்சமாக வைத்திருங்கள்.inherit

CSS மாறிகள்

v5.1.1 இல் சேர்க்கப்பட்டது

@importv5.1.1 மூலம், எங்களின் அனைத்து CSS தொகுப்புகளிலும் ( bootstrap.css, bootstrap-reboot.css, மற்றும் bootstrap-grid.cssசேர்ப்பது உட்பட ) நமக்குத் தேவையானவற்றைத் தரப்படுத்தியுள்ளோம் _root.scss. இது, அந்தத் தொகுப்பில் எத்தனை பயன்படுத்தப்பட்டாலும், எல்லாத் தொகுப்புகளிலும் நிலை CSS மாறிகளைச் சேர்க்கிறது :root. இறுதியில் பூட்ஸ்டார்ப் 5 தொடரும். மேலும் 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.

சொந்த எழுத்துரு அடுக்கு

பூட்ஸ்டார்ப் ஒவ்வொரு சாதனம் மற்றும் OS இல் சிறந்த உரையை வழங்குவதற்கு "நேட்டிவ் எழுத்துரு அடுக்கு" அல்லது "கணினி எழுத்துரு அடுக்கு" ஆகியவற்றைப் பயன்படுத்துகிறது. இந்த கணினி எழுத்துருக்கள், இன்றைய சாதனங்களை மனதில் கொண்டு, திரைகளில் மேம்படுத்தப்பட்ட ரெண்டரிங், மாறி எழுத்துரு ஆதரவு மற்றும் பலவற்றைக் கொண்டு வடிவமைக்கப்பட்டுள்ளது. இந்த ஸ்மாஷிங் இதழ் கட்டுரையில் சொந்த எழுத்துரு அடுக்குகள் பற்றி மேலும் படிக்கவும் .

$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

CSS மாறிகள்

பூட்ஸ்டார்ப் 5 தொடர்ந்து முதிர்ச்சியடையும் போது, ​​எப்போதும் சாஸை மீண்டும் தொகுக்க வேண்டிய அவசியமின்றி அதிக நிகழ்நேர தனிப்பயனாக்கத்தை வழங்குவதற்கான வழிமுறையாக CSS மாறிகள் மூலம் மேலும் மேலும் பாணிகள் உருவாக்கப்படும். எங்களின் மூல சாஸ் மாறிகளை எடுத்து அவற்றை CSS மாறிகளாக மாற்றுவதே எங்கள் அணுகுமுறை. அந்த வகையில், நீங்கள் CSS மாறிகளைப் பயன்படுத்தாவிட்டாலும், Sass இன் அனைத்து சக்தியும் உங்களிடம் உள்ளது. இது இன்னும் செயல்பாட்டில் உள்ளது மற்றும் முழுமையாக செயல்படுத்த நேரம் எடுக்கும்.

எடுத்துக்காட்டாக, :rootபொதுவான <body>பாணிகளுக்கு இந்த CSS மாறிகளைக் கவனியுங்கள்:

  @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நீக்கப்பட்டவை மற்றும் a margin-bottom: 1rem. உள்ளமைக்கப்பட்ட பட்டியல்கள் இல்லை margin-bottom. padding-leftஆன் <ul>மற்றும் <ol>உறுப்புகளையும் மீட்டமைத்துள்ளோம் .

  • அனைத்து பட்டியல்களும் அவற்றின் மேல் விளிம்பு அகற்றப்பட்டுள்ளன
  • மேலும் அவற்றின் கீழ் விளிம்பு இயல்பாக்கப்பட்டது
  • உள்ளமைக்கப்பட்ட பட்டியல்களுக்கு கீழ் விளிம்பு இல்லை
    • இந்த வழியில் அவர்கள் இன்னும் சீரான தோற்றத்தைக் கொண்டுள்ளனர்
    • குறிப்பாக அதிகமான பட்டியல் உருப்படிகளைப் பின்தொடரும் போது
  • இடது திணிப்பும் மீட்டமைக்கப்பட்டது
  1. ஆர்டர் செய்யப்பட்ட பட்டியல் இதோ
  2. சில பட்டியல் உருப்படிகளுடன்
  3. இது ஒட்டுமொத்த தோற்றத்தையும் கொண்டுள்ளது
  4. முந்தைய வரிசைப்படுத்தப்படாத பட்டியல்

எளிமையான ஸ்டைலிங், தெளிவான படிநிலை மற்றும் சிறந்த இடைவெளி ஆகியவற்றிற்கு, விளக்கப் பட்டியல்கள் புதுப்பிக்கப்பட்டுள்ளன margin. க்கு <dd>மீட்டமைத்து சேர்க்கவும் . கள் தடித்தவை .margin-left0margin-bottom: .5rem<dt>

விளக்க பட்டியல்கள்
விதிமுறைகளை வரையறுக்க ஒரு விளக்கப் பட்டியல் சரியானது.
கால
கால வரையறை.
அதே சொல்லுக்கான இரண்டாவது விளக்கம்.
மற்றொரு சொல்
இந்த மற்ற சொல்லுக்கான வரையறை.

இன்லைன் குறியீடு

உடன் குறியீட்டின் இன்லைன் துணுக்குகளை மடக்கு <code>. HTML கோண அடைப்புக்குறிக்குள் இருந்து தப்பிக்க மறக்காதீர்கள்.

உதாரணமாக, <section>இன்லைனாக மூடப்பட்டிருக்க வேண்டும். 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

குறியீடு தொகுதிகள்

<pre>குறியீட்டின் பல வரிகளுக்கு s ஐப் பயன்படுத்தவும் . மீண்டும் ஒருமுறை, முறையான ரெண்டரிங் செய்வதற்கு, குறியீட்டில் உள்ள எந்த கோண அடைப்புக்களிலிருந்தும் தப்பிக்க மறக்காதீர்கள். உறுப்பு அகற்றப்பட்டு அதன் அலகுகளைப் பயன்படுத்த <pre>மீட்டமைக்கப்பட்டது .margin-topremmargin-bottom

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

<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 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

பயனர் உள்ளீடு

<kbd>பொதுவாக விசைப்பலகை வழியாக உள்ளிடப்படும் உள்ளீட்டைக் குறிக்க பயன்படுத்தவும் .

கோப்பகங்களை மாற்ற, கோப்பகத்தின் cdபெயரைத் தொடர்ந்து தட்டச்சு செய்யவும்.
அமைப்புகளைத் திருத்த, அழுத்தவும் 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>​​கள், சரிவு பார்டர்கள், மற்றும் text-alignமுழுவதும் சீரான உறுதி. பார்டர்கள், திணிப்பு மற்றும் பலவற்றிற்கான கூடுதல் மாற்றங்கள் வகுப்பில் வருகின்றன.table .

இது ஒரு எடுத்துக்காட்டு அட்டவணை, இது உள்ளடக்கங்களை விவரிக்க அதன் தலைப்பு.
அட்டவணை தலைப்பு அட்டவணை தலைப்பு அட்டவணை தலைப்பு அட்டவணை தலைப்பு
அட்டவணை செல் அட்டவணை செல் அட்டவணை செல் அட்டவணை செல்
அட்டவணை செல் அட்டவணை செல் அட்டவணை செல் அட்டவணை செல்
அட்டவணை செல் அட்டவணை செல் அட்டவணை செல் அட்டவணை செல்

படிவங்கள்

எளிமையான அடிப்படை பாணிகளுக்காக பல்வேறு வடிவ கூறுகள் மறுதொடக்கம் செய்யப்பட்டுள்ளன. மிகவும் குறிப்பிடத்தக்க சில மாற்றங்கள் இங்கே:

  • <fieldset>களுக்கு எல்லைகள், திணிப்பு அல்லது விளிம்பு இல்லை, எனவே அவை தனிப்பட்ட உள்ளீடுகள் அல்லது உள்ளீடுகளின் குழுக்களுக்கு ரேப்பர்களாக எளிதாகப் பயன்படுத்தப்படலாம்.
  • <legend>கள், புலத்தொகுப்புகளைப் போலவே, வகைகளின் தலைப்பாகக் காட்டப்படும் வகையில் மறுசீரமைக்கப்பட்டுள்ளன.
  • <label>கள் பயன்படுத்த display: inline-blockஅனுமதிக்கும் marginவகையில் அமைக்கப்பட்டுள்ளது.
  • <input>s, <select>s, <textarea>s மற்றும் <button>s ஆகியவை இயல்பாக்கம் மூலம் குறிப்பிடப்படுகின்றன, ஆனால் மறுதொடக்கம் அவற்றின் marginமற்றும் தொகுப்புகளையும் நீக்குகிறது line-height: inherit.
  • <textarea>கிடைமட்ட மறுஅளவிடல் பெரும்பாலும் பக்க தளவமைப்பை "முறிக்கிறது" என்பதால் கள் செங்குத்தாக மட்டுமே மறுஅளவிடத்தக்கதாக மாற்றியமைக்கப்படுகின்றன.
  • <button>s மற்றும் <input>பொத்தான் கூறுகள் எப்போது cursor: pointerஇருக்கும் :not(:disabled).

இந்த மாற்றங்கள் மற்றும் பல, கீழே காட்டப்பட்டுள்ளன.

உதாரண புராணம்

100

தேதி மற்றும் வண்ண உள்ளீடு ஆதரவு

சஃபாரி போன்ற அனைத்து உலாவிகளிலும் தேதி உள்ளீடுகள் முழுமையாக ஆதரிக்கப்படவில்லை என்பதை நினைவில் கொள்க.

பொத்தான்களில் சுட்டிகள்

role="button"மறுதொடக்கம் இயல்புநிலை கர்சரை மாற்றுவதற்கான மேம்பாட்டை உள்ளடக்கியது pointer. கூறுகள் ஊடாடத்தக்கவை என்பதைக் குறிக்க உதவும் கூறுகளுடன் இந்தப் பண்புக்கூறைச் சேர்க்கவும். <button>அவற்றின் சொந்த cursorமாற்றத்தைப் பெறும் உறுப்புகளுக்கு இந்தப் பங்கு அவசியமில்லை .

பொத்தான் அல்லாத உறுப்பு பொத்தான் 
<span role="button" tabindex="0">Non-button element button</span>

மற்ற கூறுகள்

முகவரி

இலிருந்து உலாவி இயல்புநிலையை மீட்டமைக்க <address>உறுப்பு புதுப்பிக்கப்பட்டது font-style. இப்போது மரபுரிமையாகவும் சேர்க்கப்பட்டுள்ளது. கள் அருகிலுள்ள மூதாதையருக்கான தொடர்புத் தகவலை வழங்குவதற்காக (அல்லது முழு வேலை அமைப்பு). உடன் வரிகளை முடிப்பதன் மூலம் வடிவமைப்பைப் பாதுகாக்கவும் .italicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
முழு பெயர்
[email protected]

தொகுதி மேற்கோள்

marginபிளாக்கோட்களில் இயல்புநிலை , எனவே மற்ற உறுப்புகளுடன் மிகவும் சீரானதாக 1em 40pxஅதை மீட்டமைக்கிறோம் .0 0 1rem

நன்கு அறியப்பட்ட மேற்கோள், தொகுதி மேற்கோள் உறுப்பில் உள்ளது.

மூலத் தலைப்பில் பிரபலமான ஒருவர்

இன்லைன் கூறுகள்

உறுப்பு <abbr>பத்தி உரையில் தனித்து நிற்க அடிப்படை ஸ்டைலிங் பெறுகிறது.

HTML சுருக்க உறுப்பு .

சுருக்கம்

cursorசுருக்கத்தின் இயல்புநிலை text, எனவே pointerஉறுப்பைக் கிளிக் செய்வதன் மூலம் தொடர்பு கொள்ள முடியும் என்பதைத் தெரிவிக்க அதை மீட்டமைக்கிறோம்.

சில விவரங்கள்

விவரங்கள் பற்றிய கூடுதல் தகவல்.

இன்னும் கூடுதலான விவரங்கள்

விவரங்களைப் பற்றிய கூடுதல் விவரங்கள் இங்கே உள்ளன.

HTML5 [hidden]பண்புக்கூறு

HTML5 ஆனது ஒரு புதிய உலகளாவிய பண்புக்கூறை[hidden] சேர்க்கிறது , இது display: noneமுன்னிருப்பாக வடிவமைக்கப்பட்டுள்ளது. PureCSS இலிருந்து ஒரு யோசனையைப் பெறுவது, தற்செயலாக மேலெழுதப்படுவதைத் [hidden] { display: none !important; }தடுக்க உதவுவதன் மூலம் இந்த இயல்புநிலையை மேம்படுத்துகிறோம் .display

<input type="text" hidden>
jQuery இணக்கமின்மை

[hidden]$(...).hide()jQuery மற்றும் $(...).show()முறைகளுடன் இணங்கவில்லை . எனவே, தனிமங்களை [hidden]நிர்வகிப்பதற்கான பிற நுட்பங்களை நாங்கள் தற்போது குறிப்பாக அங்கீகரிக்கவில்லை .display

ஒரு தனிமத்தின் தெரிவுநிலையை displayமாற்றுவதற்கு, அது மாற்றியமைக்கப்படவில்லை மற்றும் ஆவணத்தின் ஓட்டத்தை உறுப்பு இன்னும் பாதிக்கலாம், அதற்கு பதிலாக .invisibleவகுப்பைப் பயன்படுத்தவும்.