બુટસ્ટ્રેપ 2.3.2: પ્રારંભ માર્ગદર્શિકા

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

માળખું

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

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

જ્યાં નંબર 2 સ્પાનના કદને રજૂ કરે છે. દરેક પંક્તિમાં કદ 12 ના 1 સ્પાન્સ, અથવા કદ 2 ના 6 સ્ત્રોતો માટે પૂરતી જગ્યા શામેલ છે, આ તમને ગમે તે પ્રમાણે વહેંચી શકાય છે. એકવાર પંક્તિની જગ્યા ઓળંગાઈ જાય, તે આપમેળે નીચે આપમેળે જશે, અમને એનો ઉપયોગ કરવાની મંજૂરી આપે છે ગાળો લાઈન બ્રેક બનાવવા માટે કદ 12. જો આપણે કેટલાક છોડવા માંગતા હો ગાળો જ્યારે એક બનાવવું, એટલે કે, 4 થી પ્રારંભ કરો ગાળો, અને 3 નું કદ લાગુ કરો, અમે આ કોડનો ઉપયોગ કરીશું:

<div class="span2 offset4">Contenido</div>

આનાથી વિભાગ ચારને કૂદી શકે છે સ્પેન્સ સામગ્રી પ્રદર્શિત કરતા પહેલા. આપણે આનો ઉપયોગ અમારી સ્વતંત્ર ઇચ્છાથી કરી શકીએ છીએ, આપણને આપણા કોડ સાથે જોઈએ છે તે છોડીને.

દરેક ઉપકરણ માટે વિવિધ ડિઝાઇન

દરેક પ્રકારનાં ડિવાઇસ માટે અલગ ડિઝાઇન લાગુ કરવા માટે, અમે નીચેના વર્ગોનો ઉપયોગ કરીને, દરેક લોજિકલ વિભાગને કહીશું કે તે કયા ઉપકરણ માટે લક્ષી છે:

આ રીતે, અમે એક જ URL સાથેના દરેક ઉપકરણ માટે એકદમ અલગ ડિઝાઇન બતાવી શકીએ છીએ.

બટનો

બુટસ્ટ્રેપ અમને રંગીન બટનોનો સ્વચ્છ સંગ્રહ આપે છે, તેનો ઉપયોગ ખૂબ જ સરળ છે:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

જ્યાં btn btn-success બટનનો રંગ સંદર્ભિત કરે છે, તેને બદલવા માટે, આપણે તેને ફક્ત પાછલી છબીમાં બતાવેલ વર્ગોથી બદલવું પડશે.

બુટસ્ટ્રેપ સ્થાપિત કરી રહ્યું છે

આ સીએસએસ ફ્રેમવર્કના ઇન્સ્ટોલેશન માટે, અમે પોસ્ટના અંતમાં જે લિંકને છોડીશ તેમાંથી ઝિપ ડાઉનલોડ કરીશું, અને અમે નીચેનો કોડ લખીશું અમારી HTML ફાઇલના મુખ્ય ભાગમાં.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

એકવાર અમે ખાતરી કરી લીધું છે કે સીએસએસ અને જેએસ ફાઇલો અમારી એચટીએમએલ ફાઇલ જેવા જ ફોલ્ડરમાં છે, અમે અમારી પ્રતિભાવપૂર્ણ વેબસાઇટ ડિઝાઇન કરવાનું પ્રારંભ કરી શકીએ છીએ.

વધુ મહિતી - ફોર્મ માન્યતા

ડાઉનલોડ કરો - બુટસ્ટ્રેપ: સીએસએસ ફ્રેમવર્ક