రీబూట్ చేయండి
రీబూట్, ఒకే ఫైల్లోని మూలకం-నిర్దిష్ట CSS మార్పుల సమాహారం, నిర్మించడానికి సొగసైన, స్థిరమైన మరియు సరళమైన బేస్లైన్ను అందించడానికి కిక్స్టార్ట్ బూట్స్ట్రాప్.
అప్రోచ్
సాధారణీకరణపై రీబూట్ బిల్డ్ అవుతుంది, ఎలిమెంట్ సెలెక్టర్లను మాత్రమే ఉపయోగించి కొంతవరకు అభిప్రాయ శైలులతో అనేక HTML మూలకాలను అందిస్తుంది. అదనపు స్టైలింగ్ తరగతులతో మాత్రమే చేయబడుతుంది. ఉదాహరణకు, మేము <table>
సరళమైన బేస్లైన్ కోసం కొన్ని శైలులను రీబూట్ చేస్తాము మరియు తర్వాత .table
, .table-bordered
, మరియు మరిన్ని అందిస్తాము.
రీబూట్లో ఏది భర్తీ చేయాలో ఎంచుకోవడానికి మా మార్గదర్శకాలు మరియు కారణాలు ఇక్కడ ఉన్నాయి:
- స్కేలబుల్ కాంపోనెంట్ స్పేసింగ్ కోసం sకి
rem
బదులుగా 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
. ఇది అన్ని బండిల్లకు స్థాయి CSS వేరియబుల్లను జోడిస్తుంది :root
, వాటిలో ఎన్ని ఆ బండిల్లో ఉపయోగించబడ్డాయి అనే దానితో సంబంధం లేకుండా. అంతిమంగా బూట్స్ట్రాప్ 5 ఎల్లప్పుడూ Sassని మళ్లీ కంపైల్ చేయాల్సిన అవసరం లేకుండా మరింత నిజ-సమయ అనుకూలీకరణను అందించడానికి, కాలక్రమేణా జోడించబడిన మరిన్ని CSS వేరియబుల్లను చూడటం కొనసాగిస్తుంది . మా సోర్స్ సాస్ వేరియబుల్స్ తీసుకొని వాటిని CSS వేరియబుల్స్గా మార్చడం మా విధానం. ఆ విధంగా, మీరు CSS వేరియబుల్స్ని ఉపయోగించకపోయినా, మీరు ఇప్పటికీ Sass యొక్క మొత్తం శక్తిని కలిగి ఉంటారు. ఇది ఇంకా ప్రోగ్రెస్లో ఉంది మరియు పూర్తిగా అమలు చేయడానికి సమయం పడుతుంది.
ఉదాహరణకు, సాధారణ శైలుల :root
కోసం ఈ CSS వేరియబుల్లను పరిగణించండి:<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
.
స్థానిక ఫాంట్ స్టాక్
బూట్స్ట్రాప్ ప్రతి పరికరం మరియు 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
s. <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>
ఫీల్డ్సెట్ల వంటి s కూడా రీస్టైల్ చేయబడినవి, రక రకాల హెడ్డింగ్గా ప్రదర్శించబడతాయి.<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)
.
ఈ మార్పులు మరియు మరిన్ని, క్రింద ప్రదర్శించబడ్డాయి.
తేదీ & రంగు ఇన్పుట్ మద్దతు
Safari అనే అన్ని బ్రౌజర్లు తేదీ ఇన్పుట్లకు పూర్తిగా మద్దతు ఇవ్వలేదని గుర్తుంచుకోండి.
బటన్లపై పాయింటర్లు
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>
j క్వెరీ అననుకూలత
[hidden]
j క్వెరీలు $(...).hide()
మరియు $(...).show()
పద్ధతులకు అనుకూలంగా లేదు. అందువల్ల, మూలకాల నిర్వహణ కోసం మేము ప్రస్తుతం [hidden]
ఇతర సాంకేతికతలను ప్రత్యేకంగా ఆమోదించడం లేదు.display
మూలకం యొక్క దృశ్యమానతను కేవలం టోగుల్ చేయడానికి, అంటే display
అది సవరించబడలేదు మరియు మూలకం ఇప్పటికీ పత్రం యొక్క ప్రవాహాన్ని ప్రభావితం చేయగలదు, బదులుగా .invisible
తరగతిని ఉపయోగించండి.