in English

రీబూట్ చేయండి

రీబూట్, ఒకే ఫైల్‌లోని మూలకం-నిర్దిష్ట CSS మార్పుల సమాహారం, నిర్మించడానికి సొగసైన, స్థిరమైన మరియు సరళమైన బేస్‌లైన్‌ను అందించడానికి కిక్‌స్టార్ట్ బూట్‌స్ట్రాప్.

ఈ పేజీలో

అప్రోచ్

సాధారణీకరణపై రీబూట్ బిల్డ్ అవుతుంది, ఎలిమెంట్ సెలెక్టర్‌లను మాత్రమే ఉపయోగించి కొంతవరకు అభిప్రాయ శైలులతో అనేక HTML మూలకాలను అందిస్తుంది. అదనపు స్టైలింగ్ తరగతులతో మాత్రమే చేయబడుతుంది. ఉదాహరణకు, మేము <table>సరళమైన బేస్‌లైన్ కోసం కొన్ని శైలులను రీబూట్ చేస్తాము మరియు తర్వాత .table, .table-bordered, మరియు మరిన్ని అందిస్తాము.

రీబూట్‌లో ఏది భర్తీ చేయాలో ఎంచుకోవడానికి మా మార్గదర్శకాలు మరియు కారణాలు ఇక్కడ ఉన్నాయి:

స్కేలబుల్ కాంపోనెంట్ స్పేసింగ్ కోసం sకి remబదులుగా sని ఉపయోగించడానికి కొన్ని బ్రౌజర్ డిఫాల్ట్ విలువలను అప్‌డేట్ చేయండి .em
మానుకోండి margin-top. నిలువు అంచులు కుప్పకూలవచ్చు, ఊహించని ఫలితాలను ఇస్తుంది. అయితే మరీ ముఖ్యంగా, ఒకే దిశ marginఅనేది సరళమైన మానసిక నమూనా.
పరికర పరిమాణాలలో సులభంగా స్కేలింగ్ కోసం, బ్లాక్ మూలకాలు rems కోసం marginsని ఉపయోగించాలి.
సాధ్యమైనప్పుడల్లా ఉపయోగించి సంబంధిత లక్షణాల ప్రకటనలను fontకనిష్టంగా ఉంచండి.inherit

పేజీ డిఫాల్ట్‌లు

<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

శీర్షికలు మరియు పేరాలు

అన్ని హెడ్డింగ్ ఎలిమెంట్స్-ఉదా, <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>మూలకాలను కూడా రీసెట్ చేసాము.

అన్ని జాబితాలు వాటి ఎగువ మార్జిన్ తీసివేయబడ్డాయి
మరియు వారి దిగువ మార్జిన్ సాధారణీకరించబడింది
నెస్టెడ్ జాబితాలకు దిగువ మార్జిన్ లేదు
- ఈ విధంగా వారు మరింత ఏకరీతి రూపాన్ని కలిగి ఉంటారు
- ప్రత్యేకించి మరిన్ని జాబితా అంశాలను అనుసరించినప్పుడు
ఎడమ పాడింగ్ కూడా రీసెట్ చేయబడింది

ఆర్డర్ చేసిన జాబితా ఇక్కడ ఉంది
కొన్ని జాబితా అంశాలతో
ఇది మొత్తం రూపాన్ని కలిగి ఉంది
మునుపటి క్రమం లేని జాబితా వలె

సరళమైన స్టైలింగ్, స్పష్టమైన సోపానక్రమం మరియు మెరుగైన అంతరం కోసం, వివరణ జాబితాలు నవీకరించబడ్డాయి margins. <dd>లు రీసెట్ margin-leftమరియు 0జోడించడానికి margin-bottom: .5rem. <dt>లు బోల్డ్‌గా ఉన్నాయి .

వివరణ జాబితాలు: నిబంధనలను నిర్వచించడానికి వివరణ జాబితా సరైనది.
పదం: పదానికి నిర్వచనం.; అదే పదానికి రెండవ నిర్వచనం.
మరొక పదం: ఈ ఇతర పదానికి నిర్వచనం.

ఇన్లైన్ కోడ్

తో కోడ్ యొక్క ఇన్‌లైన్ స్నిప్పెట్‌లను చుట్టండి <code>. HTML కోణం బ్రాకెట్‌ల నుండి తప్పించుకోవాలని నిర్ధారించుకోండి.

ఉదాహరణకు, <section>ఇన్‌లైన్‌గా చుట్టి ఉండాలి.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

కోడ్ బ్లాక్స్

<pre>బహుళ పంక్తుల కోడ్ కోసం sని ఉపయోగించండి . మరోసారి, సరైన రెండరింగ్ కోసం కోడ్‌లోని ఏదైనా యాంగిల్ బ్రాకెట్‌లను తప్పించుకోవాలని నిర్ధారించుకోండి. మూలకం దాని <pre>తొలగించడానికి మరియు దాని కోసం యూనిట్లను margin-topఉపయోగించడానికి రీసెట్ చేయబడింది .remmargin-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>ఫీల్డ్‌సెట్‌ల వంటి 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).

ఈ మార్పులు మరియు మరిన్ని, క్రింద ప్రదర్శించబడ్డాయి.

ఉదాహరణ పురాణం

ఉదాహరణ ఇన్పుట్

ఉదాహరణ ఇమెయిల్

ఉదాహరణ టెలిఫోన్

ఉదాహరణ url

ఉదాహరణ సంఖ్య

ఉదాహరణ శోధన

ఉదాహరణ పరిధి

ఉదాహరణ ఫైల్ ఇన్‌పుట్

ఉదాహరణ ఎంచుకోండి

ఈ చెక్‌బాక్స్‌ని చెక్ చేయండి

ఎంపిక ఒకటి ఇది మరియు అది ఎంపిక రెండు అనేది ఈ ఫాన్సీ ఫారమ్ నియంత్రణల యొక్క చుట్టడాన్ని ప్రదర్శించడానికి చాలా పొడవుగా ఉంటుంది. ఎంపిక మూడు నిలిపివేయబడింది

ఉదాహరణ టెక్స్ట్ ఏరియా

ఉదాహరణ తేదీ

ఉదాహరణ సమయం

ఉదాహరణ పాస్వర్డ్

ఉదాహరణ తేదీ సమయం-స్థానికం

ఉదాహరణ వారం

ఉదాహరణ నెల

ఉదాహరణ రంగు

ఉదాహరణ అవుట్‌పుట్ 100

తేదీ & రంగు ఇన్‌పుట్ మద్దతు

Safari అనే అన్ని బ్రౌజర్‌లు తేదీ ఇన్‌పుట్‌లకు పూర్తిగా మద్దతు ఇవ్వలేదని గుర్తుంచుకోండి.

బటన్లపై పాయింటర్లు

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>చేయడానికి ప్రాథమిక స్టైలింగ్‌ను పొందుతుంది.

నుల్లా అట్ర్ విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్.

సారాంశం

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తరగతిని ఉపయోగించండి.