Source

રીબૂટ કરો

રીબુટ, એક જ ફાઈલમાં તત્વ-વિશિષ્ટ 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>
આ <body>વૈશ્વિક font-family, line-height, અને text-align. ફોન્ટની અસંગતતાઓને રોકવા માટે કેટલાક ફોર્મ તત્વો દ્વારા આને પછીથી વારસામાં મળે છે.
સલામતી માટે, એ <body>જાહેર કરેલ છે background-color, ને ડિફોલ્ટ છે #fff.

મૂળ ફોન્ટ સ્ટેક

ડિફોલ્ટ વેબ ફોન્ટ્સ (Helvetica Neue, Helvetica, and Arial) બુટસ્ટ્રેપ 4 માં છોડી દેવામાં આવ્યા છે અને દરેક ઉપકરણ અને OS પર શ્રેષ્ઠ ટેક્સ્ટ રેન્ડરિંગ માટે "મૂળ ફોન્ટ સ્ટેક" સાથે બદલવામાં આવ્યા છે. આ સ્મેશિંગ મેગેઝિન લેખમાં મૂળ ફોન્ટ સ્ટેક્સ વિશે વધુ વાંચો .

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
- ફેસેલસ iaculis neque
- પુરસ સોડેલ્સ અલ્ટ્રિસીસ
- વેસ્ટીબુલમ લાઓરેટ પોર્ટીટર સેમ
- એસી tristique libero volutpat ખાતે
Faucibus porta lacus fringilla vel
Aenean sit amet erat nc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
Faucibus porta lacus fringilla vel
Aenean sit amet erat nc
Eget porttitor lorem

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

વર્ણન યાદીઓ: વર્ણન સૂચિ શબ્દોને વ્યાખ્યાયિત કરવા માટે યોગ્ય છે.
Euismod: વેસ્ટીબુલમ આઈડી લિગુલા પોર્ટા ફેલિસ યુઇસ્મોડ સેમ્પર એગેટ લેસીનિયા ઓડિયો સેમ.; Donec id elit non mi porta gravida at eget metus.
માલેસુડા પોર્ટા: Etiam porta sem malesuada magna mollis euismod.

પ્રીફોર્મેટ કરેલ ટેક્સ્ટ

તત્વ તેને દૂર કરવા અને તેના માટે એકમોનો ઉપયોગ <pre>કરવા માટે રીસેટ થયેલ છે .margin-topremmargin-bottom

.example-element {
  માર્જિન-બોટમ: 1rem;
}

કોષ્ટકો

કોષ્ટકોને શૈલીમાં સહેજ ગોઠવવામાં આવે છે <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 ને ફક્ત વર્ટિકલી રીસાઈઝ કરવા માટે સંશોધિત કરવામાં આવે છે કારણ કે હોરીઝોન્ટલ રીસાઈઝીંગ વારંવાર પેજ લેઆઉટને "બ્રેક્સ" કરે છે.

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

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

ઉદાહરણ ઇનપુટ

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

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

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

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

ઉદાહરણ તારીખ

ઉદાહરણ સમય

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

વિવિધ તત્વો

સરનામું

બ્રાઉઝર ડિફૉલ્ટને થી <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અન્ય ઘટકો સાથે વધુ સુસંગત કંઈક માટે તેને ફરીથી સેટ કરીએ છીએ.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.

સ્ત્રોત શીર્ષકમાં પ્રખ્યાત વ્યક્તિ

ઇનલાઇન તત્વો

<abbr>તત્વને ફકરાના ટેક્સ્ટમાં અલગ બનાવવા માટે મૂળભૂત શૈલી પ્રાપ્ત થાય છે .

નુલ્લા એટ્ર વિટા એલીટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ.

સારાંશ

cursorસારાંશ પર ડિફૉલ્ટ છે text, તેથી અમે pointerતેના પર ક્લિક કરીને ઘટક સાથે ક્રિયાપ્રતિક્રિયા કરી શકાય છે તે જણાવવા માટે તેને ફરીથી સેટ કરીએ છીએ.

કેટલીક વિગતો

વિગતો વિશે વધુ માહિતી.

હજી વધુ વિગતો

અહીં વિગતો વિશે પણ વધુ વિગતો છે.

HTML5 `[hidden]`વિશેષતા

HTML5 નામનું એક નવું વૈશ્વિક લક્ષણ[hidden]display: none ઉમેરે છે, જે ડિફોલ્ટ તરીકે સ્ટાઈલ કરેલ છે. PureCSS માંથી એક વિચાર ઉછીના લઈને , અમે આ ડિફોલ્ટને આકસ્મિક રીતે ઓવરરાઈડ [hidden] { display: none !important; }થવાથી રોકવામાં મદદ કરીને સુધારીએ છીએ display. [hidden]IE10 દ્વારા મૂળ રૂપે સમર્થિત ન હોવા છતાં , અમારા CSS માં સ્પષ્ટ ઘોષણા તે સમસ્યાને દૂર કરે છે.

<input type="text" hidden>

jQuery અસંગતતા

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

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