રીબૂટ કરો

રીબુટ, એક જ ફાઈલમાં તત્વ-વિશિષ્ટ CSS ફેરફારોનો સંગ્રહ, એક ભવ્ય, સુસંગત અને સરળ આધારરેખા પ્રદાન કરવા માટે બુટસ્ટ્રેપને કિકસ્ટાર્ટ કરો.

આ પૃષ્ઠ પર

અભિગમ

રીબૂટ નોર્મલાઈઝ પર બિલ્ડ કરે છે, માત્ર એલિમેન્ટ સિલેક્ટર્સનો ઉપયોગ કરીને અંશે અભિપ્રાયવાળી શૈલીઓ સાથે ઘણા HTML ઘટકો પ્રદાન કરે છે. વધારાની સ્ટાઇલ ફક્ત વર્ગો સાથે કરવામાં આવે છે. ઉદાહરણ તરીકે, અમે <table>સરળ આધારરેખા માટે કેટલીક શૈલીઓ રીબૂટ કરીએ છીએ અને પછીથી .table, .table-bordered, અને વધુ પ્રદાન કરીએ છીએ.

રીબૂટમાં શું ઓવરરાઇડ કરવું તે પસંદ કરવા માટે અહીં અમારી માર્ગદર્શિકા અને કારણો છે:

સ્કેલેબલ ઘટક અંતર માટે rems ને બદલે 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>તત્વોને પણ રીસેટ કર્યા છે.

બધી સૂચિઓનું ટોચનું માર્જિન દૂર કરવામાં આવ્યું છે
અને તેમનું બોટમ માર્જિન સામાન્ય થયું
નેસ્ટેડ લિસ્ટમાં કોઈ બોટમ માર્જિન નથી
- આ રીતે તેઓ વધુ સમાન દેખાવ ધરાવે છે
- ખાસ કરીને જ્યારે વધુ સૂચિ વસ્તુઓ દ્વારા અનુસરવામાં આવે છે
ડાબી પેડિંગ પણ રીસેટ કરવામાં આવી છે

અહીં એક ઓર્ડર કરેલ સૂચિ છે
થોડી યાદી વસ્તુઓ સાથે
તે સમાન એકંદર દેખાવ ધરાવે છે
અગાઉની અવ્યવસ્થિત સૂચિ તરીકે

સરળ સ્ટાઇલ, સ્પષ્ટ વંશવેલો અને બહેતર અંતર માટે, વર્ણન યાદીઓએ અપડેટ કરેલ marginછે. <dd>પર ફરીથી સેટ margin-leftકરો 0અને ઉમેરો margin-bottom: .5rem. <dt>s બોલ્ડ છે .

વર્ણન યાદીઓ: વર્ણન સૂચિ શબ્દોને વ્યાખ્યાયિત કરવા માટે યોગ્ય છે.
મુદત: શબ્દ માટે વ્યાખ્યા.; સમાન શબ્દ માટે બીજી વ્યાખ્યા.
અન્ય શબ્દ: આ અન્ય શબ્દ માટે વ્યાખ્યા.

ઇનલાઇન કોડ

સાથે કોડના ઇનલાઇન સ્નિપેટ્સ લપેટી <code>. HTML એંગલ કૌંસથી બચવાની ખાતરી કરો.

ઉદાહરણ તરીકે, <section>ઇનલાઇન તરીકે આવરિત હોવું જોઈએ.

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

કોડ બ્લોક્સ

<pre>કોડની બહુવિધ રેખાઓ માટે s નો ઉપયોગ કરો . ફરી એકવાર, યોગ્ય રેન્ડરિંગ માટે કોડમાં કોઈપણ ખૂણાના કૌંસથી બચવાની ખાતરી કરો. તત્વ તેને દૂર કરવા અને તેના માટે એકમોનો ઉપયોગ <pre>કરવા માટે રીસેટ થયેલ છે .margin-topremmargin-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>s પાસે કોઈ બોર્ડર, પેડિંગ અથવા માર્જિન નથી તેથી તેનો ઉપયોગ વ્યક્તિગત ઇનપુટ્સ અથવા ઇનપુટ્સના જૂથો માટે રેપર તરીકે સરળતાથી થઈ શકે છે.
<legend>s, ફીલ્ડસેટ્સની જેમ, પણ પ્રકારના મથાળા તરીકે પ્રદર્શિત કરવા માટે પુનઃશૈલી કરવામાં આવી છે.
<label>s લાગુ display: inline-blockકરવાની મંજૂરી આપવા માટે સેટ કરેલ છે.margin
<input>s, <select>s, <textarea>s, અને <button>s મોટે ભાગે નોર્મલાઈઝ દ્વારા સંબોધવામાં આવે છે, પરંતુ રીબૂટ તેમના marginઅને સેટને line-height: inheritપણ દૂર કરે છે.
<textarea>s ને ફક્ત વર્ટિકલી રીસાઈઝ કરવા માટે સંશોધિત કરવામાં આવે છે કારણ કે હોરીઝોન્ટલ રીસાઈઝીંગ વારંવાર પેજ લેઆઉટને "બ્રેક્સ" કરે છે.
<button>s અને <input>બટન તત્વોમાં cursor: pointerજ્યારે હોય છે :not(:disabled).

આ ફેરફારો, અને વધુ, નીચે દર્શાવવામાં આવ્યા છે.

દંતકથાનું ઉદાહરણ

ઉદાહરણ ઇનપુટ

ઉદાહરણ ઇમેઇલ

ઉદાહરણ ટેલિફોન

ઉદાહરણ url

ઉદાહરણ નંબર

ઉદાહરણ શોધ

ઉદાહરણ શ્રેણી

ઉદાહરણ ફાઇલ ઇનપુટ

ઉદાહરણ પસંદ કરો

આ ચેકબોક્સ ચેક કરો

વિકલ્પ એક છે આ અને તે વિકલ્પ બે એ કંઈક બીજું છે જે આ ફેન્સી ફોર્મ નિયંત્રણોના રેપિંગને દર્શાવવા માટે ખૂબ લાંબુ છે. વિકલ્પ ત્રણ અક્ષમ છે

ટેક્ષટેરિયાનું ઉદાહરણ

ઉદાહરણ તારીખ

ઉદાહરણ સમય

ઉદાહરણ પાસવર્ડ

ઉદાહરણ તારીખ સમય-સ્થાનિક

ઉદાહરણ સપ્તાહ

ઉદાહરણ મહિનો

ઉદાહરણ રંગ

ઉદાહરણ આઉટપુટ 100

તારીખ અને રંગ ઇનપુટ સપોર્ટ

ધ્યાનમાં રાખો કે તારીખ ઇનપુટ સફારી નામના તમામ બ્રાઉઝર્સ દ્વારા સંપૂર્ણપણે સમર્થિત નથી .

બટનો પર પોઇન્ટર

role="button"રીબૂટમાં ડિફૉલ્ટ કર્સરને માં બદલવા માટેના ઉન્નતીકરણનો સમાવેશ થાય છે pointer. ઘટકો પરસ્પર ક્રિયાપ્રતિક્રિયા છે તે દર્શાવવામાં સહાય માટે તત્વોમાં આ વિશેષતા ઉમેરો. આ ભૂમિકા તત્વો માટે જરૂરી નથી <button>, જે તેમના પોતાના cursorફેરફાર મેળવે છે.

બિન-બટન તત્વ બટન

<span role="button" tabindex="0">Non-button element button</span>

વિવિધ તત્વો

સરનામું

બ્રાઉઝર ડિફૉલ્ટને થી <address>પર રીસેટ કરવા માટે ઘટક અપડેટ થયેલ છે . પણ હવે વારસાગત છે, અને ઉમેરવામાં આવ્યું છે. s નજીકના પૂર્વજ (અથવા કાર્યના સમગ્ર ભાગ) માટે સંપર્ક માહિતી પ્રસ્તુત કરવા માટે છે. સાથે રેખાઓ સમાપ્ત કરીને ફોર્મેટિંગ સાચવો .font-styleitalicnormalline-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>

jQuery અસંગતતા

[hidden]$(...).hide()jQuery અને $(...).show()પદ્ધતિઓ સાથે સુસંગત નથી . તેથી, અમે હાલમાં ખાસ કરીને તત્વોના [hidden]સંચાલન માટેની અન્ય તકનીકોને સમર્થન આપતા નથી.display

તત્વની દૃશ્યતાને માત્ર ટૉગલ કરવા માટે, એટલે displayકે તેમાં ફેરફાર કરવામાં આવ્યો નથી અને તત્વ હજુ પણ દસ્તાવેજના પ્રવાહને અસર કરી શકે છે, તેના બદલે વર્ગનો ઉપયોગ કરો ..invisible