વૈશ્વિક CSS સેટિંગ્સ, એક્સ્ટેન્સિબલ વર્ગો સાથે શૈલીયુક્ત અને ઉન્નત મૂળભૂત HTML તત્વો અને અદ્યતન ગ્રીડ સિસ્ટમ.
ઝાંખી
બહેતર, ઝડપી, મજબૂત વેબ ડેવલપમેન્ટ માટેના અમારો અભિગમ સહિત, બુટસ્ટ્રેપના ઇન્ફ્રાસ્ટ્રક્ચરના મુખ્ય ભાગો પર લોડાઉન મેળવો.
HTML5 doctype
બુટસ્ટ્રેપ અમુક HTML તત્વો અને CSS ગુણધર્મોનો ઉપયોગ કરે છે જેને HTML5 doctypeનો ઉપયોગ કરવાની જરૂર હોય છે. તમારા બધા પ્રોજેક્ટ્સની શરૂઆતમાં તેને શામેલ કરો.
પહેલા મોબાઈલ
બુટસ્ટ્રેપ 2 સાથે, અમે ફ્રેમવર્કના મુખ્ય પાસાઓ માટે વૈકલ્પિક મોબાઇલ મૈત્રીપૂર્ણ શૈલીઓ ઉમેરી છે. બુટસ્ટ્રેપ 3 સાથે, અમે પ્રોજેક્ટને શરૂઆતથી જ મોબાઈલ ફ્રેન્ડલી બનાવવા માટે ફરીથી લખ્યો છે. વૈકલ્પિક મોબાઇલ શૈલીઓ ઉમેરવાને બદલે, તેઓ સીધા જ મુખ્ય ભાગમાં શેકવામાં આવે છે. હકીકતમાં, બુટસ્ટ્રેપ પ્રથમ મોબાઇલ છે . મોબાઇલ ફર્સ્ટ સ્ટાઇલ અલગ ફાઇલોને બદલે સમગ્ર લાઇબ્રેરીમાં મળી શકે છે.
યોગ્ય રેન્ડરિંગ અને ટચ ઝૂમિંગને સુનિશ્ચિત કરવા માટે, વ્યૂપોર્ટ મેટા ટેગને તમારા <head>.
user-scalable=noતમે વ્યૂપોર્ટ મેટા ટેગમાં ઉમેરીને મોબાઇલ ઉપકરણો પર ઝૂમિંગ ક્ષમતાઓને અક્ષમ કરી શકો છો . આ ઝૂમિંગને અક્ષમ કરે છે, એટલે કે વપરાશકર્તાઓ માત્ર સ્ક્રોલ કરવામાં સક્ષમ છે, અને પરિણામે તમારી સાઇટ મૂળ એપ્લિકેશન જેવી થોડી વધુ અનુભવે છે. એકંદરે, અમે દરેક સાઇટ પર આની ભલામણ કરતા નથી, તેથી સાવધાની રાખો!
ટાઇપોગ્રાફી અને લિંક્સ
બુટસ્ટ્રેપ મૂળભૂત વૈશ્વિક પ્રદર્શન, ટાઇપોગ્રાફી અને લિંક શૈલીઓ સેટ કરે છે. ખાસ કરીને, અમે:
પર સેટ background-color: #fff;કરોbody
@font-family-baseઅમારા ટાઇપોગ્રાફિક આધાર તરીકે , @font-size-base, અને @line-height-baseવિશેષતાઓનો ઉપયોગ કરો
દ્વારા વૈશ્વિક લિંક રંગ સેટ કરો @link-colorઅને ફક્ત તેના પર જ લિંક અન્ડરલાઇન્સ લાગુ કરો:hover
બુટસ્ટ્રેપને સાઇટની સામગ્રીને લપેટવા અને અમારી ગ્રીડ સિસ્ટમ રાખવા માટે એક સમાવિષ્ટ તત્વની જરૂર છે. તમે તમારા પ્રોજેક્ટમાં ઉપયોગ કરવા માટે બેમાંથી એક કન્ટેનર પસંદ કરી શકો છો. નોંધ કરો કે, paddingઅને વધુને લીધે, બેમાંથી કોઈ કન્ટેનર નેસ્ટેબલ નથી.
.containerપ્રતિભાવ નિશ્ચિત પહોળાઈના કન્ટેનર માટે ઉપયોગ કરો .
.container-fluidતમારા વ્યૂપોર્ટની સમગ્ર પહોળાઈમાં ફેલાયેલા સંપૂર્ણ પહોળાઈના કન્ટેનર માટે ઉપયોગ કરો.
ગ્રીડ સિસ્ટમ્સનો ઉપયોગ તમારી સામગ્રી ધરાવતી પંક્તિઓ અને કૉલમ્સની શ્રેણી દ્વારા પૃષ્ઠ લેઆઉટ બનાવવા માટે થાય છે. બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમ કેવી રીતે કામ કરે છે તે અહીં છે:
યોગ્ય ગોઠવણી અને પેડિંગ માટે પંક્તિઓ .container(નિશ્ચિત-પહોળાઈ) અથવા (સંપૂર્ણ-પહોળાઈ) ની અંદર મૂકવી આવશ્યક છે ..container-fluid
કૉલમના આડા જૂથો બનાવવા માટે પંક્તિઓનો ઉપયોગ કરો.
સામગ્રી કૉલમમાં મૂકવી જોઈએ, અને માત્ર કૉલમ જ પંક્તિઓના તાત્કાલિક બાળકો હોઈ શકે છે.
પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો જેમ કે .rowઝડપથી .col-xs-4ગ્રીડ લેઆઉટ બનાવવા માટે ઉપલબ્ધ છે. વધુ સિમેન્ટીક લેઆઉટ માટે ઓછા મિક્સિનનો પણ ઉપયોગ કરી શકાય છે.
કૉલમ દ્વારા ગટર (કૉલમની સામગ્રી વચ્ચેના અંતર) બનાવે છે padding. .rowતે પેડિંગ પ્રથમ અને છેલ્લા કૉલમ માટે s પર નકારાત્મક માર્જિન દ્વારા પંક્તિઓમાં ઑફસેટ છે .
નકારાત્મક માર્જિન શા માટે નીચેના ઉદાહરણો આઉટડેંટ છે. તે એટલા માટે છે કે ગ્રીડ કૉલમ્સની અંદરની સામગ્રી બિન-ગ્રીડ સામગ્રી સાથે લાઇન અપ છે.
ગ્રીડ કૉલમ તમે સ્પેન્ડ કરવા માંગો છો તે બાર ઉપલબ્ધ કૉલમની સંખ્યાનો ઉલ્લેખ કરીને બનાવવામાં આવે છે. ઉદાહરણ તરીકે, ત્રણ સમાન કૉલમ ત્રણનો ઉપયોગ કરશે .col-xs-4.
જો એક પંક્તિમાં 12 થી વધુ કૉલમ મૂકવામાં આવે, તો વધારાના કૉલમનું દરેક જૂથ, એક એકમ તરીકે, નવી લાઇન પર લપેટી જશે.
ગ્રીડ વર્ગો બ્રેકપોઇન્ટ માપો કરતા વધારે અથવા સમાન સ્ક્રીનની પહોળાઈ ધરાવતા ઉપકરણો પર લાગુ થાય છે અને નાના ઉપકરણો પર લક્ષિત ગ્રીડ વર્ગોને ઓવરરાઇડ કરે છે. તેથી, દા.ત. કોઈપણ .col-md-*વર્ગને એલિમેન્ટ પર લાગુ કરવાથી માત્ર મધ્યમ ઉપકરણો પર જ નહીં પરંતુ જો .col-lg-*વર્ગ હાજર ન હોય તો મોટા ઉપકરણો પર પણ તેની સ્ટાઇલને અસર કરશે.
આ સિદ્ધાંતોને તમારા કોડમાં લાગુ કરવા માટેના ઉદાહરણો જુઓ.
મીડિયા પ્રશ્નો
અમારી ગ્રીડ સિસ્ટમમાં મુખ્ય બ્રેકપોઇન્ટ્સ બનાવવા માટે અમે અમારી ઓછી ફાઇલોમાં નીચેની મીડિયા ક્વેરીઝનો ઉપયોગ કરીએ છીએ.
અમે ક્યારેક-ક્યારેક આ મીડિયા ક્વેરીઝ પર max-widthCSS ને ઉપકરણોના સાંકડા સેટ સુધી મર્યાદિત કરવા માટેનો સમાવેશ કરીએ છીએ.
ગ્રીડ વિકલ્પો
જુઓ કે કેવી રીતે બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમના પાસાઓ હાથવગા ટેબલ સાથે બહુવિધ ઉપકરણો પર કામ કરે છે.
વધારાના નાના ઉપકરણો ફોન (<768px)
નાના ઉપકરણોની ગોળીઓ (≥768px)
મધ્યમ ઉપકરણો ડેસ્કટોપ (≥992px)
મોટા ઉપકરણો ડેસ્કટોપ્સ (≥1200px)
ગ્રીડ વર્તન
દરેક સમયે આડું
શરૂ કરવા માટે સંકુચિત, બ્રેકપોઇન્ટ ઉપર આડી
કન્ટેનર પહોળાઈ
કોઈ નહીં (ઓટો)
750px
970px
1170px
વર્ગ ઉપસર્ગ
.col-xs-
.col-sm-
.col-md-
.col-lg-
કૉલમનો #
12
કૉલમની પહોળાઈ
ઓટો
~62px
~81px
~97px
ગટરની પહોળાઈ
30px (સ્તંભની દરેક બાજુએ 15px)
નેસ્ટેબલ
હા
ઑફસેટ્સ
હા
કૉલમ ક્રમ
હા
ઉદાહરણ: સ્ટેક્ડ-ટુ-હોરીઝોન્ટલ
ગ્રીડ વર્ગોના એક જ સેટનો ઉપયોગ કરીને .col-md-*, તમે એક મૂળભૂત ગ્રીડ સિસ્ટમ બનાવી શકો છો જે ડેસ્કટોપ (મધ્યમ) ઉપકરણો પર આડી બનતા પહેલા મોબાઇલ ઉપકરણો અને ટેબ્લેટ ઉપકરણો (વધારાની નાની થી નાની શ્રેણી) પર સ્ટેકથી શરૂ થાય છે. કોઈપણમાં ગ્રીડ કૉલમ મૂકો .row.
તમારી કૉલમ ફક્ત નાના ઉપકરણોમાં સ્ટેક કરવા નથી માંગતા? .col-xs-*.col-md-*તમારા કૉલમમાં ઉમેરીને વધારાના નાના અને મધ્યમ ઉપકરણ ગ્રીડ વર્ગોનો ઉપયોગ કરો. તે બધું કેવી રીતે કાર્ય કરે છે તેના વધુ સારા વિચાર માટે નીચેનું ઉદાહરણ જુઓ.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
ઉદાહરણ: મોબાઇલ, ટેબ્લેટ, ડેસ્કટોપ
.col-sm-*ટેબ્લેટ વર્ગો સાથે હજી વધુ ગતિશીલ અને શક્તિશાળી લેઆઉટ બનાવીને પાછલા ઉદાહરણ પર બનાવો .
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
ઉદાહરણ: કૉલમ રેપિંગ
જો એક પંક્તિમાં 12 થી વધુ કૉલમ મૂકવામાં આવે, તો વધારાના કૉલમનું દરેક જૂથ, એક એકમ તરીકે, નવી લાઇન પર લપેટી જશે.
.col-xs-9
.col-xs-4
9 + 4 = 13 > 12 થી, આ 4-કૉલમ-વાઇડ ડિવ નવી લાઇન પર એક સંલગ્ન એકમ તરીકે આવરિત થાય છે.
.col-xs-6
અનુગામી કૉલમ નવી લાઇન સાથે ચાલુ રહે છે.
રિસ્પોન્સિવ કૉલમ ફરીથી સેટ કરે છે
ઉપલબ્ધ ગ્રીડના ચાર સ્તરો સાથે તમે એવા મુદ્દાઓમાં ભાગ લેવા માટે બંધાયેલા છો જ્યાં, અમુક બ્રેકપોઇન્ટ્સ પર, તમારી કૉલમ એકદમ યોગ્ય રીતે સાફ થતી નથી કારણ કે એક બીજા કરતાં ઉંચી છે. તેને ઠીક કરવા માટે, a .clearfixઅને અમારા રિસ્પોન્સિવ યુટિલિટી ક્લાસના સંયોજનનો ઉપયોગ કરો .
.col-xs-6 .col-sm-3
તમારા વ્યૂપોર્ટનું કદ બદલો અથવા ઉદાહરણ માટે તમારા ફોન પર તેને તપાસો.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
રિસ્પોન્સિવ બ્રેકપોઇન્ટ્સ પર કૉલમ ક્લિયરિંગ ઉપરાંત, તમારે ઑફસેટ્સ, પુશ અથવા પુલ્સને ફરીથી સેટ કરવાની જરૂર પડી શકે છે . ગ્રીડના ઉદાહરણમાં આને ક્રિયામાં જુઓ .
કૉલમ ઑફસેટિંગ
.col-md-offset-*વર્ગોનો ઉપયોગ કરીને કૉલમને જમણી તરફ ખસેડો . આ વર્ગો કૉલમ દ્વારા કૉલમના ડાબા માર્જિનમાં વધારો કરે છે *. ઉદાહરણ તરીકે, ચાર કૉલમ પર .col-md-offset-4ખસે છે..col-md-4
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
તમે .col-*-offset-0વર્ગો સાથે નીચલા ગ્રીડ સ્તરોમાંથી ઑફસેટ્સને પણ ઓવરરાઇડ કરી શકો છો.
નેસ્ટિંગ કૉલમ
તમારી સામગ્રીને ડિફોલ્ટ ગ્રીડ સાથે નેસ્ટ કરવા માટે, હાલની કૉલમમાં એક નવો .rowઅને કૉલમનો સેટ ઉમેરો . નેસ્ટેડ પંક્તિઓમાં કૉલમનો સમૂહ શામેલ હોવો જોઈએ જે 12 અથવા તેથી ઓછા ઉમેરે છે (તે જરૂરી નથી કે તમે બધી ઉપલબ્ધ 12 કૉલમનો ઉપયોગ કરો)..col-sm-*.col-sm-*
સ્તર 1: .col-sm-9
સ્તર 2: .col-xs-8 .col-sm-6
સ્તર 2: .col-xs-4 .col-sm-6
કૉલમ ક્રમ
.col-md-push-*અમારા બિલ્ટ-ઇન ગ્રીડ કૉલમનો ક્રમ અને .col-md-pull-*મોડિફાયર વર્ગો સાથે સરળતાથી બદલો .
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
ઓછા મિશ્રણ અને ચલો
ઝડપી લેઆઉટ માટે પ્રીબિલ્ટ ગ્રીડ વર્ગો ઉપરાંત , બુટસ્ટ્રેપમાં તમારા પોતાના સરળ, સિમેન્ટીક લેઆઉટને ઝડપથી જનરેટ કરવા માટે ઓછા ચલો અને મિક્સિન્સનો સમાવેશ થાય છે.
ચલો
ચલો કૉલમની સંખ્યા, ગટરની પહોળાઈ અને મીડિયા ક્વેરી પોઈન્ટ કે જ્યાંથી ફ્લોટિંગ કૉલમ શરૂ કરવા તે નક્કી કરે છે. અમે ઉપરોક્ત દસ્તાવેજીકૃત પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો તેમજ નીચે સૂચિબદ્ધ વૈવિધ્યપૂર્ણ મિશ્રણો માટે આનો ઉપયોગ કરીએ છીએ.
મિક્સિન્સ
વ્યક્તિગત ગ્રીડ કૉલમ્સ માટે સિમેન્ટીક CSS જનરેટ કરવા માટે ગ્રીડ વેરીએબલ્સ સાથે મિક્સિનનો ઉપયોગ કરવામાં આવે છે.
ઉદાહરણ ઉપયોગ
તમે તમારા પોતાના વૈવિધ્યપૂર્ણ મૂલ્યોમાં ચલોને સંશોધિત કરી શકો છો, અથવા ફક્ત તેમના ડિફોલ્ટ મૂલ્યો સાથે મિક્સિનનો ઉપયોગ કરી શકો છો. વચ્ચેના અંતર સાથે બે-કૉલમ લેઆઉટ બનાવવા માટે ડિફૉલ્ટ સેટિંગ્સનો ઉપયોગ કરવાનું અહીં ઉદાહરણ છે.
ટાઇપોગ્રાફી
હેડિંગ
બધા HTML શીર્ષકો, <h1>મારફતે <h6>, ઉપલબ્ધ છે. .h1દ્વારા .h6વર્ગો પણ ઉપલબ્ધ છે, જ્યારે તમે મથાળાની ફોન્ટ સ્ટાઇલ સાથે મેચ કરવા માંગતા હોવ પરંતુ તેમ છતાં તમારું ટેક્સ્ટ ઇનલાઇન પ્રદર્શિત થાય તેવું ઇચ્છો છો.
h1. બુટસ્ટ્રેપ હેડિંગ
સેમીબોલ્ડ 36px
h2. બુટસ્ટ્રેપ હેડિંગ
સેમીબોલ્ડ 30px
h3. બુટસ્ટ્રેપ હેડિંગ
સેમીબોલ્ડ 24px
h4. બુટસ્ટ્રેપ હેડિંગ
સેમીબોલ્ડ 18px
h5. બુટસ્ટ્રેપ હેડિંગ
સેમીબોલ્ડ 14px
h6. બુટસ્ટ્રેપ હેડિંગ
સેમીબોલ્ડ 12px
<small>સામાન્ય ટેગ અથવા .smallવર્ગ સાથે કોઈપણ મથાળામાં હળવા, ગૌણ ટેક્સ્ટ બનાવો .
h1. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ
h2. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ
h3. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ
h4. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ
h5. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ
h6. બુટસ્ટ્રેપ હેડિંગ સેકન્ડરી ટેક્સ્ટ
શારીરિક નકલ
બુટસ્ટ્રેપનું વૈશ્વિક ડિફોલ્ટ 14pxfont-size છે , જેમાં 1.428 છે . આ અને તમામ ફકરાઓ પર લાગુ થાય છે. વધુમાં, (ફકરો) તેમની ગણતરી કરેલ રેખા-ઊંચાઈ (ડિફૉલ્ટ રૂપે 10px)નો અડધો બોટમ માર્જિન મેળવે છે.line-height<body><p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
લીડ બોડી કોપી
એક ફકરો ઉમેરીને અલગ બનાવો .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ડ્યુસ મોલીસ, તે બિન કોમોડો લેક્ટસ છે.
લેસ સાથે બિલ્ટ
ટાઇપોગ્રાફિક સ્કેલ variables.less માં બે ઓછા ચલો પર આધારિત છે : @font-size-baseઅને @line-height-base. પ્રથમ સમગ્ર ઉપયોગમાં લેવાતો આધાર ફોન્ટ-કદ છે અને બીજો આધાર રેખા-ઊંચાઈ છે. અમે અમારા તમામ પ્રકારના અને વધુના માર્જિન, પેડિંગ્સ અને લાઇન-હાઇટ્સ બનાવવા માટે તે ચલોનો અને કેટલાક સરળ ગણિતનો ઉપયોગ કરીએ છીએ. તેમને કસ્ટમાઇઝ કરો અને બુટસ્ટ્રેપ અપનાવે છે.
ઇનલાઇન ટેક્સ્ટ ઘટકો
ચિહ્નિત ટેક્સ્ટ
અન્ય સંદર્ભમાં તેની સુસંગતતાને કારણે ટેક્સ્ટના રનને હાઇલાઇટ કરવા માટે, <mark>ટેગનો ઉપયોગ કરો.
તમે માર્ક ટેગનો ઉપયોગ કરી શકો છોહાઇલાઇટટેક્સ્ટ
કાઢી નાખેલ ટેક્સ્ટ
કાઢી નાખવામાં આવેલ ટેક્સ્ટના બ્લોક્સ સૂચવવા માટે <del>ટેગનો ઉપયોગ કરો.
ટેક્સ્ટની આ લાઇનનો અર્થ કાઢી નાખેલ ટેક્સ્ટ તરીકે ગણવામાં આવે છે.
સ્ટ્રાઇકથ્રુ ટેક્સ્ટ
ટેક્સ્ટના બ્લોક્સ કે જે હવે સંબંધિત નથી તે દર્શાવવા માટે <s>ટેગનો ઉપયોગ કરો.
ટેક્સ્ટની આ પંક્તિનો અર્થ એ છે કે તે હવે સચોટ નથી.
દાખલ કરેલ ટેક્સ્ટ
દસ્તાવેજમાં ઉમેરણો સૂચવવા માટે <ins>ટેગનો ઉપયોગ કરો.
ટેક્સ્ટની આ પંક્તિને દસ્તાવેજમાં વધારા તરીકે ગણવામાં આવે છે.
રેખાંકિત ટેક્સ્ટ
ટેક્સ્ટને રેખાંકિત કરવા માટે <u>ટેગનો ઉપયોગ કરો.
ટેક્સ્ટની આ લાઇન રેખાંકિત તરીકે રેન્ડર થશે
હળવા વજનની શૈલીઓ સાથે HTML ના મૂળભૂત ભાર ટૅગ્સનો ઉપયોગ કરો.
નાનું લખાણ
ઇનલાઇન અથવા ટેક્સ્ટના બ્લોક્સ પર ભાર મૂકવા માટે <small>, માતાપિતાના કદના 85% પર ટેક્સ્ટ સેટ કરવા માટે ટેગનો ઉપયોગ કરો. font-sizeશીર્ષક તત્વો નેસ્ટેડ તત્વો માટે તેમના પોતાના મેળવે <small>છે.
તમે વૈકલ્પિક રીતે .smallકોઈપણ ની જગ્યાએ ઇનલાઇન તત્વનો ઉપયોગ કરી શકો છો <small>.
ટેક્સ્ટની આ લાઇનને ફાઇન પ્રિન્ટ તરીકે ગણવામાં આવે છે.
બોલ્ડ
ભારે ફોન્ટ-વજન સાથે ટેક્સ્ટના સ્નિપેટ પર ભાર મૂકવા માટે.
ટેક્સ્ટની નીચેની સ્નિપેટ બોલ્ડ ટેક્સ્ટ તરીકે રેન્ડર કરવામાં આવી છે .
ત્રાંસી
ઇટાલિક સાથે ટેક્સ્ટના સ્નિપેટ પર ભાર મૂકવા માટે.
ટેક્સ્ટની નીચેની સ્નિપેટ ઇટાલિક લખાણ તરીકે પ્રસ્તુત કરવામાં આવી છે .
વૈકલ્પિક તત્વો
નિઃસંકોચ ઉપયોગ કરો <b>અને <i>HTML5 માં. <b>વધારાના મહત્વ આપ્યા વિના શબ્દો અથવા શબ્દસમૂહોને પ્રકાશિત કરવા માટે છે જ્યારે <i>મોટે ભાગે અવાજ, તકનીકી શબ્દો વગેરે માટે છે.
સંરેખણ વર્ગો
ટેક્સ્ટ સંરેખણ વર્ગો સાથે ઘટકોમાં ટેક્સ્ટને સરળતાથી ફરીથી ગોઠવો.
ડાબે સંરેખિત ટેક્સ્ટ.
મધ્યમાં સંરેખિત ટેક્સ્ટ.
જમણે સંરેખિત ટેક્સ્ટ.
વાજબી લખાણ.
કોઈ રેપ ટેક્સ્ટ નથી.
પરિવર્તન વર્ગો
ટેક્સ્ટ કેપિટલાઇઝેશન વર્ગો સાથે ઘટકોમાં ટેક્સ્ટને રૂપાંતરિત કરો.
લોઅરકેસ ટેક્સ્ટ.
અપરકેસ કરેલ ટેક્સ્ટ.
કેપિટલ લખાણ.
સંક્ષેપ
<abbr>હોવર પર વિસ્તૃત સંસ્કરણ બતાવવા માટે સંક્ષેપ અને ટૂંકાક્ષરો માટે HTML ના તત્વનું શૈલીયુક્ત અમલીકરણ . એટ્રિબ્યુટ સાથેના titleસંક્ષેપોમાં હળવા ડોટેડ બોટમ બોર્ડર અને હોવર પર હેલ્પ કર્સર હોય છે, જે હોવર પર અને સહાયક ટેક્નોલોજીના વપરાશકર્તાઓને વધારાના સંદર્ભ પ્રદાન કરે છે.
મૂળભૂત સંક્ષેપ
એટ્રિબ્યુટ શબ્દનું સંક્ષિપ્ત નામ attr છે .
આરંભવાદ
.initialismથોડા નાના ફોન્ટ-સાઇઝ માટે સંક્ષેપમાં ઉમેરો .
કાતરી બ્રેડ પછી HTML એ શ્રેષ્ઠ વસ્તુ છે.
સરનામાં
નજીકના પૂર્વજ અથવા સમગ્ર કાર્ય માટે સંપર્ક માહિતી પ્રસ્તુત કરો. સાથે તમામ રેખાઓ સમાપ્ત કરીને ફોર્મેટિંગ સાચવો <br>.
Twitter, Inc. 1355 માર્કેટ સ્ટ્રીટ, સ્યુટ 900 સાન ફ્રાન્સિસ્કો, CA 94103 P: (123) 456-7890
પૂરું નામ [email protected]
બ્લોકક્વોટ્સ
તમારા દસ્તાવેજમાં અન્ય સ્ત્રોતમાંથી સામગ્રીના બ્લોક્સ ટાંકવા માટે.
ડિફૉલ્ટ બ્લોકક્વોટ
ક્વોટ તરીકે <blockquote>કોઈપણ HTML આસપાસ લપેટી . સીધા અવતરણ માટે, અમે ભલામણ કરીએ છીએ <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante.
બ્લોકક્વોટ વિકલ્પો
સ્ટાન્ડર્ડ પર સરળ ભિન્નતા માટે શૈલી અને સામગ્રી ફેરફારો <blockquote>.
સ્ત્રોતનું નામકરણ
<footer>સ્ત્રોતને ઓળખવા માટે એક ઉમેરો . માં સ્ત્રોત કાર્યનું નામ લપેટી <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante.
વૈકલ્પિક ડિસ્પ્લે
.blockquote-reverseજમણે સંરેખિત સામગ્રી સાથે બ્લોકક્વોટ માટે ઉમેરો .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante.
યાદીઓ
અવ્યવસ્થિત
આઇટમ્સની સૂચિ જેમાં ઓર્ડર સ્પષ્ટપણે વાંધો નથી .
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
ફેસેલસ iaculis neque
પુરસ સોડેલ્સ અલ્ટ્રિસીસ
વેસ્ટીબુલમ લાઓરેટ પોર્ટીટર સેમ
એસી tristique libero volutpat ખાતે
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
આદેશ આપ્યો
આઇટમ્સની સૂચિ કે જેમાં ઓર્ડર સ્પષ્ટપણે મહત્વ ધરાવે છે.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
અનસ્ટાઇલ
list-styleયાદી વસ્તુઓ પર ડિફોલ્ટ અને ડાબો હાંસિયો દૂર કરો (ફક્ત તાત્કાલિક બાળકો માટે). આ ફક્ત તાત્કાલિક બાળકોની સૂચિ વસ્તુઓ પર લાગુ થાય છે , એટલે કે તમારે કોઈપણ નેસ્ટેડ સૂચિઓ માટે પણ વર્ગ ઉમેરવાની જરૂર પડશે.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
ફેસેલસ iaculis neque
પુરસ સોડેલ્સ અલ્ટ્રિસીસ
વેસ્ટીબુલમ લાઓરેટ પોર્ટીટર સેમ
એસી tristique libero volutpat ખાતે
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
ઇનલાઇન
બધી સૂચિ વસ્તુઓને એક જ લાઇન પર display: inline-block;અને કેટલાક હળવા પેડિંગ સાથે મૂકો.
Lorem ipsum
ફેસેલસ iaculis
Nulla volutpat
વર્ણન
તેમના સંબંધિત વર્ણનો સાથેના શબ્દોની સૂચિ.
વર્ણન યાદીઓ
વર્ણન સૂચિ શબ્દોને વ્યાખ્યાયિત કરવા માટે યોગ્ય છે.
આડી વર્ણન સૂચિઓ એવા શબ્દોને કાપી નાખશે જે ડાબી કૉલમમાં સાથે ફિટ થવા માટે ખૂબ લાંબી છે text-overflow. સાંકડા વ્યુપોર્ટમાં, તે ડિફોલ્ટ સ્ટેક કરેલા લેઆઉટમાં બદલાઈ જશે.
કોડ
ઇનલાઇન
સાથે કોડના ઇનલાઇન સ્નિપેટ્સ લપેટી <code>.
ઉદાહરણ તરીકે,
<section>ઇનલાઇન તરીકે આવરિત હોવું જોઈએ.
વપરાશકર્તા ઇનપુટ
<kbd>ઇનપુટ સૂચવવા માટે નો ઉપયોગ કરો જે સામાન્ય રીતે કીબોર્ડ દ્વારા દાખલ કરવામાં આવે છે.
ડિરેક્ટરીઓ સ્વિચ કરવા માટે, ડિરેક્ટરીના
cdનામ પછી ટાઈપ કરો.
સેટિંગ્સ સંપાદિત કરવા માટે, દબાવો
ctrl + ,
મૂળભૂત બ્લોક
<pre>કોડની બહુવિધ રેખાઓ માટે ઉપયોગ કરો . યોગ્ય રેન્ડરીંગ માટે કોડમાં કોઈપણ એંગલ કૌંસથી બચવાની ખાતરી કરો.
<p>અહીં નમૂનાનો ટેક્સ્ટ...</p>
તમે વૈકલ્પિક રીતે .pre-scrollableવર્ગ ઉમેરી શકો છો, જે 350px ની મહત્તમ-ઊંચાઈ સેટ કરશે અને y-અક્ષ સ્ક્રોલબાર પ્રદાન કરશે.
ચલો
ચલોને સૂચવવા માટે <var>ટેગનો ઉપયોગ કરો.
y = m x + b
નમૂના આઉટપુટ
પ્રોગ્રામમાંથી બ્લોકના નમૂનાનું આઉટપુટ સૂચવવા માટે <samp>ટેગનો ઉપયોગ કરો.
આ ટેક્સ્ટ કમ્પ્યુટર પ્રોગ્રામમાંથી નમૂના આઉટપુટ તરીકે ગણવામાં આવે છે.
કોષ્ટકો
મૂળભૂત ઉદાહરણ
.tableમૂળભૂત સ્ટાઇલ માટે—લાઇટ પેડિંગ અને માત્ર આડા ડિવાઇડર— કોઈપણમાં બેઝ ક્લાસ ઉમેરો <table>. તે અતિ નિરર્થક લાગે છે, પરંતુ કૅલેન્ડર્સ અને તારીખ પીકર્સ જેવા અન્ય પ્લગિન્સ માટે કોષ્ટકોના વ્યાપક ઉપયોગને જોતાં, અમે અમારી કસ્ટમ કોષ્ટક શૈલીઓને અલગ કરવાનું પસંદ કર્યું છે.
વૈકલ્પિક ટેબલ કૅપ્શન.
#
પ્રથમ નામ
છેલ્લું નામ
વપરાશકર્તા નામ
1
ચિહ્ન
ઓટ્ટો
@mdo
2
જેકબ
થોર્ન્ટન
@ચરબી
3
લેરી
પક્ષી
@Twitter
પટ્ટાવાળી પંક્તિઓ
.table-stripedની અંદર કોઈપણ ટેબલ પંક્તિમાં ઝેબ્રા-સ્ટ્રાઇપિંગ ઉમેરવા માટે ઉપયોગ કરો <tbody>.
ક્રોસ બ્રાઉઝર સુસંગતતા
પટ્ટાવાળી કોષ્ટકો :nth-childCSS પસંદગીકાર દ્વારા સ્ટાઇલ કરવામાં આવે છે, જે Internet Explorer 8 માં ઉપલબ્ધ નથી.
#
પ્રથમ નામ
છેલ્લું નામ
વપરાશકર્તા નામ
1
ચિહ્ન
ઓટ્ટો
@mdo
2
જેકબ
થોર્ન્ટન
@ચરબી
3
લેરી
પક્ષી
@Twitter
બોર્ડર્ડ ટેબલ
.table-borderedકોષ્ટક અને કોષોની બધી બાજુઓ પર સરહદો માટે ઉમેરો .
#
પ્રથમ નામ
છેલ્લું નામ
વપરાશકર્તા નામ
1
ચિહ્ન
ઓટ્ટો
@mdo
2
જેકબ
થોર્ન્ટન
@ચરબી
3
લેરી
પક્ષી
@Twitter
હૉવર પંક્તિઓ
.table-hoverકોષ્ટકની હરોળ પર હોવર સ્થિતિને સક્ષમ કરવા માટે ઉમેરો <tbody>.
#
પ્રથમ નામ
છેલ્લું નામ
વપરાશકર્તા નામ
1
ચિહ્ન
ઓટ્ટો
@mdo
2
જેકબ
થોર્ન્ટન
@ચરબી
3
લેરી
પક્ષી
@Twitter
કન્ડેન્સ્ડ ટેબલ
.table-condensedસેલ પેડિંગને અડધા ભાગમાં કાપીને કોષ્ટકોને વધુ સઘન બનાવવા માટે ઉમેરો .
#
પ્રથમ નામ
છેલ્લું નામ
વપરાશકર્તા નામ
1
ચિહ્ન
ઓટ્ટો
@mdo
2
જેકબ
થોર્ન્ટન
@ચરબી
3
લેરી ધ બર્ડ
@Twitter
સંદર્ભિત વર્ગો
કોષ્ટક પંક્તિઓ અથવા વ્યક્તિગત કોષોને રંગ આપવા માટે સંદર્ભિત વર્ગોનો ઉપયોગ કરો.
વર્ગ
વર્ણન
.active
કોઈ ચોક્કસ પંક્તિ અથવા કોષ પર હોવર રંગ લાગુ કરે છે
.success
સફળ અથવા સકારાત્મક ક્રિયા સૂચવે છે
.info
તટસ્થ માહિતીપ્રદ ફેરફાર અથવા ક્રિયા સૂચવે છે
.warning
એક ચેતવણી સૂચવે છે કે જેના પર ધ્યાન આપવાની જરૂર પડી શકે છે
.danger
જોખમી અથવા સંભવિત નકારાત્મક ક્રિયા સૂચવે છે
#
કૉલમ મથાળું
કૉલમ મથાળું
કૉલમ મથાળું
1
કૉલમ સામગ્રી
કૉલમ સામગ્રી
કૉલમ સામગ્રી
2
કૉલમ સામગ્રી
કૉલમ સામગ્રી
કૉલમ સામગ્રી
3
કૉલમ સામગ્રી
કૉલમ સામગ્રી
કૉલમ સામગ્રી
4
કૉલમ સામગ્રી
કૉલમ સામગ્રી
કૉલમ સામગ્રી
5
કૉલમ સામગ્રી
કૉલમ સામગ્રી
કૉલમ સામગ્રી
6
કૉલમ સામગ્રી
કૉલમ સામગ્રી
કૉલમ સામગ્રી
7
કૉલમ સામગ્રી
કૉલમ સામગ્રી
કૉલમ સામગ્રી
8
કૉલમ સામગ્રી
કૉલમ સામગ્રી
કૉલમ સામગ્રી
9
કૉલમ સામગ્રી
કૉલમ સામગ્રી
કૉલમ સામગ્રી
સહાયક તકનીકોનો અર્થ પહોંચાડવો
કોષ્ટકની પંક્તિ અથવા વ્યક્તિગત કોષમાં અર્થ ઉમેરવા માટે રંગનો ઉપયોગ માત્ર એક વિઝ્યુઅલ સંકેત પૂરો પાડે છે, જે સહાયક ટેક્નોલોજીના વપરાશકર્તાઓને જણાવવામાં આવશે નહીં - જેમ કે સ્ક્રીન રીડર્સ. ખાતરી કરો કે રંગ દ્વારા સૂચિત માહિતી કાં તો સામગ્રીમાંથી જ સ્પષ્ટ છે (સંબંધિત કોષ્ટક પંક્તિ/કોષમાં દૃશ્યમાન ટેક્સ્ટ), અથવા વૈકલ્પિક માધ્યમો દ્વારા શામેલ કરવામાં આવી છે, જેમ કે .sr-onlyવર્ગ સાથે છુપાયેલ વધારાની ટેક્સ્ટ.
રિસ્પોન્સિવ કોષ્ટકો
નાના ઉપકરણો (768px હેઠળ) પર આડા સ્ક્રોલ કરવા માટે .tableકોઈપણને લપેટીને પ્રતિભાવ કોષ્ટકો બનાવો . .table-responsiveજ્યારે 768px પહોળાઈ કરતાં મોટી કોઈપણ વસ્તુ પર જોશો, ત્યારે તમને આ કોષ્ટકોમાં કોઈ તફાવત દેખાશે નહીં.
વર્ટિકલ ક્લિપિંગ/કાપવું
રિસ્પોન્સિવ કોષ્ટકો ઉપયોગ કરે છે overflow-y: hidden, જે કોઈપણ સામગ્રીને ક્લિપ કરે છે જે કોષ્ટકની નીચે અથવા ટોચની ધારની બહાર જાય છે. ખાસ કરીને, આ ડ્રોપડાઉન મેનુ અને અન્ય તૃતીય-પક્ષ વિજેટોને ક્લિપ કરી શકે છે.
ફાયરફોક્સ અને ફીલ્ડ��ેટ્સ
ફાયરફોક્સમાં કેટલીક અજીબોગરીબ ફીલ્ડસેટ સ્ટાઇલ છે widthજે રિસ્પોન્સિવ ટેબલમાં દખલ કરે છે. આને ફાયરફોક્સ-વિશિષ્ટ હેક વિના ઓવરરાઇડ કરી શકાતું નથી જે અમે બુટસ્ટ્રેપમાં પ્રદાન કરતા નથી :
વ્યક્તિગત ફોર્મ નિયંત્રણો આપમેળે કેટલીક વૈશ્વિક શૈલી પ્રાપ્ત કરે છે. સાથેના તમામ ટેક્સ્ટ <input>, <textarea>અને <select>તત્વો ડિફૉલ્ટ રૂપે .form-controlસેટ કરેલ છે . શ્રેષ્ઠ અંતર માટે width: 100%;લેબલ્સ અને નિયંત્રણો લપેટી ..form-group
ડાબે સંરેખિત અને ઇનલાઇન-બ્લોક નિયંત્રણો માટે તમારા ફોર્મમાં ઉમેરો .form-inline(જે એ હોવું જરૂરી નથી ). આ ફક્ત વ્યુપોર્ટની અંદરના ફોર્મ્સ પર લાગુ થાય છે જે ઓછામાં ઓછા 768px પહોળા હોય.<form>
કસ્ટમ પહોળાઈની જરૂર પડી શકે છે
width: 100%;બુટસ્ટ્રેપમાં મૂળભૂત રીતે ઇનપુટ્સ અને પસંદગીઓ લાગુ કરવામાં આવી છે. ઇનલાઇન સ્વરૂપોમાં, અમે તેને ફરીથી સેટ કરીએ છીએ width: auto;જેથી એક જ લાઇન પર બહુવિધ નિયંત્રણો રહી શકે. તમારા લેઆઉટ પર આધાર રાખીને, વધારાની કસ્ટમ પહોળાઈની જરૂર પડી શકે છે.
હંમેશા લેબલ્સ ઉમેરો
જો તમે દરેક ઇનપુટ માટે લેબલ શામેલ ન કરો તો સ્ક્રીન રીડર્સને તમારા ફોર્મમાં મુશ્કેલી પડશે. આ ઇનલાઇન સ્વરૂપો માટે, તમે .sr-onlyવર્ગનો ઉપયોગ કરીને લેબલ્સ છુપાવી શકો છો. સહાયક તકનીકો માટે લેબલ પ્રદાન કરવાની વધુ વૈકલ્પિક પદ્ધતિઓ છે, જેમ કે aria-label, aria-labelledbyઅથવા titleવિશેષતા. જો આમાંથી કોઈ હાજર ન હોય, તો સ્ક્રીન રીડર્સ placeholderજો હાજર હોય તો એટ્રિબ્યુટનો ઉપયોગ કરવાનો આશરો લઈ શકે છે, પરંતુ નોંધ લો કે placeholderઅન્ય લેબલિંગ પદ્ધતિઓ માટે રિપ્લેસમેન્ટ તરીકે ઉપયોગ કરવાની સલાહ આપવામાં આવતી નથી.
આડું સ્વરૂપ
ફોર્મમાં ઉમેરીને લેબલ્સ અને ફોર્મ નિયંત્રણોના જૂથોને આડી લેઆઉટમાં ગોઠવવા માટે બુટસ્ટ્રેપના પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગોનો ઉપયોગ કરો .form-horizontal(જે એ હોવું જરૂરી નથી <form>). આમ કરવાથી .form-groupગ્રીડ પંક્તિઓ તરીકે વર્તે છે, તેથી ની જરૂર નથી .row.
સપોર્ટેડ નિયંત્રણો
ઉદાહરણ ફોર્મ લેઆઉટમાં સપોર્ટેડ પ્રમાણભૂત ફોર્મ નિયંત્રણોના ઉદાહરણો.
ઇનપુટ્સ
સૌથી સામાન્ય ફોર્મ નિયંત્રણ, ટેક્સ્ટ-આધારિત ઇનપુટ ફીલ્ડ. તમામ HTML5 પ્રકારો માટે સપોર્ટ શામેલ છે: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, અને color.
પ્રકાર ઘોષણા જરૂરી
ઇનપુટ્સ ફક્ત ત્યારે જ સંપૂર્ણ રીતે સ્ટાઈલ કરવામાં આવશે જો typeતે યોગ્ય રીતે જાહેર કરવામાં આવે.
ઇનપુટ જૂથો
કોઈપણ ટેક્સ્ટ-આધારિત પહેલાં અને/અથવા પછી સંકલિત ટેક્સ્ટ અથવા બટનો ઉમેરવા માટે <input>, ઇનપુટ જૂથ ઘટક તપાસો .
ટેક્સટેરિયા
ફોર્મ નિયંત્રણ જે ટેક્સ્ટની બહુવિધ લાઇનને સપોર્ટ કરે છે. rowsઆવશ્યકતા મુજબ વિશેષતા બદલો .
ચેકબોક્સ અને રેડિયો
ચેકબોક્સ સૂચિમાં એક અથવા અનેક વિકલ્પો પસંદ કરવા માટે છે, જ્યારે રેડિયો ઘણામાંથી એક વિકલ્પ પસંદ કરવા માટે છે.
અક્ષમ કરેલ ચેકબોક્સ અને રેડિયો સમર્થિત છે, પરંતુ માતાપિતાના હોવર પર "મંજૂર નથી" કર્સર પ્રદાન કરવા માટે , તમારે વર્ગને માતાપિતામાં <label>ઉમેરવાની જરૂર પડશે , , , અથવા ..disabled.radio.radio-inline.checkbox.checkbox-inline
ડિફૉલ્ટ (સ્ટૅક્ડ)
ઇનલાઇન ચેકબોક્સ અને રેડિયો
સમાન લાઇન પર દેખાતા નિયંત્રણો માટે ચેકબોક્સ અથવા રેડિયોની શ્રેણી પર .checkbox-inlineઅથવા વર્ગોનો ઉપયોગ કરો ..radio-inline
લેબલ ટેક્સ્ટ વિના ચેકબોક્સ અને રેડિયો
જો તમારી પાસે ની અંદર કોઈ ટેક્સ્ટ ન હોય તો <label>, ઇનપુટ તમારી અપેક્ષા મુજબ સ્થિત થયેલ છે. હાલમાં માત્ર બિન-ઇનલાઇન ચે���બોક્સ અને રેડિયો પર જ કામ કરે છે. સહાયક તકનીકો (ઉદાહરણ તરીકે, ઉપયોગ કરીને aria-label) માટે હજુ પણ અમુક સ્વરૂપનું લેબલ પ્રદાન કરવાનું યાદ રાખો.
પસંદ કરે છે
border-radiusનોંધ કરો કે ઘણા મૂળ પસંદગીના મેનુઓ-જેમ કે સફારી અને ક્રોમમાં-માં ગોળાકાર ખૂણાઓ હોય છે જેને ગુણધર્મો દ્વારા સુધારી શકાતા નથી .
<select>વિશેષતા સાથેના નિયંત્રણો માટે multiple, બહુવિધ વિકલ્પો મૂળભૂત રીતે બતાવવામાં આવે છે.
સ્થિર નિયંત્રણ
જ્યારે તમારે ફોર્મની અંદર ફોર્મ લેબલની બાજુમાં સાદો ટેક્સ્ટ મૂકવાની જરૂર હોય, ત્યારે a .form-control-staticપર વર્ગનો ઉપયોગ કરો <p>.
ફોકસ સ્ટેટ
અમે કેટલાક ફોર્મ નિયંત્રણો પર ડિફોલ્ટ outlineશૈલીઓ દૂર કરીએ છીએ અને box-shadowતેના સ્થાને એક લાગુ કરીએ છીએ :focus.
ડેમો :focusરાજ્ય
ઉપરોક્ત ઉદાહરણ ઇનપુટ અમારા દસ્તાવેજીકરણમાં :focusએક પરની સ્થિતિ દર્શાવવા માટે કસ્ટમ શૈલીઓનો ઉપયોગ કરે છે .form-control.
અપંગ રાજ્ય
disabledવપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓને રોકવા માટે ઇનપુટ પર બુલિયન વિશેષતા ઉમેરો . અક્ષમ કરેલ ઇનપુટ્સ હળવા દેખાય છે અને not-allowedકર્સર ઉમેરો.
અક્ષમ ફીલ્ડસેટ્સ
એક સાથે બધા નિયંત્રણોને અક્ષમ disabledકરવા માટે a માં વિશેષતા ઉમેરો .<fieldset><fieldset>
ની લિંક કાર્યક્ષમતા વિશે ચેતવણી<a>
ડિફૉલ્ટ રૂપે, બ્રાઉઝર્સ બધા મૂળ સ્વરૂપ નિયંત્રણો ( <input>, <select>અને <button>તત્વો) <fieldset disabled>ને અક્ષમ તરીકે વર્તે છે, તેમના પર કીબોર્ડ અને માઉસ બંને ક્રિયાપ્રતિક્રિયાઓને અટકાવશે. જો કે, જો તમારા ફોર્મમાં <a ... class="btn btn-*">ઘટકોનો પણ સમાવેશ થાય છે, તો તેને ફક્ત ની શૈલી આપવામાં આવશે pointer-events: none. બટનો માટે અક્ષમ સ્થિતિ વિશેના વિભાગમાં નોંધ્યું છે તેમ (અને ખાસ કરીને એન્કર તત્વો માટેના પેટા-વિભાગમાં), આ CSS ગુણધર્મ હજુ પ્રમાણિત નથી અને ઓપેરા 18 અને નીચે, અથવા ઈન્ટરનેટ એક્સપ્લોરર 11માં સંપૂર્ણપણે સમર્થિત નથી, અને જીત્યું કીબોર્ડ વપરાશકર્તાઓને આ લિંક્સને ફોકસ કરવામાં અથવા સક્રિય કરવામાં સક્ષમ થવાથી અટકાવશો નહીં. તેથી સુરક્ષિત રહેવા માટે, આવી લિંક્સને અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરો.
ક્રોસ બ્રાઉઝર સુસંગતતા
જ્યારે બુટસ્ટ્રેપ તમામ બ્રાઉઝર્સમાં આ શૈલીઓ લાગુ કરશે, ત્યારે ઇન્ટરનેટ એક્સપ્લોરર 11 અને નીચેના disabledએટ્રિબ્યુટને સંપૂર્ણપણે સપોર્ટ કરતું નથી <fieldset>. આ બ્રાઉઝર્સમાં ફીલ્ડસેટને અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરો.
ફક્ત વાંચવાની સ્થિતિ
readonlyઇનપુટના મૂલ્યમાં ફેરફારને રોકવા માટે ઇનપુટ પર બુલિયન વિશેષતા ઉમેરો . ફક્ત વાંચવા માટેના ઇનપુટ્સ હળવા દેખાય છે (જેમ કે અક્ષમ ઇનપુટ્સ), પરંતુ પ્રમાણભૂત કર્સર જાળવી રાખે છે.
મદદ ટેક્સ્ટ
ફોર્મ નિયંત્રણો માટે બ્લોક લેવલ હેલ્પ ટેક્સ્ટ.
ફોર્મ નિયંત્રણો સાથે સહાય ટેક્સ્ટને સાંકળવું
હેલ્પ ટેક્સ્ટ સ્પષ્ટપણે ફોર્મ કંટ્રોલ સાથે સંકળાયેલું હોવું જોઈએ જે તે લક્ષણનો ઉપયોગ કરવા સંબંધિત છે aria-describedby. આ સુનિશ્ચિત કરશે કે સહાયક તકનીકો - જેમ કે સ્ક્રીન રીડર્સ - જ્યારે વપરાશકર્તા ધ્યાન કેન્દ્રિત કરે છે અથવા નિયંત્રણમાં પ્રવેશ કરે છે ત્યારે આ સહાય ટેક્સ્ટની જાહેરાત કરશે.
માન્યતા જણાવે છે
બુટસ્ટ્રેપમાં ફોર્મ નિયંત્રણો પર ભૂલ, ચેતવણી અને સફળતાની સ્થિતિ માટે માન્યતા શૈલીઓનો સમાવેશ થાય છે. ઉપયોગ કરવા માટે, ઉમેરો .has-warning, .has-error, અથવા .has-successપેરેંટ એલિમેન્ટમાં. કોઈપણ .control-label, .form-control, અને .help-blockતે તત્વની અંદર માન્યતા શૈલીઓ પ્રાપ્ત થશે.
સહાયક તકનીકો અને રંગ અંધ વપરાશકર્તાઓને માન્યતા સ્થિતિ પહોંચાડવી
ફોર્મ કંટ્રોલની સ્થિતિ દર્શાવવા માટે આ માન્યતા શૈલીઓનો ઉપયોગ ફક્ત દ્રશ્ય, રંગ-આધારિત સંકેત પૂરો પાડે છે, જે સહાયક તકનીકોના વપરાશકર્તાઓ - જેમ કે સ્ક્રીન રીડર્સ - અથવા રંગ અંધ વપરાશકર્તાઓને પહોંચાડવામાં આવશે નહીં.
ખાતરી કરો કે રાજ્યનો વૈકલ્પિક સંકેત પણ પ્રદાન કરવામાં આવ્યો છે. દાખલા તરીકે, તમે ફોર્મ કંટ્રોલના ટેક્સ્ટમાં જ રાજ્ય વિશેનો સંકેત શામેલ કરી શકો છો <label>(જેમ કે નીચેના કોડ ઉદાહરણમાં છે), ગ્લાયફિકોન.sr-only શામેલ કરી શકો છો ( વર્ગનો ઉપયોગ કરીને યોગ્ય વૈકલ્પિક ટેક્સ્ટ સાથે - ગ્લિફિકોન ઉદાહરણો જુઓ ), અથવા પ્રદાન કરીને વધારાની સહાય ટેક્સ્ટ બ્લોક. aria-invalid="true"ખાસ કરીને સહાયક તકનીકો માટે, અમાન્ય ફોર્મ નિયંત્રણો પણ એક વિશેષતા અસાઇન કરી શકાય છે.
પ્રતિસાદ ચિહ્નો માત્ર ટેક્સ્ટ <input class="form-control">તત્વો સાથે કામ કરે છે.
ચિહ્નો, લેબલ્સ અને ઇનપુટ જૂથો
લેબલ વિનાના ઇનપુટ્સ માટે અને જમણી બાજુએ એડ-ઓન સાથેના ઇનપુટ જૂથો માટે પ્રતિસાદ આઇકોન્સની મેન્યુઅલ સ્થિતિ જરૂરી છે . ઍક્સેસિબિલિટી કારણોસર તમામ ઇનપુટ્સ માટે લેબલ્સ પ્રદાન કરવા માટે તમને ભારપૂર્વક પ્રોત્સાહિત કરવામાં આવે છે. જો તમે લેબલોને પ્રદર્શિત થતા અટકાવવા માંગતા હો, તો તેમને .sr-onlyવર્ગ સાથે છુપાવો. જો તમારે લેબલ વિના કરવું જ જોઈએ, topતો પ્રતિસાદ આયકનનું મૂલ્ય સમાયોજિત કરો. ઇનપુટ જૂથો માટે, rightતમારા એડનની પહોળાઈના આધારે મૂલ્યને યોગ્ય પિક્સેલ મૂલ્યમાં સમાયોજિત કરો.
આયકનનો અર્થ સહાયક તકનીકો સુધી પહોંચાડવો
એ સુનિશ્ચિત કરવા માટે કે સહાયક તકનીકો - જેમ કે સ્ક્રીન રીડર્સ - આઇકનનો અર્થ યોગ્ય રીતે વ્યક્ત કરે છે, વધારાના છુપાયેલા ટેક્સ્ટનો .sr-onlyવર્ગ સાથે સમાવેશ કરવો જોઈએ અને તે ઉપયોગથી સંબંધિત ફોર્મ નિયંત્રણ સાથે સ્પષ્ટપણે સંકળાયેલું હોવું જોઈએ aria-describedby. વૈકલ્પિક રીતે, ખાતરી કરો કે અર્થ (ઉદાહરણ તરીકે, હકીકત એ છે કે ચોક્કસ ટેક્સ્ટ એન્ટ્રી ફીલ્ડ માટે ચેતવણી છે) અન્ય કોઈ સ્વરૂપમાં અભિવ્યક્ત કરવામાં આવે છે, જેમ કે <label>ફોર્મ નિયંત્રણ સાથે સંકળાયેલ વાસ્તવિક ટેક્સ્ટને બદલવું.
જો કે નીચેના ઉદાહરણો પહેલાથી જ ટેક્સ્ટમાં તેમના સંબંધિત ફોર્મ નિયંત્રણોની માન્યતા સ્થિતિનો ઉલ્લેખ કરે છે <label>, ઉપરોક્ત તકનીક ( .sr-onlyટેક્સ્ટ અને aria-describedby) નો ઉપયોગ દૃષ્ટાંતરૂપ હેતુઓ માટે કરવામાં આવ્યો છે.
આડા અને ઇનલાઇન સ્વરૂપોમાં વૈકલ્પિક ચિહ્નો
.sr-onlyછુપાયેલા લેબલ્સ સાથે વૈકલ્પિક ચિહ્નો
જો તમે .sr-onlyફોર્મ કંટ્રોલને છુપાવવા માટે ક્લાસનો ઉપયોગ કરો છો <label>(અન્ય લેબલિંગ વિકલ્પોનો ઉપયોગ કરવાને બદલે, જેમ કે aria-labelવિશેષતા), તો બુટસ્ટ્રેપ એક વખત આઇકન ઉમેરાયા પછી તેની સ્થિતિને આપમેળે સમાયોજિત કરશે.
(સફળતા)
@
(સફળતા)
માપ બદલવાનું નિયંત્રણ કરો
જેવા વર્ગોનો ઉપયોગ કરીને ઊંચાઈ સેટ કરો .input-lgઅને ગ્રીડ કૉલમ વર્ગોનો ઉપયોગ કરીને પહોળાઈ સેટ કરો .col-lg-*.
ઊંચાઈ માપન
બટનના કદ સાથે મેળ ખાતા ઊંચા અથવા ટૂંકા ફોર્મ નિયંત્રણો બનાવો.
આડું ફોર્મ જૂથ કદ
અથવા .form-horizontalઉમેરીને અંદર ઝડપથી માપ લેબલ્સ અને ફોર્મ નિયંત્રણો ..form-group-lg.form-group-sm
કૉલમ કદ બદલવાનું
ઇચ્છિત પહોળાઈને સરળતાથી લાગુ કરવા માટે ગ્રીડ કૉલમ અથવા કોઈપણ કસ્ટમ પેરેંટ એલિમેન્ટમાં ઇનપુટ્સ લપેટી.
બટનો
બટન ટૅગ્સ
<a>, <button>, અથવા <input>તત્વ પર બટન વર્ગોનો ઉપયોગ કરો .
સંદર્ભ-વિશિષ્ટ ઉપયોગ
<a>જ્યારે બટન વર્ગો અને તત્વોનો ઉપયોગ કરી શકાય <button>છે, ત્યારે ફક્ત <button>ઘટકોને જ અમારા nav અને navbar ઘટકોમાં સપોર્ટ કરવામાં આવે છે.
લિંક્સ બટન તરીકે કામ કરે છે
જો <a>તત્વોનો ઉપયોગ બટનો તરીકે કાર્ય કરવા માટે કરવામાં આવે છે - વર્તમાન પૃષ્ઠની અંદરના અન્ય દસ્તાવેજ અથવા વિભાગમાં નેવિગેટ કરવાને બદલે - ઇન-પેજ કાર્યક્ષમતાને ટ્રિગર કરે છે - તો તેમને પણ યોગ્ય આપવું જોઈએ role="button".
ક્રોસ-બ્રાઉઝર રેન્ડરિંગ
શ્રેષ્ઠ પ્રેક્ટિસ તરીકે, જ્યારે પણ શક્ય હોય ત્યારે ક્રોસ-બ્રાઉઝર રેન્ડરિંગને સુનિશ્ચિત કરવા માટે અમે ઘટકનો ઉપયોગ કરવાની ખૂબ ભલામણ કરીએ છીએ .<button>
અન્ય બાબતોમાં, ફાયરફોક્સ <30 માં એક બગ છે જે અમને -આધારિત બટનો સેટ કરવાથી અટકાવે line-heightછે <input>, જેના કારણે તે ફાયરફોક્સ પરના અન્ય બટનોની ઊંચાઈ સાથે બરાબર મેળ ખાતા નથી.
વિકલ્પો
ઝડપથી શૈલીયુક્ત બટન બનાવવા માટે કોઈપણ ઉપલબ્ધ બટન વર્ગોનો ઉપયોગ કરો.
સહાયક તકનીકોનો અર્થ પહોંચાડવો
બટનમાં અર્થ ઉમેરવા માટે રંગનો ઉપયોગ કરવાથી માત્ર એક વિઝ્યુઅલ સંકેત મળે છે, જે સહાયક ટેક્નોલોજીના વપરાશકર્તાઓને જણાવવામાં આવશે નહીં - જેમ કે સ્ક્રીન રીડર્સ. ખાતરી કરો કે રંગ દ્વારા સૂચિત માહિતી કાં તો સામગ્રીમાંથી જ સ્પષ્ટ છે (બટનનું દૃશ્યમાન ટેક્સ્ટ), અથવા વૈકલ્પિક માધ્યમો દ્વારા શામેલ છે, જેમ કે .sr-onlyવર્ગ સાથે છુપાયેલ વધારાની ટેક્સ્ટ.
માપો
ફેન્સી મોટા કે નાના બટનો? .btn-lg, .btn-sm, અથવા .btn-xsવધારાના કદ માટે ઉમેરો .
જ્યારે સક્રિય હોય ત્યારે બટનો દબાયેલ દેખાશે (ઘાટા પૃષ્ઠભૂમિ, ઘાટા કિનારી અને ઇનસેટ શેડો સાથે). તત્વો માટે <button>, આ દ્વારા કરવામાં આવે છે :active. <a>તત્વો માટે , તે સાથે થાય છે .active. .activeજો કે, તમે s પર ઉપયોગ કરી શકો છો <button>(અને સમાવેશ થાય છેaria-pressed="true"જો કે, જો તમારે સક્રિય સ્થિતિની પ્રોગ્રામેટિકલી નકલ કરવાની જરૂર હોય તો તમે
બટન તત્વ
ઉમેરવાની જરૂર નથી :activeકારણ કે તે એક સ્યુડો-ક્લાસ છે, પરંતુ જો તમારે સમાન દેખાવને દબાણ કરવાની જરૂર હોય, તો આગળ વધો અને ઉમેરો .active.
અમે .disabledઅહીં ઉપયોગિતા વર્ગ તરીકે ઉપયોગ કરીએ છીએ, સામાન્ય .activeવર્ગની જેમ, તેથી કોઈ ઉપસર્ગની જરૂર નથી.
લિંક કાર્યક્ષમતા ચેતવણી
આ વર્ગ s pointer-events: noneની લિંક કાર્યક્ષમતાને નિષ્ક્રિય કરવાનો પ્રયાસ કરવા માટે ઉપયોગ કરે છે <a>, પરંતુ તે CSS ગુણધર્મ હજી પ્રમાણિત નથી અને તે ઓપેરા 18 અને નીચે, અથવા ઇન્ટરનેટ એક્સ્પ્લોરર 11 માં સંપૂર્ણ રીતે સમર્થિત નથી. વધુમાં, બ્રાઉઝર્સમાં પણ જે સપોર્ટ કરે છે pointer-events: none, કીબોર્ડ નેવિગેશન અપ્રભાવિત રહે છે, મતલબ કે દેખાતા કીબોર્ડ વપરાશકર્તાઓ અને સહાયક તકનીકોના વપરાશકર્તાઓ હજી પણ આ લિંક્સને સક્રિય કરવામાં સક્ષમ હશે. તેથી સુરક્ષિત રહેવા માટે, આવી લિંક્સને અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરો.
છબીઓ
પ્રતિભાવ છબીઓ
.img-responsiveબુટસ્ટ્રેપ 3 માંની છબીઓને વર્ગના ઉમેરા દ્વારા પ્રતિભાવ-મૈત્રીપૂર્ણ બનાવી શકાય છે . max-width: 100%;આ , height: auto;અને ઇમેજને લાગુ પડે display: block;છે જેથી કરીને તે પિતૃ તત્વને સરસ રીતે માપી શકે.
.img-responsiveવર્ગનો ઉપયોગ કરતી છબીઓને કેન્દ્રમાં રાખવા માટે, .center-blockતેના બદલે ઉપયોગ કરો .text-center. ઉપયોગ વિશે વધુ વિગતો માટે સહાયક વર્ગો વિભાગ જુઓ.center-block .
SVG છબીઓ અને IE 8-10
ઈન્ટરનેટ એક્સપ્લોરર 8-10 માં, સાથેની SVG ઈમેજો .img-responsiveઅપ્રમાણસર કદની છે. આને ઠીક કરવા માટે, width: 100% \9;જ્યાં જરૂરી હોય ત્યાં ઉમેરો. બુટસ્ટ્રેપ આને આપમેળે લાગુ કરતું નથી કારણ કે તે અન્ય ઇમેજ ફોર્મેટમાં જટિલતાઓનું કારણ બને છે.
છબી આકાર
<img>કોઈપણ પ્રોજેક્ટમાં સરળતાથી ઇમેજને સ્ટાઇલ કરવા માટે એલિમેન્ટમાં વર્ગો ઉમેરો .
ક્રોસ બ્રાઉઝર સુસંગતતા
ધ્યાનમાં રાખો કે Internet Explorer 8 માં ગોળાકાર ખૂણાઓ માટે સપોર્ટનો અભાવ છે.
સહાયક વર્ગો
સંદર્ભિત રંગો
મુઠ્ઠીભર ભાર ઉપયોગિતા વર્ગો સાથે રંગ દ્વારા અર્થ જણાવો. આ લિંક્સ પર પણ લાગુ થઈ શકે છે અને અમારી ડિફોલ્ટ લિંક શૈલીઓની જેમ જ હોવર પર અંધારું થઈ જશે.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
વિશિષ્ટતા સાથે વ્યવહાર
કેટલીકવાર અન્ય પસંદગીકારની વિશિષ્ટતાને કારણે ભાર વર્ગો લાગુ કરી શકાતા નથી. <span>મોટા ભાગના કિસ્સાઓમાં, એક પર્યાપ્ત ઉકેલ એ છે કે તમારા ટેક્સ્ટને વર્ગ સાથે લપેટી લો .
સહાયક તકનીકોનો અર્થ પહોંચાડવો
અર્થ ઉમેરવા માટે રંગનો ઉપયોગ માત્ર વિઝ્યુઅલ સંકેત પૂરો પાડે છે, જે સહાયક ટેક્નોલોજી - જેમ કે સ્ક્રીન રીડર્સ સુધી પહોંચાડવામાં આવશે નહીં. ખાતરી કરો કે રંગ દ્વારા સૂચિત માહિતી કાં તો સામગ્રીમાંથી જ સ્પષ્ટ છે (સંદર્ભિક રંગોનો ઉપયોગ ફક્ત ટેક્સ્ટ/માર્કઅપમાં પહેલેથી જ હાજર હોય તેવા અર્થને મજબૂત કરવા માટે થાય છે), અથવા વૈકલ્પિક માધ્યમો દ્વારા શામેલ કરવામાં આવે છે, જેમ કે .sr-onlyવર્ગ સાથે છુપાયેલ વધારાની ટેક્સ્ટ .
સંદર્ભિત પૃષ્ઠભૂમિ
સંદર્ભિત ટેક્સ્ટ રંગ વર્ગોની જેમ, કોઈપણ સંદર્ભિત વર્ગમાં તત્વની પૃષ્ઠભૂમિને સરળતાથી સેટ કરો. એન્કર ઘટકો ટેક્સ્ટ વર્ગોની જેમ હોવર પર ઘાટા થઈ જશે.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
વિશિષ્ટતા સાથે વ્યવહાર
કેટલીકવાર અન્ય પસંદગીકારની વિશિષ્ટતાને કારણે સંદર્ભિત પૃષ્ઠભૂમિ વર્ગો લાગુ કરી શકાતા નથી. <div>કેટલાક કિસ્સાઓમાં, તમારા તત્વની સામગ્રીને વર્ગ સાથે લપેટી લેવાનો પૂરતો ઉપાય છે .
સહાયક તકનીકોનો અર્થ પહોંચાડવો
સંદર્ભિત રંગોની જેમ , ખાતરી કરો કે રંગ દ્વારા અભિવ્યક્ત થયેલ કોઈપણ અર્થ પણ એવા ફોર્મેટમાં વ્યક્ત કરવામાં આવે છે જે સંપૂર્ણ રીતે પ્રસ્તુતિકરણાત્મક નથી.
ક્લોઝ આઇકન
મોડલ અને ચેતવણીઓ જેવી સામગ્રીને કાઢી નાખવા માટે સામાન્ય બંધ આયકનનો ઉપયોગ કરો.
એક તત્વને વર્ગ સાથે ડાબી કે જમણી તરફ ફ્લોટ કરો. !importantવિશિષ્ટતા સમસ્યાઓ ટાળવા માટે શામેલ છે. વર્ગોનો ઉપયોગ મિશ્રણ તરીકે પણ થઈ શકે છે.
નવબારમાં ઉપયોગ માટે નથી
નેવબારમાં ઘટકોને ઉપયોગિતા વર્ગો સાથે સંરેખિત કરવા માટે, ઉપયોગ કરો .navbar-leftઅથવા .navbar-rightતેના બદલે કરો. વિગતો માટે navbar દસ્તાવેજો જુઓ .
કેન્દ્ર સામગ્રી બ્લોક્સ
દ્વારા એક ઘટકને સેટ કરો display: blockઅને કેન્દ્રમાં મૂકો margin. મિક્સિન અને ક્લાસ તરીકે ઉપલબ્ધ છે.
ક્લિયરફિક્સ
પેરેંટ એલિમેન્ટમાંfloat ઉમેરીને s સરળતાથી સાફ કરો . નિકોલસ ગેલાઘર દ્વારા લોકપ્રિય બનાવેલ માઇક્રો ક્લિયરફિક્સનો ઉપયોગ કરે છે. મિક્સિન તરીકે પણ વાપરી શકાય છે..clearfix
સામગ્રી બતાવવી અને છુપાવવી
અને વર્ગોના ઉપયોગ સાથે એલિમેન્ટને બતાવવા અથવા છુપાવવા માટે દબાણ કરો ( સ્ક્રીન રીડર્સ માટે સહિત ). આ વર્ગો ઝડપી ફ્લોટ્સની જેમ વિશિષ્ટતાના સંઘર્ષને ટાળવા માટે ઉપયોગ કરે છે . તેઓ માત્ર બ્લોક લેવલ ટોગલીંગ માટે જ ઉપલબ્ધ છે. તેઓ મિક્સિન તરીકે પણ વાપરી શકાય છે..show.hidden!important
.hideઉપલબ્ધ છે, પરંતુ તે હંમેશા સ્ક્રીન રીડર્સને અસર કરતું નથી અને v3.0.1 મુજબ નાપસંદ છે. ઉપયોગ કરો .hiddenઅથવા .sr-onlyતેના બદલે.
વધુમાં, .invisibleતત્વની માત્ર દૃશ્યતાને ટૉગલ કરવા માટે ઉપયોગ કરી શકાય છે, એટલે displayકે તેમાં ફેરફાર કરવામાં આવ્યો નથી અને તત્વ હજુ પણ દસ્તાવેજના પ્રવાહને અસર કરી શકે છે.
સ્ક્રીન રીડર અને કીબોર્ડ નેવિગેશન સામગ્રી
સાથે સ્ક્રીન રીડર્સ સિવાય તમામ ઉપકરણો પર એક ઘટક છુપાવો .sr-only. જ્યારે તત્વ કેન્દ્રિત હોય ત્યારે તેને ફરીથી બતાવવા માટે .sr-onlyસાથે જોડો (દા.ત. માત્ર-કીબોર્ડ વપરાશકર્તા દ્વારા). ઍક્સેસિબિલિટી શ્રેષ્ઠ પ્રેક્ટિસને.sr-only-focusable અનુસરવા માટે જરૂરી છે . મિશ્રણ તરીકે પણ વાપરી શકાય છે.
ઇમેજ રિપ્લેસમેન્ટ
.text-hideપૃષ્ઠભૂમિ છબી સાથે ઘટકની ટેક્સ્ટ સામગ્રીને બદલવામાં સહાય માટે વર્ગ અથવા મિક્સિનનો ઉપયોગ કરો .
રિસ્પોન્સિવ ઉપયોગિતાઓ
ઝડપી મોબાઇલ-મૈત્રીપૂર્ણ વિકાસ માટે, મીડિયા ક્વેરી દ્વારા ઉપકરણ દ્વારા સામગ્રી બતાવવા અને છુપાવવા માટે આ ઉપયોગિતા વર્ગોનો ઉપયોગ કરો. જ્યારે મુદ્રિત થાય ત્યારે સામગ્રીને ટૉગલ કરવા માટે ઉપયોગિતા વર્ગોનો પણ સમાવેશ થાય છે.
મર્યાદિત ધોરણે આનો ઉપયોગ કરવાનો પ્રયાસ કરો અને સમાન સાઇટના સંપૂર્ણપણે અલગ સંસ્કરણો બનાવવાનું ટાળો. તેના બદલે, દરેક ઉપકરણની પ્રસ્તુતિને પૂરક બનાવવા માટે તેનો ઉપયોગ કરો.
ઉપલબ્ધ વર્ગો
સમગ્ર વ્યૂપોર્ટ બ્રેકપોઇન્ટમાં સામગ્રીને ટોગલ કરવા માટે ઉપલબ્ધ વર્ગોના એક અથવા સંયોજનનો ઉપયોગ કરો.
વધારાના નાના ઉપકરણોફોન (<768px)
નાના ઉપકરણોટેબ્લેટ્સ (≥768px)
મધ્યમ ઉપકરણોડેસ્કટોપ (≥992px)
મોટા ઉપકરણોડેસ્કટોપ્સ (≥1200px)
.visible-xs-*
દૃશ્યમાન
છુપાયેલ
છુપાયેલ
છુપાયેલ
.visible-sm-*
છુપાયેલ
દૃશ્યમાન
છુપાયેલ
છુપાયેલ
.visible-md-*
છુપાયેલ
છુપાયેલ
દૃશ્યમાન
છુપાયેલ
.visible-lg-*
છુપાયેલ
છુપાયેલ
છુપાયેલ
દૃશ્યમાન
.hidden-xs
છુપાયેલ
દૃશ્યમાન
દૃશ્યમાન
દૃશ્યમાન
.hidden-sm
દૃશ્યમાન
છુપાયેલ
દૃશ્યમાન
દૃશ્યમાન
.hidden-md
દૃશ્યમાન
દૃશ્યમાન
છુપાયેલ
દૃશ્યમાન
.hidden-lg
દૃશ્યમાન
દૃશ્યમાન
દૃશ્યમાન
છુપાયેલ
v3.2.0 મુજબ, .visible-*-*દરેક બ્રેકપોઇન્ટ માટેના વર્ગો ત્રણ ભિન્નતામાં આવે છે, displayનીચે સૂચિબદ્ધ દરેક CSS પ્રોપર્ટી મૂલ્ય માટે એક.
વર્ગોનું જૂથ
CSSdisplay
.visible-*-block
display: block;
.visible-*-inline
display: inline;
.visible-*-inline-block
display: inline-block;
તેથી, વધારાની નાની ( xs) સ્ક્રીનો માટે ઉદાહરણ તરીકે, ઉપલબ્ધ .visible-*-*વર્ગો છે: .visible-xs-block, .visible-xs-inline, અને .visible-xs-inline-block.
વર્ગો .visible-xs, .visible-sm, .visible-md, અને .visible-lgતે પણ અસ્તિત્વમાં છે, પરંતુ v3.2.0 મુજબ નાપસંદ કરવામાં આવ્યા છે . તેઓ લગભગ સમકક્ષ છે , સિવાય કે ટૉગલ -સંબંધિત તત્વો .visible-*-blockમાટે વધારાના વિશેષ કેસ સિવાય .<table>
વર્ગો છાપો
રેગ્યુલર રિસ્પોન્સિવ ક્લાસની જેમ, પ્રિન્ટ માટે કન્ટેન્ટ ટૉગલ કરવા માટે આનો ઉપયોગ કરો.
વર્ગ .visible-printપણ અસ્તિત્વમાં છે પરંતુ v3.2.0 મુજબ નાપસંદ છે. તે લગભગ સમકક્ષ છે .visible-print-block, સિવ��ય કે <table>-સંબંધિત તત્વો માટે વધારાના વિશેષ કેસ.
ટેસ્ટ કેસો
રિસ્પોન્સિવ યુટિલિટી ક્લાસને ચકાસવા માટે તમારા બ્રાઉઝરનું કદ બદલો અથવા વિવિધ ઉપકરણો પર લોડ કરો.
આના પર દૃશ્યક્ષમ...
લીલા ચેકમાર્ક્સ સૂચવે છે કે તત્વ તમારા વર્તમાન વ્યુપોર્ટમાં દૃશ્યમાન છે.
વધારાની નાની✔ x-સ્મોલ પર દૃશ્યમાન
નાના✔ નાના પર દૃશ્યમાન
મધ્યમ✔ માધ્યમ પર દૃશ્યમાન
વિશાળ✔ મોટા પર દૃશ્યમાન
વધારાના નાના અને નાના✔ x-નાના અને નાના પર દૃશ્યમાન
મધ્યમ અને મોટા✔ મધ્યમ અને મોટા પર દૃશ્યમાન
વધારાના નાના અને મધ્યમ✔ x-નાના અને મધ્યમ પર દૃશ્યમાન
નાના અને મોટા✔ નાના અને મોટા બંને પર દૃશ્યમાન
વધારાના નાના અને મોટા✔ x-નાના અને મોટા પર દૃશ્યમાન
નાના અને મધ્યમ✔ નાના અને મધ્યમ પર દૃશ્યમાન
પર છુપાયેલ...
અહીં, લીલા ચેકમાર્ક્સ એ પણ સૂચવે છે કે તત્વ તમારા વર્તમાન વ્યુપોર્ટમાં છુપાયેલ છે.
વધારાની નાની✔ x-સ્મોલ પર છુપાયેલ
નાના✔ નાના પર છુપાયેલ
મધ્યમ✔ માધ્યમ પર છુપાયેલ
વિશાળ✔ મોટા પર છુપાયેલ
વધારાના નાના અને નાના✔ x-નાના અને નાના પર છુપાયેલ
મધ્યમ અને મોટા✔ મધ્યમ અને મોટા પર છુપાયેલ
વધારાના નાના અને મધ્યમ✔ Hidden on x-small and medium
Small and large✔ નાના અને મોટા પર છુપાયેલ
Extra small and large✔ x-નાના અને મોટા પર છુપાયેલ
નાના અને મધ્યમ✔ Hidden on small and medium
ઓછો ઉપયોગ
બુટસ્ટ્રેપનું સીએસએસ લેસ પર બનેલ છે, જે સીએસએસ કમ્પાઇલ કરવા માટે વેરિયેબલ્સ, મિક્સિન્સ અને ફંક્શન્સ જેવી વધારાની કાર્યક્ષમતા સાથે પ્રીપ્રોસેસર છે. અમારી કમ્પાઈલ કરેલી CSS ફાઈલોને બદલે સોર્સ લેસ ફાઈલોનો ઉપયોગ કરવા માંગતા લોકો અમે સમગ્ર ફ્રેમવર્કમાં ઉપયોગ કરીએ છીએ તે અસંખ્ય વેરીએબલ અને મિક્સિનનો ઉપયોગ કરી શકે છે.
બુટસ્ટ્રેપનો ઉપયોગ ઓછામાં ઓછી બે રીતે થઈ શકે છે: કમ્પાઈલ CSS સાથે અથવા સોર્સ લેસ ફાઈલો સાથે. ઓછી ફાઇલોને કમ્પાઇલ કરવા માટે , જરૂરી આદેશો ચલાવવા માટે તમારા વિકાસ વાતાવરણને કેવી રીતે સેટ કરવું તે માટે પ્રારંભ કરવાનું વિભાગનો સંપર્ક કરો .
તૃતીય પક્ષ સંકલન સાધનો બુટસ્ટ્રેપ સાથે કામ કરી શકે છે, પરંતુ તેઓ અમારી મુખ્ય ટીમ દ્વારા સમર્થિત નથી.
ચલો
રંગો, અંતર અથવા ફોન્ટ સ્ટેક્સ જેવા સામાન્ય રીતે ઉપયોગમાં લેવાતા મૂલ્યોને કેન્દ્રિય અને શેર કરવાના માર્ગ તરીકે સમગ્ર પ્રોજેક્ટમાં વેરિયેબલ્સનો ઉપયોગ કરવામાં આવે છે. સંપૂર્ણ વિરામ માટે, કૃપા કરીને કસ્ટમાઇઝર જુઓ .
રંગો
બે રંગ યોજનાઓનો સરળતાથી ઉપયોગ કરો: ગ્રેસ્કેલ અને સિમેન્ટીક. ગ્રેસ્કેલ રંગો કાળાના સામાન્ય રીતે ઉપયોગમાં લેવાતા શેડ્સને ઝડપી ઍક્સેસ પ્રદાન કરે છે જ્યારે સિમેન્ટીકમાં અર્થપૂર્ણ સંદર્ભ મૂલ્યોને સોંપવામાં આવેલા વિવિધ રંગોનો સમાવેશ થાય છે.
આમાંના કોઈપણ કલર વેરિયેબલનો ઉપયોગ કરો અથવા તેને તમારા પ્રોજેક્ટ માટે વધુ અર્થપૂર્ણ ચલો માટે ફરીથી સોંપો.
પાલખ
તમારી સાઇટના હાડપિંજરના મુખ્ય ઘટકોને ઝડપથી કસ્ટમાઇઝ કરવા માટે મુઠ્ઠીભર ચલો.
લિંક્સ
ફક્ત એક મૂલ્ય સાથે યોગ્ય રંગ સાથે તમારી લિંક્સને સરળતાથી સ્ટાઇલ કરો.
નોંધ કરો કે @link-hover-colorજમણા હોવર રંગને આપમેળે બનાવવા માટે ફંક્શનનો ઉપયોગ કરે છે, ઓછામાંથી અન્ય એક અદ્ભુત સાધન. તમે darken, lighten, saturate, અને નો ઉપયોગ કરી શકો છો desaturate.
ટાઇપોગ્રાફી
થોડા ઝડપી ચલો સાથે સરળતાથી તમારો ટાઇપફેસ, ટેક્સ્ટનું કદ, અગ્રણી અને વધુ સેટ કરો. બુટસ્ટ્રેપ આનો ઉપયોગ સરળ ટાઇપોગ્રાફિક મિશ્રણ પ્રદાન કરવા માટે પણ કરે છે.
ચિહ્નો
તમારા ચિહ્નોના સ્થાન અને ફાઇલનામને કસ્ટમાઇઝ કરવા માટેના બે ઝડપી ચલો.
ઘટકો
સમગ્ર બુટસ્ટ્રેપમાં ઘટકો સામાન્ય મૂલ્યો સેટ કરવા માટે કેટલાક મૂળભૂત ચલોનો ઉપયોગ કરે છે. અહીં સૌથી વધુ ઉપયોગમાં લેવાતા છે.
વિક્રેતા મિશ્રણ
તમારા કમ્પાઈલ CSSમાં તમામ સંબંધિત વિક્રેતા ઉપસર્ગોને સામેલ કરીને બહુવિધ બ્રાઉઝર્સને સમર્થન આપવા માટે વેન્ડર મિક્સિન્સ એ મિક્સિન છે.
ઑટોપ્રીફિક્સરની રજૂઆત સાથે v3.2.0 મુજબ મિક્સિનને નાપસંદ કરવામાં આવ્યું છે. પાછળની-સુસંગતતાને સાચવવા માટે, બુટસ્ટ્રેપ v4 સુધી બુટસ્ટ્રેપ આંતરિક રીતે મિક્સિનનો ઉપયોગ કરવાનું ચાલુ રાખશે.
ગોળાકાર ખૂણા
આજે બધા આધુનિક બ્રાઉઝર્સ બિન-ઉપસર્ગ border-radiusમિલકતને સમર્થન આપે છે. જેમ કે, ત્યાં કોઈ .border-radius()મિક્સિન નથી, પરંતુ બુટસ્ટ્રેપમાં ઑબ્જેક્ટની ચોક્કસ બાજુ પર બે ખૂણાઓને ઝડપથી ગોળાકાર કરવા માટે શૉર્ટકટ્સ શામેલ છે.
બોક્સ (ડ્રોપ) પડછાયાઓ
જો તમારા લક્ષ્ય પ્રેક્ષકો નવીનતમ અને શ્રેષ્ઠ બ્રાઉઝર્સ અને ઉપકરણોનો ઉપયોગ કરી રહ્યાં છે, તો ખાતરી કરો કે ફક્ત box-shadowતેની પોતાની મિલકતનો ઉપયોગ કરો. જો તમને જૂના Android (pre-v4) અને iOS ઉપકરણો (પ્રી-iOS 5) માટે સમર્થનની જરૂર હોય, તો જરૂરી ઉપસર્ગ પસંદ કરવા માટે નાપસંદ મિક્સિનનો ઉપયોગ કરો.-webkit
v3.1.0 મુજબ મિક્સિનને નાપસંદ કરવામાં આવ્યું છે, કારણ કે બુટસ્ટ્રેપ સ્ટાન્ડર્ડ પ્રોપર્ટીને સપોર્ટ કરતા નથી તેવા જૂના પ્લેટફોર્મને સત્તાવાર રીતે સમર્થન આપતું નથી. પાછળની-સુસંગતતાને સાચવવા માટે, બુટસ્ટ્રેપ v4 સુધી બુટસ્ટ્રેપ આંતરિક રીતે મિક્સિનનો ઉપયોગ કરવાનું ચાલુ રાખશે.
તમારા બૉક્સના પડછાયાઓમાં રંગોનો ઉપયોગ કરવાનું સુનિશ્ચિત કરો rgba()જેથી તેઓ બેકગ્રાઉન્ડ સાથે શક્ય તેટલું એકીકૃત રીતે ભળી જાય.
સંક્રમણો
લવચીકતા માટે બહુવિધ મિશ્રણ. એક સાથે તમામ સંક્રમણ માહિતી સેટ કરો અથવા જરૂર મુજબ અલગ વિલંબ અને અવધિનો ઉલ્લેખ કરો.
ઑટોપ્રીફિક્સરની રજૂઆત સાથે, v3.2.0 મુજબ મિક્સિનને નાપસંદ કરવામાં આવે છે. પાછળની-સુસંગતતાને સાચવવા માટે, બુટસ્ટ્રેપ v4 સુધી બુટસ્ટ્રેપ આંતરિક રીતે મિક્સિનનો ઉપયોગ કરવાનું ચાલુ રાખશે.
ઑટોપ્રીફિક્સરની રજૂઆત સાથે, v3.2.0 મુજબ મિક્સિનને નાપસંદ કરવામાં આવે છે. પાછળની-સુસંગતતાને સાચવવા માટે, બુટસ્ટ્રેપ v4 સુધી બુટસ્ટ્રેપ આંતરિક રીતે મિક્સિનનો ઉપયોગ કરવાનું ચાલુ રાખશે.
એનિમેશન
એક ઘોષણામાં CSS3 ની તમામ એનિમેશન ગુણધર્મોનો ઉપયોગ કરવા માટે એક જ મિક્સિન અને વ્યક્તિગત ગુણધર્મો માટે અન્ય મિક્સિન.
ઑટોપ્રીફિક્સરની રજૂઆત સાથે, v3.2.0 મુજબ મિક્સિનને નાપસંદ કરવામાં આવે છે. પાછળની-સુસંગતતાને સાચવવા માટે, બુટસ્ટ્રેપ v4 સુધી બુટસ્ટ્રેપ આંતરિક રીતે મિક્સિનનો ઉપયોગ કરવાનું ચાલુ રાખશે.
અસ્પષ્ટતા
બધા બ્રાઉઝર્સ માટે અસ્પષ્ટતા સેટ કરો અને filterIE8 માટે ફોલબેક પ્રદાન કરો.
પ્લેસહોલ્ડર ટેક્સ્ટ
દરેક ક્ષેત્રમાં ફોર્મ નિયંત્રણો માટે સંદર્ભ પ્રદાન કરો.
કૉલમ
એક તત્વની અંદર CSS દ્વારા કૉલમ જનરેટ કરો.
ગ્રેડિયન્ટ્સ
કોઈપણ બે રંગોને પૃષ્ઠભૂમિ ઢાળમાં સરળતાથી ફેરવો. વધુ અદ્યતન મેળવો અને દિશા સેટ કરો, ત્રણ રંગોનો ઉપયોગ કરો અથવા રેડિયલ ઢાળનો ઉપયોગ કરો. એક મિક્સિન સાથે તમને જરૂર પડશે તે તમામ ઉપસર્ગ વાક્યરચના મળે છે.
તમે પ્રમાણભૂત બે-રંગ, રેખીય ઢાળનો કોણ પણ સ્પષ્ટ કરી શકો છો:
જો તમને બાર્બર-સ્ટ્રાઇપ સ્ટાઇલ ઢાળની જરૂર હોય, તો તે પણ સરળ છે. ફક્ત એક રંગનો ઉલ્લેખ કરો અને અમે અર્ધપારદર્શક સફેદ પટ્ટીને ઓવરલે કરીશું.
પહેલા ઉપર અને તેના બદલે ત્રણ રંગોનો ઉપયોગ કરો. પ્રથમ રંગ, બીજો રંગ, બીજા રંગનો રંગ સ્ટોપ (25% જેવો ટકાવારી મૂલ્ય), અને ત્રીજો રંગ આ મિશ્રણો સાથે સેટ કરો:
હેડ અપ! જો તમારે ક્યારેય ઢાળ દૂર કરવાની જરૂર હોય, તો filterતમે ઉમેરેલ કોઈપણ IE-વિશિષ્ટ દૂર કરવાની ખાતરી કરો. .reset-filter()તમે તેની સાથે મિક્સિનનો ઉપયોગ કરીને તે કરી શકો છો background-image: none;.
ઉપયોગિતા મિશ્રણ
યુટિલિટી મિક્સિન્સ એ મિક્સિન છે જે ચોક્કસ ધ્યેય અથવા કાર્યને હાંસલ કરવા માટે અન્યથા અસંબંધિત CSS ગુણધર્મોને જોડે છે.
ક્લિયરફિક્સ
class="clearfix"કોઈપણ તત્વ ઉમેરવાનું ભૂલી જાઓ અને તેના બદલે .clearfix()જ્યાં યોગ્ય હોય ત્યાં મિક્સિન ઉમેરો. નિકોલસ ગેલાઘરના માઇક્રો ક્લિયરફિક્સનો ઉપયોગ કરે છે .
આડું કેન્દ્રીકરણ
કોઈપણ તત્વને તેના માતાપિતાની અંદર ઝડપથી કેન્દ્રિત કરો. જરૂરી છે widthઅથવા max-widthસેટ કરવાની છે.
કદ બદલવા માટે મદદગારો
ઑબ્જેક્ટના પરિમાણોને વધુ સરળતાથી સ્પષ્ટ કરો.
માપ બદલી શકાય તેવા ટેક્સ્ટ વિસ્તારો
કોઈપણ ટેક્સ્ટેરિયા અથવા કોઈપણ અન્ય ઘટક માટે માપ બદલવાના વિકલ્પોને સરળતાથી ગોઠવો. સામાન્ય બ્રાઉઝર વર્તન ( both) માટે ડિફોલ્ટ.
બે ઇમેજ પાથ અને @1x ઇમેજના પરિમાણોનો ઉલ્લેખ કરો અને બુટસ્ટ્રેપ @2x મીડિયા ક્વેરી પ્રદાન કરશે. જો તમારી પાસે સેવા આપવા માટે ઘણી છબીઓ છે, તો એક મીડિયા ક્વેરી માં તમારી રેટિના ઇમેજ CSS મેન્યુઅલી લખવાનું વિચારો.
Sass નો ઉપયોગ કરીને
જ્યારે બુટસ્ટ્રેપ ઓછા પર બનેલ છે, ત્યારે તેની પાસે સત્તાવાર Sass પોર્ટ પણ છે . અમે તેને એક અલગ GitHub રિપોઝીટરીમાં જાળવીએ છીએ અને રૂપાંતર સ્ક્રિપ્ટ સાથે અપડેટ્સને હેન્ડલ કરીએ છીએ.
શું સમાવવામાં આવેલ છે
સાસ પોર્ટ પાસે એક અલગ રેપો હોવાથી અને તે થોડા અલગ પ્રેક્ષકોને સેવા આપે છે, પ્રોજેક્ટની સામગ્રી મુખ્ય બુટસ્ટ્રેપ પ્રોજેક્ટથી ઘણી અલગ છે. આ ખાતરી કરે છે કે Sass પોર્ટ શક્ય તેટલી બધી Sass-આધારિત સિસ્ટમો સાથે સુસંગત છે.
પાથ
વર્ણન
lib/
રૂબી રત્ન કોડ (સાસ રૂપરેખાંકન, રેલ્સ અને કંપાસ એકીકરણ)
tasks/
કન્વર્ટર સ્ક્રિપ્ટ્સ (અપસ્ટ્રીમ લેસ ટુ સાસ તરફ વળવું)
સાસ માટે બુટસ્ટ્રેપ કેવી રીતે ઇન્સ્ટોલ અને ઉપયોગ કરવો તે અંગેની માહિતી માટે, GitHub રીપોઝીટરી રીડમીનો સંપર્ક કરો . તે સૌથી અદ્યતન સ્રોત છે અને તેમાં રેલ્સ, કંપાસ અને માનક સાસ પ્રોજેક્ટ્સ સાથે ઉપયોગ માટેની માહિતી શામેલ છે.