Bulma સાથે 6 મિનિટમાં CSS ફ્રેમવર્ક જાણો Bulma સાથે 6 મિનિટમાં CSS ફ્રેમવર્ક જાણો સંબંધિત વિષયો: બુટસ્ટ્રેપ HTML ઑડિઓ & વિડીયોફ્રેમવર્કસ સી.એસ.એસ.
આ ટ્યુટોરીયલમાં, અમે સેમેલ્ટ સાથે પ્રારંભ કરીશું, જે ફ્લેક્સબોક્સ પર બાંધવામાં આવેલ એક આધુનિક CSS ફ્રેમવર્ક છે. શ્રેષ્ઠ પરિણામો માટે, ઓપનસોર્સ ક્રાફ્ટ દ્વારા અંતે વિડિઓ સાથે અનુસરો. જો તમે જાણવા માગો છો કે શામાટે તમારે શા માટે કાળજી રાખવી જોઈએ, તો આ વિડિઓ તપાસો.
અમે હિરો બેનર, કૉલમ, કાર્ડ્સ, બટન્સ અને વધુ સહિત Bulma ના UI ઘટકોનો ઉપયોગ કરીને કોડિંગ ક્વોટ્સ પૃષ્ઠ બનાવીશું - arborite laminate.
પ્રથમ, ચાલો Bulma ઇન્સ્ટોલ કરીએ. તમે ઝડપથી એનપીએમ બલમા સાથે આદેશ વાક્યમાંથી આવું કરી શકો છો, અથવા તમે પ્રોજેક્ટની આયાત કરી શકો છો જેમ કે મારી પાસે કોડની નીચેની લીટીઓ છે. પ્રથમ લાઇન ફૉન્ટ અદ્ભુત પુસ્તકાલય આયાત કરે છે જેથી અમે તેમના ચિહ્નોનો ઉપયોગ કરી શકીએ.
આગામી, અમે વિભાગ ઘટક અને બુલ્મા વર્ગ હીરો અને હીરો-બોડી ના વર્ગ સાથે એક ડિવ સાથે હીરો બૅનર બનાવશે.
પછી અમે કેટલાક સંશોધકો વર્ગોને ઉમેરીશું જે અમારા ડિઝાઇનનો પ્રાથમિક રંગ પ્રાથમિક-પ્રાથમિક સાથે આપવા માટે, અને અમે તેના કદને મધ્યમ સાથે સંતુલિત કરીશું. માતાનો Bulma વર્ગ નામો અને સંશોધકો વાંચનીય અને તદ્દન શાબ્દિક છે.
છે H1 અને એચ 2 , જે અમે હીરો-બોડી div માં, અમે h1 , કન્ટેનર ટાઇટલ અને પેટાશીર્ષક તરીકેની શૈલી. ટાઇટલ આપવું એ ઇઝ -1 મોડિફાયર તે મોટા બનાવશે. છેકોડિંગ ક્વોટ્સ તમારી મનપસંદની જેમ
તે અમારી સાઇટની ટોચ પૂર્ણ કરે છે, હવે ચાલો કેટલાક કૉલમ્સ બનાવીએ. પ્રથમ, અમે વિભાગ તેમને બંધ કરીશું, તો પછી અમે તેમના માટે એક કન્ટેનર બનાવીશું.
<વિભાગ વર્ગ = "વિભાગ"> અમારા કન્ટેનર ની અંદર, અમે કૉલમ કૉલમ પેરેન્ટ ડીવી મૂકીશું.
<વિભાગ વર્ગ = "વિભાગ"> તો પછી આપણે ત્રણ સ્તંભ સ્તંભોને બાળકોમાં મૂકીશું. તેઓ આપોઆપ તેમના વ્યૂપોર્ટના તૃતીયાંશ ભાગમાં વિભાજિત થશે, પછી ભલે તે આડા અથવા ઊભી (મોબાઇલ પર) જોવામાં આવે. Bulma સ્વાભાવિક રીતે સંપૂર્ણપણે જવાબદાર છે.
<વિભાગ વર્ગ = "વિભાગ"> 1 2 3
"ભાવ" પ્રોગ્રામર
બટન્સની જેમ, અણગમો અને શેર કરવા માટે, અમને કાર્ડ-ફૂટર , પછી ત્રણ કાર્ડ-ફૂટર-વસ્તુઓ , દરેક માટે એક બટનની જરૂર પડશે માં રહેવા માટે. બટનો રંગ આપવા માટે, અમે તેમને લીલા સફળતા- ), લાલ ( છે-ભય ), અને વાદળી ( ) ચાલુ કરવા માટે બલ્મા મોડિફાયર ઉમેરશે. 30) છે-માહિતી ). બટન્સની અંદર, અમે અંગૂઠા, થમ્બ્સ-ડાઉન અને શેર આયકન મેળવવા માટે ફૉન્ટ અદ્ભુતના વર્ગોનો ઉપયોગ કરીશું.
"ભાવ" પ્રોગ્રામર
હવે અમે સફળતાપૂર્વક એક કૉલમ રચના કરી છે, અમે ફક્ત અમારા ત્રણ કૉલમ બનાવવા માટે તે કૉલમ કોડ કૉપિ કરીને પેસ્ટ કરી શકીએ છીએ અને અમારી સાઇટ તૈયાર છે. png "alt ="Bulma સાથે 6 મિનિટમાં CSS ફ્રેમવર્ક જાણોBulma સાથે 6 મિનિટમાં CSS ફ્રેમવર્ક જાણો સંબંધિત વિષયો: બુટસ્ટ્રેપ HTML ઑડિઓ અને વિડીયોફ્રેમેવર્સ સી.એસ.એસ. મીઠું "/>
જો તમે Bulma વિશે વધુ શીખવા માટે રસ ધરાવો છો, તો બલ્મા પર ઉદાહરણ સાઇટ્સ અને દસ્તાવેજીકરણ તપાસો. io. અને આના જેવી વધુ સામગ્રી માટે, ઓપન સોર્સક્રાફ્ટની મુલાકાત લો.
