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>
<body>గ్లోబల్ font-family, line-heightమరియు text-align. _ ఫాంట్ అస్థిరతలను నివారించడానికి ఇది కొన్ని ఫారమ్ మూలకాల ద్వారా తరువాత వారసత్వంగా పొందబడుతుంది.
భద్రత కోసం, <body>డిక్లేర్డ్ background-color, డిఫాల్ట్‌గా ఉంది #fff.

స్థానిక ఫాంట్ స్టాక్

డిఫాల్ట్ వెబ్ ఫాంట్‌లు (హెల్వెటికా న్యూయూ, హెల్వెటికా మరియు ఏరియల్) బూట్‌స్ట్రాప్ 4లో తొలగించబడ్డాయి మరియు ప్రతి పరికరం మరియు OSలో వాంఛనీయ టెక్స్ట్ రెండరింగ్ కోసం "స్థానిక ఫాంట్ స్టాక్"తో భర్తీ చేయబడ్డాయి. ఈ స్మాషింగ్ మ్యాగజైన్ కథనంలో స్థానిక ఫాంట్ స్టాక్‌ల గురించి మరింత చదవండి .

$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,
  // 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.

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

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

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

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

ముందే ఫార్మాట్ చేయబడిన వచనం

మూలకం దాని <pre>తొలగించడానికి మరియు దాని కోసం యూనిట్లను margin-topఉపయోగించడానికి రీసెట్ చేయబడింది .remmargin-bottom

.ఉదాహరణ-మూలకం {
  మార్జిన్-బాటమ్: 1rem;
}

పట్టికలు

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

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

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

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

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

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

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

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

ఉదాహరణ తేదీ

ఉదాహరణ సమయం

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

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

సారాంశం

cursorసారాంశంపై డిఫాల్ట్ , కాబట్టి మూలకంపై క్లిక్ చేయడం ద్వారా దానితో పరస్పర చర్య చేయవచ్చని తెలియజేయడానికి textమేము దానిని రీసెట్ చేస్తాము .pointer

కొన్ని వివరాలు

వివరాల గురించి మరింత సమాచారం.

ఇంకా మరిన్ని వివరాలు

వివరాల గురించి మరిన్ని వివరాలు ఇక్కడ ఉన్నాయి.

HTML5 `[hidden]`లక్షణం

HTML5 అనే పేరుతో కొత్త గ్లోబల్ అట్రిబ్యూట్‌ని[hidden]display: none జోడిస్తుంది, ఇది డిఫాల్ట్‌గా స్టైల్ చేయబడింది. PureCSS నుండి ఒక ఆలోచనను తీసుకుంటూ, మేము ఈ డిఫాల్ట్‌ను ప్రమాదవశాత్తూ భర్తీ [hidden] { display: none !important; }చేయకుండా నిరోధించడంలో సహాయపడటం ద్వారా మెరుగుపరుస్తాము . స్థానికంగా IE10కి మద్దతు లేనప్పటికీ, మా CSSలోని స్పష్టమైన ప్రకటన ఆ సమస్యను పరిష్కరిస్తుంది display.[hidden]

<input type="text" hidden>

j క్వెరీ అననుకూలత

[hidden]j క్వెరీలు $(...).hide()మరియు $(...).show()పద్ధతులకు అనుకూలంగా లేదు. అందువల్ల, మూలకాల నిర్వహణ కోసం మేము ప్రస్తుతం [hidden]ఇతర సాంకేతికతలను ప్రత్యేకంగా ఆమోదించడం లేదు.display

మూలకం యొక్క దృశ్యమానతను కేవలం టోగుల్ చేయడానికి, అంటే displayఅది సవరించబడలేదు మరియు మూలకం ఇప్పటికీ పత్రం యొక్క ప్రవాహాన్ని ప్రభావితం చేయగలదు, బదులుగా .invisibleతరగతిని ఉపయోగించండి.