રીબૂટ કરો
રીબુટ, એક જ ફાઈલમાં તત્વ-વિશિષ્ટ CSS ફેરફારોનો સંગ્રહ, એક ભવ્ય, સુસંગત અને સરળ આધારરેખા પ્રદાન કરવા માટે બુટસ્ટ્રેપને કિકસ્ટાર્ટ કરો.
અભિગમ
રીબૂટ નોર્મલાઈઝ પર બિલ્ડ કરે છે, માત્ર એલિમેન્ટ સિલેક્ટર્સનો ઉપયોગ કરીને અંશે અભિપ્રાયવાળી શૈલીઓ સાથે ઘણા HTML ઘટકો પ્રદાન કરે છે. વધારાની સ્ટાઇલ ફક્ત વર્ગો સાથે કરવામાં આવે છે. ઉદાહરણ તરીકે, અમે <table>
સરળ આધારરેખા માટે કેટલીક શૈલીઓ રીબૂટ કરીએ છીએ અને પછીથી .table
, .table-bordered
, અને વધુ પ્રદાન કરીએ છીએ.
રીબૂટમાં શું ઓવરરાઇડ કરવું તે પસંદ કરવા માટે અહીં અમારી માર્ગદર્શિકા અને કારણો છે:
- સ્કેલેબલ ઘટક અંતર માટે
rem
s ને બદલે s નો ઉપયોગ કરવા માટે કેટલાક બ્રાઉઝર ડિફોલ્ટ મૂલ્યોને અપડેટ કરો .em
- ટાળો
margin-top
. વર્ટિકલ માર્જિન તૂટી શકે છે, જે અનપેક્ષિત પરિણામો આપે છે. વધુ મહત્ત્વની બાબત એ છે કે, ની એક દિશાmargin
એ એક સરળ માનસિક મોડેલ છે. - ઉપકરણના કદમાં સરળ સ્કેલિંગ માટે, બ્લોક તત્વોએ
rem
s માટેmargin
s નો ઉપયોગ કરવો જોઈએ. - જ્યારે પણ શક્ય હોય ત્યારે
font
તેનો ઉપયોગ કરીને -સંબંધિત ગુણધર્મોની ઘોષણાઓ ઓછામાં ઓછી રાખો .inherit
CSS ચલો
v5.2.0 માં ઉમેરાયેલv5.1.1 સાથે, અમે અમારા @import
તમામ CSS બંડલ્સમાં ( bootstrap.css
, bootstrap-reboot.css
, અને bootstrap-grid.css
) નો સમાવેશ કરવા માટે અમારા જરૂરી s પ્રમાણિત કર્યા છે _root.scss
. તે બધા બંડલમાં લેવલ CSS વેરિયેબલ ઉમેરે :root
છે, પછી ભલેને તે બંડલમાં તેમાંથી કેટલાનો ઉપયોગ થાય. આખરે બુટસ્ટ્રેપ 5 સમયાંતરે ઉમેરાયેલ વધુ CSS ચલો જોવાનું ચાલુ રાખશે , સાસને હંમેશા ફરીથી કમ્પાઇલ કરવાની જરૂર વગર વધુ રીઅલ-ટાઇમ કસ્ટમાઇઝેશન પ્રદાન કરવા માટે. અમારો અભિગમ અમારા સ્ત્રોત Sass વેરીએબલ્સને લેવાનો છે અને તેમને CSS ચલોમાં રૂપાંતરિત કરવાનો છે. આ રીતે, જો તમે CSS વેરીએબલ્સનો ઉપયોગ ન કરો તો પણ તમારી પાસે Sass ની બધી શક્તિ છે. આ હજુ પણ પ્રગતિમાં છે અને તેને સંપૂર્ણ રીતે લાગુ કરવામાં સમય લાગશે.
ઉદાહરણ તરીકે, સામાન્ય શૈલીઓ :root
માટે આ CSS ચલોને ધ્યાનમાં લો:<body>
@if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{$font-family-base};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
--#{$prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$prefix}body-text-align: #{$body-text-align};
}
--#{$prefix}body-bg: #{$body-bg};
વ્યવહારમાં, તે ચલો પછી રીબૂટમાં આ રીતે લાગુ થાય છે:
body {
margin: 0; // 1
font-family: var(--#{$prefix}body-font-family);
@include font-size(var(--#{$prefix}body-font-size));
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
color: var(--#{$prefix}body-color);
text-align: var(--#{$prefix}body-text-align);
background-color: var(--#{$prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
જે તમને ગમે તેમ છતાં રીઅલ-ટાઇમ કસ્ટમાઇઝેશન કરવાની મંજૂરી આપે છે:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
પૃષ્ઠ ડિફોલ્ટ્સ
<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,
// older macOS and iOS
"Helvetica Neue"
// Linux
"Noto Sans",
"Liberation Sans",
// Basic web fallback
Arial,
// 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. બુટસ્ટ્રેપ હેડિંગ |
આડા નિયમો
<hr>
તત્વ સરળ કરવામાં આવ્યું છે . બ્રાઉઝર ડિફૉલ્ટ્સની જેમ, <hr>
s ને border-top
, ડિફૉલ્ટ હોય છે opacity: .25
, અને આપમેળે તેમના border-color
દ્વારા વારસામાં મેળવે છે color
, જેમાં પિતૃ દ્વારા ક્યારે color
સેટ કરવામાં આવે છે તે સહિત. તેઓ ટેક્સ્ટ, બોર્ડર અને અસ્પષ્ટ ઉપયોગિતાઓ સાથે સુધારી શકાય છે.
<hr>
<div class="text-success">
<hr>
</div>
<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">
યાદીઓ
બધી યાદીઓ- <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><section></code> should be wrapped as inline.
કોડ બ્લોક્સ
<pre>
કોડની બહુવિધ રેખાઓ માટે s નો ઉપયોગ કરો . ફરી એકવાર, યોગ્ય રેન્ડરિંગ માટે કોડમાં કોઈપણ ખૂણાના કૌંસથી બચવાની ખાતરી કરો. તત્વ તેને દૂર કરવા અને તેના માટે એકમોનો ઉપયોગ <pre>
કરવા માટે રીસેટ થયેલ છે .margin-top
rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
ચલો
ચલોને સૂચવવા માટે <var>
ટેગનો ઉપયોગ કરો.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
વપરાશકર્તા ઇનપુટ
<kbd>
ઇનપુટ સૂચવવા માટે નો ઉપયોગ કરો જે સામાન્ય રીતે કીબોર્ડ દ્વારા દાખલ કરવામાં આવે છે.
સેટિંગ્સ સંપાદિત કરવા માટે, દબાવો 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
.
કોષ્ટકનું મથાળું | કોષ્ટકનું મથાળું | કોષ્ટકનું મથાળું | કોષ્ટકનું મથાળું |
---|---|---|---|
ટેબલ સેલ | ટેબલ સેલ | ટેબલ સેલ | ટેબલ સેલ |
ટેબલ સેલ | ટેબલ સેલ | ટેબલ સેલ | ટેબલ સેલ |
ટેબલ સેલ | ટેબલ સેલ | ટેબલ સેલ | ટેબલ સેલ |
<table>
<caption>
This is an example table, and this is its caption to describe the contents.
</caption>
<thead>
<tr>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</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)
.
આ ફેરફારો, અને વધુ, નીચે દર્શાવવામાં આવ્યા છે.
તારીખ અને રંગ ઇનપુટ સપોર્ટ
ધ્યાનમાં રાખો કે તારીખ ઇનપુટ સફારી નામના તમામ બ્રાઉઝર્સ દ્વારા સંપૂર્ણપણે સમર્થિત નથી .
બટનો પર પોઇન્ટર
role="button"
રીબૂટમાં ડિફૉલ્ટ કર્સરને માં બદલવા માટેના ઉન્નતીકરણનો સમાવેશ થાય છે pointer
. ઘટકો પરસ્પર ક્રિયાપ્રતિક્રિયા છે તે દર્શાવવામાં સહાય માટે તત્વોમાં આ વિશેષતા ઉમેરો. આ ભૂમિકા તત્વો માટે જરૂરી નથી <button>
, જે તેમના પોતાના cursor
ફેરફાર મેળવે છે.
<span role="button" tabindex="0">Non-button element button</span>
વિવિધ તત્વો
સરનામું
બ્રાઉઝર ડિફૉલ્ટને થી <address>
પર રીસેટ કરવા માટે ઘટક અપડેટ થયેલ છે . પણ હવે વારસાગત છે, અને ઉમેરવામાં આવ્યું છે. s નજીકના પૂર્વજ (અથવા કાર્યના સમગ્ર ભાગ) માટે સંપર્ક માહિતી પ્રસ્તુત કરવા માટે છે. સાથે રેખાઓ સમાપ્ત કરીને ફોર્મેટિંગ સાચવો .font-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
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