மறுதொடக்கம்
மறுதொடக்கம், ஒரு கோப்பில் உள்ள உறுப்பு-குறிப்பிட்ட CSS மாற்றங்களின் தொகுப்பு, கிக்ஸ்டார்ட் பூட்ஸ்டார்ப் ஒரு நேர்த்தியான, சீரான மற்றும் எளிமையான அடிப்படையை உருவாக்குவதற்கு வழங்குகிறது.
அணுகுமுறை
மறுதொடக்கம் இயல்பாக்கத்தின் மீது உருவாக்குகிறது, உறுப்பு தேர்வாளர்களை மட்டுமே பயன்படுத்தி ஓரளவு கருத்துடைய பாணிகளுடன் பல HTML கூறுகளை வழங்குகிறது. கூடுதல் ஸ்டைலிங் வகுப்புகளுடன் மட்டுமே செய்யப்படுகிறது. எடுத்துக்காட்டாக, <table>
எளிமையான அடிப்படைக்கு சில ஸ்டைல்களை மறுதொடக்கம் செய்து பின்னர் .table
, .table-bordered
, மற்றும் பலவற்றை வழங்குகிறோம்.
மறுதொடக்கத்தில் எதை மீற வேண்டும் என்பதைத் தேர்ந்தெடுப்பதற்கான எங்களின் வழிகாட்டுதல்கள் மற்றும் காரணங்கள் இங்கே:
- அளவிடக்கூடிய கூறு இடைவெளிக்கு
rem
sக்குப் பதிலாக s ஐப் பயன்படுத்த சில உலாவி இயல்புநிலை மதிப்புகளைப் புதுப்பிக்கவும் .em
- தவிர்க்கவும்
margin-top
. செங்குத்து விளிம்புகள் சரிந்து, எதிர்பாராத முடிவுகளைத் தரும். மிக முக்கியமாக, ஒற்றை திசையானதுmargin
எளிமையான மன மாதிரி. - சாதன அளவுகள் முழுவதும் எளிதாக அளவிடுவதற்கு, தொகுதி உறுப்புகள்
rem
sக்குmargin
s ஐப் பயன்படுத்த வேண்டும். - முடிந்தவரை பயன்படுத்தி , தொடர்புடைய சொத்துக்களின் அறிவிப்புகளை
font
குறைந்தபட்சமாக வைத்திருங்கள்.inherit
CSS மாறிகள்
v5.2.0 இல் சேர்க்கப்பட்டது@import
v5.1.1 உடன், எங்களின் அனைத்து CSS தொகுப்புகளிலும் ( bootstrap.css
, bootstrap-reboot.css
, மற்றும் bootstrap-grid.css
) உள்ளடக்குவதற்கு தேவையான களை தரப்படுத்தினோம் _root.scss
. :root
இது , அந்த மூட்டையில் எத்தனை பயன்படுத்தப்பட்டாலும், எல்லா தொகுப்புகளிலும் நிலை CSS மாறிகளை சேர்க்கிறது . இறுதியில் பூட்ஸ்டார்ப் 5 ஆனது, சாஸை எப்போதும் மீண்டும் தொகுக்க வேண்டிய அவசியமின்றி அதிக நிகழ்நேர தனிப்பயனாக்கத்தை வழங்குவதற்காக, காலப்போக்கில் அதிக CSS மாறிகள் சேர்க்கப்படும். எங்களின் மூல சாஸ் மாறிகளை எடுத்து அவற்றை CSS மாறிகளாக மாற்றுவதே எங்கள் அணுகுமுறை. அந்த வகையில், நீங்கள் CSS மாறிகளைப் பயன்படுத்தாவிட்டாலும், Sass இன் அனைத்து சக்தியும் உங்களிடம் உள்ளது. இது இன்னும் செயல்பாட்டில் உள்ளது மற்றும் முழுமையாக செயல்படுத்த நேரம் எடுக்கும்.
எடுத்துக்காட்டாக, :root
பொதுவான <body>
பாணிகளுக்கு இந்த CSS மாறிகளைக் கவனியுங்கள்:
@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
.
சொந்த எழுத்துரு அடுக்கு
பூட்ஸ்டார்ப் ஒவ்வொரு சாதனம் மற்றும் 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,
// 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
<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
நீக்கப்பட்டவை மற்றும் a margin-bottom: 1rem
. உள்ளமைக்கப்பட்ட பட்டியல்கள் இல்லை margin-bottom
. padding-left
ஆன் <ul>
மற்றும் <ol>
உறுப்புகளையும் மீட்டமைத்துள்ளோம் .
- அனைத்து பட்டியல்களும் அவற்றின் மேல் விளிம்பு அகற்றப்பட்டுள்ளன
- மேலும் அவற்றின் கீழ் விளிம்பு இயல்பாக்கப்பட்டது
- உள்ளமைக்கப்பட்ட பட்டியல்களுக்கு கீழ் விளிம்பு இல்லை
- இந்த வழியில் அவர்கள் இன்னும் சீரான தோற்றத்தைக் கொண்டுள்ளனர்
- குறிப்பாக அதிகமான பட்டியல் உருப்படிகளைப் பின்தொடரும் போது
- இடது திணிப்பும் மீட்டமைக்கப்பட்டது
- ஆர்டர் செய்யப்பட்ட பட்டியல் இதோ
- சில பட்டியல் உருப்படிகளுடன்
- இது ஒட்டுமொத்த தோற்றத்தையும் கொண்டுள்ளது
- முந்தைய வரிசைப்படுத்தப்படாத பட்டியல்
எளிமையான ஸ்டைலிங், தெளிவான படிநிலை மற்றும் சிறந்த இடைவெளி ஆகியவற்றிற்கு, விளக்கப் பட்டியல்கள் புதுப்பிக்கப்பட்டுள்ளன margin
. க்கு <dd>
மீட்டமைத்து சேர்க்கவும் . கள் தடித்தவை .margin-left
0
margin-bottom: .5rem
<dt>
- விளக்க பட்டியல்கள்
- விதிமுறைகளை வரையறுக்க ஒரு விளக்கப் பட்டியல் சரியானது.
- கால
- கால வரையறை.
- அதே சொல்லுக்கான இரண்டாவது விளக்கம்.
- மற்றொரு சொல்
- இந்த மற்ற சொல்லுக்கான வரையறை.
இன்லைன் குறியீடு
உடன் குறியீட்டின் இன்லைன் துணுக்குகளை மடக்கு <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>
பொதுவாக விசைப்பலகை வழியாக உள்ளிடப்படும் உள்ளீட்டைக் குறிக்க பயன்படுத்தவும் .
அமைப்புகளைத் திருத்த, அழுத்தவும் 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
.
அட்டவணை தலைப்பு | அட்டவணை தலைப்பு | அட்டவணை தலைப்பு | அட்டவணை தலைப்பு |
---|---|---|---|
அட்டவணை செல் | அட்டவணை செல் | அட்டவணை செல் | அட்டவணை செல் |
அட்டவணை செல் | அட்டவணை செல் | அட்டவணை செல் | அட்டவணை செல் |
அட்டவணை செல் | அட்டவணை செல் | அட்டவணை செல் | அட்டவணை செல் |
<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>
களுக்கு எல்லைகள், திணிப்பு அல்லது விளிம்பு இல்லை, எனவே அவை தனிப்பட்ட உள்ளீடுகள் அல்லது உள்ளீடுகளின் குழுக்களுக்கு ரேப்பர்களாக எளிதாகப் பயன்படுத்தப்படலாம்.<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)
.
இந்த மாற்றங்கள் மற்றும் பல, கீழே காட்டப்பட்டுள்ளன.
தேதி மற்றும் வண்ண உள்ளீடு ஆதரவு
சஃபாரி போன்ற அனைத்து உலாவிகளிலும் தேதி உள்ளீடுகள் முழுமையாக ஆதரிக்கப்படவில்லை என்பதை நினைவில் கொள்க.
பொத்தான்களில் சுட்டிகள்
role="button"
மறுதொடக்கம் இயல்புநிலை கர்சரை மாற்றுவதற்கான மேம்பாட்டை உள்ளடக்கியது pointer
. கூறுகள் ஊடாடத்தக்கவை என்பதைக் குறிக்க உதவும் கூறுகளுடன் இந்தப் பண்புக்கூறைச் சேர்க்கவும். <button>
அவற்றின் சொந்த cursor
மாற்றத்தைப் பெறும் உறுப்புகளுக்கு இந்தப் பங்கு அவசியமில்லை .
<span role="button" tabindex="0">Non-button element button</span>
மற்ற கூறுகள்
முகவரி
இலிருந்து உலாவி இயல்புநிலையை மீட்டமைக்க <address>
உறுப்பு புதுப்பிக்கப்பட்டது font-style
. இப்போது மரபுரிமையாகவும் சேர்க்கப்பட்டுள்ளது. கள் அருகிலுள்ள மூதாதையருக்கான தொடர்புத் தகவலை வழங்குவதற்காக (அல்லது முழு வேலை அமைப்பு). உடன் வரிகளை முடிப்பதன் மூலம் வடிவமைப்பைப் பாதுகாக்கவும் .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 முழு பெயர்
[email protected]
தொகுதி மேற்கோள்
margin
பிளாக்கோட்களில் இயல்புநிலை , எனவே மற்ற உறுப்புகளுடன் மிகவும் சீரானதாக 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 மற்றும் $(...).show()
முறைகளுடன் இணங்கவில்லை . எனவே, தனிமங்களை [hidden]
நிர்வகிப்பதற்கான பிற நுட்பங்களை நாங்கள் தற்போது குறிப்பாக அங்கீகரிக்கவில்லை .display
ஒரு தனிமத்தின் தெரிவுநிலையை display
மாற்றுவதற்கு, அது மாற்றியமைக்கப்படவில்லை மற்றும் ஆவணத்தின் ஓட்டத்தை உறுப்பு இன்னும் பாதிக்கலாம், அதற்கு பதிலாக .invisible
வகுப்பைப் பயன்படுத்தவும்.