અભિગમ

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

એવું કંઈક જુઓ જે યોગ્ય લાગતું નથી, અથવા કદાચ વધુ સારું કરી શકાય? એક મુદ્દો ખોલો — અમને તમારી સાથે તેની ચર્ચા કરવાનું ગમશે.

સારાંશ

અમે આમાંના દરેકમાં વધુ ડાઇવ કરીશું, પરંતુ ઉચ્ચ સ્તરે, અમારા અભિગમને માર્ગદર્શન આપે છે તે અહીં છે.

• ઘટકો પ્રતિભાવશીલ અને મોબાઇલ-પ્રથમ હોવા જોઈએ
• ઘટકોને બેઝ ક્લાસ સાથે બનાવવું જોઈએ અને મોડિફાયર ક્લાસ દ્વારા વિસ્તૃત કરવું જોઈએ
• ઘટક રાજ્યોએ સામાન્ય z-ઇન્ડેક્સ સ્કેલનું પાલન કરવું જોઈએ
• જ્યારે પણ શક્ય હોય ત્યારે, JavaScript પર HTML અને CSS અમલીકરણને પ્રાધાન્ય આપો
• જ્યારે પણ શક્ય હોય ત્યારે, કસ્ટમ શૈલીઓ પર ઉપયોગિતાઓનો ઉપયોગ કરો
• જ્યારે પણ શક્ય હોય, કડક HTML આવશ્યકતાઓને લાગુ કરવાનું ટાળો (બાળકો પસંદગીકારો)

પ્રતિભાવશીલ

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

સમગ્ર બુટસ્ટ્રેપમાં, તમે અમારી મીડિયા ક્વેરીઝમાં આ સૌથી સ્પષ્ટ રીતે જોશો. મોટા ભાગના કિસ્સાઓમાં, અમે min-widthક્વેરીઝનો ઉપયોગ કરીએ છીએ જે ચોક્કસ બ્રેકપોઇન્ટ પર લાગુ થવાનું શરૂ કરે છે અને ઉચ્ચ બ્રેકપોઇન્ટ દ્વારા આગળ વધે છે. ઉદાહરણ તરીકે, એક થી અનંત .d-noneસુધી લાગુ પડે છે . min-width: 0બીજી બાજુ, .d-md-noneમધ્યમ બ્રેકપોઇન્ટ અને ઉપરથી એ લાગુ પડે છે.

અમુક સમયે અમે ઉપયોગ કરીશું max-widthજ્યારે ઘટકની અંતર્ગત જટિલતાને તેની જરૂર પડશે. અમુક સમયે, આ ઓવરરાઇડ્સ અમારા ઘટકોમાંથી મુખ્ય કાર્યક્ષમતાને ફરીથી લખવા કરતાં અમલીકરણ અને સમર્થન માટે કાર્યાત્મક અને માનસિક રીતે સ્પષ્ટ હોય છે. અમે આ અભિગમને મર્યાદિત કરવાનો પ્રયાસ કરીએ છીએ, પરંતુ સમયાંતરે તેનો ઉપયોગ કરીશું.

વર્ગો

અમારા રીબૂટ સિવાય, ક્રોસ-બ્રાઉઝર નોર્મલાઇઝેશન સ્ટાઈલશીટ, અમારી બધી શૈલીઓ પસંદગીકારો તરીકે વર્ગોનો ઉપયોગ કરવાનું લક્ષ્ય રાખે છે. આનો અર્થ એ છે કે પ્રકાર પસંદગીકારો (દા.ત., input[type="text"]) અને બાહ્ય પિતૃ વર્ગો (દા.ત., .parent .child) કે જે શૈલીઓને સરળતાથી ઓવરરાઇડ કરવા માટે ખૂબ વિશિષ્ટ બનાવે છે તેનાથી સ્પષ્ટ સ્ટીયરિંગ.

જેમ કે, ઘટકોને બેઝ ક્લાસ સાથે બાંધવા જોઈએ જેમાં સામાન્ય, ઓવરરાઇડ ન થાય તેવી પ્રોપર્ટી-વેલ્યુ જોડી હોય. ઉદાહરણ તરીકે, .btnઅને .btn-primary. અમે , , અને .btnજેવી બધી સામાન્ય શૈલીઓ માટે ઉપયોગ કરીએ છીએ . અમે પછી રંગ, પૃષ્ઠભૂમિ-રંગ, સરહદ-રંગ, વગેરે ઉમેરવા માટે મોડિફાયરનો ઉપયોગ કરીએ છીએ .displaypaddingborder-width.btn-primary

મોડિફાયર ક્લાસનો ઉપયોગ ત્યારે જ થવો જોઈએ જ્યારે બહુવિધ ગુણધર્મો અથવા મૂલ્યો બહુવિધ વેરિઅન્ટ્સમાં બદલવાના હોય. સંશોધકો હંમેશા જરૂરી હોતા નથી, તેથી ખાતરી કરો કે તમે કોડની રેખાઓ ખરેખર સાચવી રહ્યાં છો અને તેમને બનાવતી વખતે બિનજરૂરી ઓવરરાઇડ્સને અટકાવી રહ્યાં છો. સંશોધકોના સારા ઉદાહરણો અમારા થીમ રંગ વર્ગો અને કદના પ્રકારો છે.

z-ઇન્ડેક્સ સ્કેલ

બુટસ્ટ્રેપમાં બે z-indexસ્કેલ છે - ઘટકોની અંદર ઘટકો અને ઓવરલે ઘટકો.

ઘટક તત્વો

• બુટસ્ટ્રેપમાં કેટલાક ઘટકો borderપ્રોપર્ટીમાં ફેરફાર કર્યા વિના ડબલ બોર્ડર્સને રોકવા માટે ઓવરલેપિંગ તત્વો સાથે બાંધવામાં આવે છે. ઉદાહરણ તરીકે, બટન જૂથો, ઇનપુટ જૂથો અને પૃષ્ઠ ક્રમાંકન.
• આ ઘટકો થ્રુ નું પ્રમાણભૂત z-indexસ્કેલ શેર કરે છે .03
• 0મૂળભૂત છે (પ્રારંભિક), 1છે :hover, 2છે :active/ .active, અને 3છે :focus.
• આ અભિગમ સર્વોચ્ચ વપરાશકર્તા અગ્રતાની અમારી અપેક્ષાઓ સાથે મેળ ખાય છે. જો કોઈ તત્વ કેન્દ્રિત છે, તો તે દૃશ્યમાં છે અને વપરાશકર્તાના ધ્યાન પર છે. સક્રિય તત્વો બીજા ક્રમે છે કારણ કે તેઓ સ્થિતિ દર્શાવે છે. હોવર ત્રીજા સ્થાને સૌથી વધુ છે કારણ કે તે વપરાશકર્તાના ઉદ્દેશ્યને દર્શાવે છે, પરંતુ લગભગ કંઈપણ હોવર કરી શકાય છે.

ઓવરલે ઘટકો

બુટસ્ટ્રેપમાં કેટલાક ઘટકોનો સમાવેશ થાય છે જે અમુક પ્રકારના ઓવરલે તરીકે કાર્ય કરે છે. આમાં સર્વોચ્ચ ક્રમમાં z-index, ડ્રોપડાઉન, નિશ્ચિત અને સ્ટીકી નેવબાર્સ, મોડલ્સ, ટૂલટિપ્સ અને પોપોવર્સનો સમાવેશ થાય છે. આ ઘટકોનો પોતાનો z-indexસ્કેલ છે જે થી શરૂ થાય છે 1000. આ પ્રારંભિક નંબર મનસ્વી રીતે પસંદ કરવામાં આવ્યો હતો અને તે અમારી શૈલીઓ અને તમારા પ્રોજેક્ટની કસ્ટમ શૈલીઓ વચ્ચે નાના બફર તરીકે સેવા આપે છે.

દરેક ઓવરલે ઘટક તેના z-indexમૂલ્યમાં થોડો વધારો કરે છે જેથી સામાન્ય UI સિદ્ધાંતો વપરાશકર્તાને ધ્યાન કેન્દ્રિત અથવા હોવર કરેલ તત્વોને દરેક સમયે દૃશ્યમાં રહેવાની મંજૂરી આપે છે. ઉદાહરણ તરીકે, મોડલ એ ડોક્યુમેન્ટ બ્લોકીંગ છે (દા.ત., તમે મોડલની ક્રિયા સિવાય અન્ય કોઈ કાર્યવાહી કરી શકતા નથી), તેથી અમે તેને અમારા નેવબાર્સ ઉપર મૂકીએ છીએ.

z-indexઅમારા લેઆઉટ પૃષ્ઠમાં આ વિશે વધુ જાણો .

JS પર HTML અને CSS

જ્યારે પણ શક્ય હોય, અમે JavaScript પર HTML અને CSS લખવાનું પસંદ કરીએ છીએ. સામાન્ય રીતે, HTML અને CSS વધુ ફલપ્રદ અને તમામ વિવિધ અનુભવ સ્તરના વધુ લોકો માટે સુલભ છે. HTML અને CSS તમારા બ્રાઉઝરમાં JavaScript કરતાં વધુ ઝડપી છે, અને તમારું બ્રાઉઝર સામાન્ય રીતે તમારા માટે ઘણી બધી કાર્યક્ષમતા પ્રદાન કરે છે.

આ સિદ્ધાંત dataએટ્રિબ્યુટ્સનો ઉપયોગ કરીને અમારી પ્રથમ-વર્ગની JavaScript API છે. અમારા JavaScript પ્લગિન્સનો ઉપયોગ કરવા માટે તમારે લગભગ કોઈપણ JavaScript લખવાની જરૂર નથી; તેના બદલે, HTML લખો. અમારા JavaScript વિહંગાવલોકન પૃષ્ઠમાં આ વિશે વધુ વાંચો .

છેલ્લે, અમારી શૈલીઓ સામાન્ય વેબ ઘટકોના મૂળભૂત વર્તણૂકો પર આધારિત છે. જ્યારે પણ શક્ય હોય, અમે બ્રાઉઝર જે પ્રદાન કરે છે તેનો ઉપયોગ કરવાનું પસંદ કરીએ છીએ. ઉદાહરણ તરીકે, તમે .btnલગભગ કોઈપણ એલિમેન્ટ પર ક્લાસ મૂકી શકો છો, પરંતુ મોટાભાગના એલિમેન્ટ્સ કોઈપણ સિમેન્ટીક મૂલ્ય અથવા બ્રાઉઝર કાર્યક્ષમતા પ્રદાન કરતા નથી. તેથી તેના બદલે, અમે <button>s અને <a>s નો ઉપયોગ કરીએ છીએ.

તે જ વધુ જટિલ ઘટકો માટે જાય છે. જ્યારે અમે ઇનપુટની સ્થિતિ પર આધારિત પેરેંટ એલિમેન્ટમાં વર્ગો ઉમેરવા માટે આપણું પોતાનું ફોર્મ માન્યતા પ્લગઇન લખી શકીએ છીએ, ત્યાં અમને લખાણને લાલ કહેવાની શૈલીની મંજૂરી આપીએ છીએ, અમે દરેક બ્રાઉઝર અમને પ્રદાન કરે છે તે / સ્યુડો-તત્વોનો ઉપયોગ કરવાનું પસંદ કરીએ:valid છીએ :invalid.

ઉપયોગિતાઓ

ઉપયોગિતા વર્ગો-અગાઉ બુટસ્ટ્રેપ 3 માં મદદગારો-સીએસએસ બ્લોટ અને નબળા પૃષ્ઠ પ્રદર્શન સામે લડવામાં શક્તિશાળી સાથી છે. યુટિલિટી ક્લાસ એ સામાન્ય રીતે સિંગલ, અપરિવર્તનશીલ પ્રોપર્ટી-વેલ્યુ પેરિંગ છે જે વર્ગ તરીકે વ્યક્ત થાય છે (દા.ત., .d-blockરજૂ કરે છે display: block;). તેમની પ્રાથમિક અપીલ HTML લખતી વખતે ઉપયોગની ઝડપ અને તમારે લખવા માટેના કસ્ટમ CSSની માત્રાને મર્યાદિત કરવી છે.

ખાસ કરીને કસ્ટમ CSS સંબંધિત, ઉપયોગિતાઓ તમારી સૌથી સામાન્ય રીતે પુનરાવર્તિત પ્રોપર્ટી-વેલ્યુ જોડીને સિંગલ ક્લાસમાં ઘટાડીને ફાઈલના કદમાં વધારો સામે લડવામાં મદદ કરી શકે છે. આ તમારા પ્રોજેક્ટ્સમાં સ્કેલ પર નાટ્યાત્મક અસર કરી શકે છે.

લવચીક HTML

હંમેશા શક્ય ન હોવા છતાં, અમે ઘટકો માટેની અમારી HTML આવશ્યકતાઓમાં વધુ પડતા કટ્ટરપંથી બનવાનું ટાળવાનો પ્રયત્ન કરીએ છીએ. આમ, અમે અમારા CSS પસંદગીકારોમાં એક વર્ગ પર ધ્યાન કેન્દ્રિત કરીએ છીએ અને તાત્કાલિક બાળકો પસંદગીકારોને ટાળવાનો પ્રયાસ કરીએ છીએ ( >). આ તમને તમારા અમલીકરણમાં વધુ સુગમતા આપે છે અને અમારા CSSને સરળ અને ઓછા વિશિષ્ટ રાખવામાં મદદ કરે છે.

કોડ સંમેલનો

કોડ માર્ગદર્શિકા (બૂટસ્ટ્રેપ સહ-સર્જક, @mdo તરફથી) દસ્તાવેજો કે કેવી રીતે અમે સમગ્ર બુટસ્ટ્રેપમાં આપણું HTML અને CSS લખીએ છીએ. તે સામાન્ય ફોર્મેટિંગ, સામાન્ય જ્ઞાન ડિફોલ્ટ્સ, પ્રોપર્ટી અને એટ્રિબ્યુટ ઓર્ડર્સ અને વધુ માટે માર્ગદર્શિકાનો ઉલ્લેખ કરે છે.

અમે અમારા Sass/CSS માં આ ધોરણો અને વધુને લાગુ કરવા માટે Stylelint નો ઉપયોગ કરીએ છીએ. અમારું કસ્ટમ સ્ટાઈલિંટ રૂપરેખા ઓપન સોર્સ છે અને અન્ય લોકો માટે ઉપયોગ અને વિસ્તારવા માટે ઉપલબ્ધ છે.

અમે પ્રમાણભૂત અને સિમેન્ટીક HTML લાગુ કરવા તેમજ સામાન્ય ભૂલો શોધવા માટે vnu-jar નો ઉપયોગ કરીએ છીએ.