Source

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

రీబూట్, ఒకే ఫైల్‌లోని మూలకం-నిర్దిష్ట 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

ఇది బూట్‌స్ట్రాప్ అంతటా ప్రపంచవ్యాప్తంగా స్వయంచాలకంగా వారసత్వంగా 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.

లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్
కాన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్
మాసా వద్ద పూర్ణాంకం మోలెస్టీ లోరెమ్
ప్రీటియమ్ నిస్ల్ ��లిక్వెట్‌లో సులభతరం
నుల్ల వొలుత్పట్ అలికం వెలిట్
- ఫాసెల్లస్ ఇయాక్యులిస్ నెక్యూ
- పురస్ సోడల్స్ అల్ట్రిసీస్
- వెస్టిబులం లారీట్ పోర్టిటర్ సెమ్
- Ac tristique libero volutpat వద్ద
ఫౌసిబస్ పోర్టా లాకస్ ఫ్రింగిల్లా వెల్
ఏనేన్ సిట్ ఇప్పుడు ఇప్పుడు ఉంది
ఈగెట్ పోర్టిటర్ లోరెం

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

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

వివరణ జాబితాలు: నిబంధనలను నిర్వచించడానికి వివరణ జాబితా సరైనది.
యూయిస్మోడ్: వెస్టిబులమ్ ఐడి లిగులా పోర్టా ఫెలిస్ యూయిస్మోడ్ సెమ్పర్ ఎగెట్ లాసినియా ఒడియో సెమ్.; డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్.
Malesuada పోర్టా: ఎటియామ్ పోర్టా సెమ్ మలేసువాడా మాగ్నా మోల్లిస్ యూయిస్మోడ్.

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

మూలకం దాని <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

ఇతర అంశాలు

చిరునామా

నుండి బ్రౌజర్ డిఫాల్ట్‌ని రీసెట్ చేయడానికి <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తరగతిని ఉపయోగించండి.