Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. મોરબી લીઓ રીસસ, પોર્ટા એસી કોન્સેકટુર એસી, વેસ્ટીબુલમ એટ ઇરોસ.
બુટસ્ટ્રેપ એ ટ્વિટરની એક ટૂલકીટ છે જે વેબએપ્સ અને સાઇટ્સના વિકાસને કિકસ્ટાર્ટ કરવા માટે રચાયેલ છે.
તેમાં ટાઇપોગ્રાફી, ફોર્મ્સ, બટન્સ, કોષ્ટકો, ગ્રીડ, નેવિગેશન અને વધુ માટે આધાર CSS અને HTML શામેલ છે.
Nerd ચેતવણી: બુટસ્ટ્રેપ લેસ સાથે બનેલ છે અને આધુનિક બ્રાઉઝર્સને ધ્યાનમાં રાખીને ગેટની બહાર કામ કરવા માટે ડિઝાઇન કરવામાં આવ્યું હતું.
સૌથી ઝડપી અને સરળ શરૂઆત માટે, ફક્ત આ સ્નિપેટને તમારા વેબપેજમાં કૉપિ કરો.
ઓછા ઉપયોગના ચાહક છો? કોઈ વાંધો નથી, ફક્ત રેપોને ક્લોન કરો અને આ રેખાઓ ઉમેરો:
ગીથબ પર સત્તાવાર બુટસ્ટ્રેપ રેપો સાથે ડાઉનલોડ કરો, ફોર્ક કરો, ખેંચો, ફાઇલ સમસ્યાઓ અને વધુ.
હાલમાં v1.3.0
Twitter પરના એન્જિનિયરોએ ઐતિહાસિક રીતે ફ્રન્ટ-એન્ડ આવશ્યકતાઓને પહોંચી વળવા માટે તેઓ પરિચિત હોય તેવી લગભગ કોઈપણ લાઇબ્રેરીનો ઉપયોગ કર્યો છે. બુટસ્ટ્રેપ રજૂ કરાયેલા પડકારોના જવાબ તરીકે શરૂ થયું. ઘણા અદ્ભુત લોકોની મદદથી, બુટસ્ટ્રેપ નોંધપાત્ર રીતે વધ્યો છે.
dev.twitter.com પર વધુ વાંચો ›
ક્રોમ, સફારી, ઈન્ટરનેટ એક્સપ્લોરર અને ફાયરફોક્સ જેવા મુખ્ય આધુનિક બ્રાઉઝર્સમાં બુટસ્ટ્રેપનું પરીક્ષણ અને સમર્થન કરવામાં આવે છે.
બુટસ્ટ્રેપ સંકલિત CSS, અનકમ્પાઇલ્ડ અને ઉદાહરણ નમૂનાઓ સાથે પૂર્ણ થાય છે.
બુટસ્ટ્રેપના ભાગ રૂપે પૂરી પાડવામાં આવેલ ડિફોલ્ટ ગ્રીડ સિસ્ટમ 940px પહોળી 16-કૉલમ ગ્રીડ છે. તે લોકપ્રિય 960 ગ્રીડ સિસ્ટમનો સ્વાદ છે, પરંતુ ડાબી અને જમણી બાજુએ વધારાના માર્જિન/પેડિંગ વિના.
અહીં બતાવ્યા પ્રમાણે, બે "કૉલમ્સ" સાથે એક મૂળભૂત લેઆઉટ બનાવી શકાય છે, જે દરેક 16 પાયાના કૉલમ્સની સંખ્યાને ફેલાવે છે જે અમે અમારી ગ્રીડ સિસ્ટમના ભાગ તરીકે વ્યાખ્યાયિત કરી છે. વધુ ભિન્નતા માટે નીચેના ઉદાહરણો જુઓ.
- <div વર્ગ = "પંક્તિ" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
જો તમારે .row
અસ્તિત્વમાંની કૉલમમાં એક બનાવીને તમારી સામગ્રીને નેસ્ટ કરો.
- <div વર્ગ = "પંક્તિ" >
- <div class = "span12" >
- કૉલમનું સ્તર 1
- <div વર્ગ = "પંક્તિ" >
- <div class = "span6" >
- સ્તર 2
- </div>
- <div class = "span6" >
- સ્તર 2
- </div>
- </div>
- </div>
- </div>
ડિફોલ્ટ 940px ગ્રીડ સિસ્ટમને કસ્ટમાઇઝ કરવા માટે બુટસ્ટ્રેપમાં બિલ્ટ-ફુલ ચલો છે. થોડીક કસ્ટમાઇઝેશન સાથે, તમે કૉલમનું કદ, તેમના ગટર અને તેઓ જે કન્ટેનરમાં રહે છે તેમાં ફેરફાર કરી શકો છો.
ગ્રીડ સિસ્ટમને સંશોધિત કરવા માટે જરૂરી ચલો હાલમાં બધામાં રહે છે preboot.less
.
ચલ | ડિફૉલ્ટ મૂલ્ય | વર્ણન |
---|---|---|
@gridColumns |
16 | ગ્રીડની અંદર કૉલમની સંખ્યા |
@gridColumnWidth |
40px | ગ્રીડની અંદર દરેક કૉલમની પહોળાઈ |
@gridGutterWidth |
20px | દરેક કૉલમ વચ્ચેની નકારાત્મક જગ્યા |
@siteWidth |
તમામ કૉલમ અને ગટરનો ગણતરી કરેલ સરવાળો | અમે કૉલમ અને ગટરની સંખ્યા ગણવા અને .fixed-container() મિક્સિનની પહોળાઈ સેટ કરવા માટે કેટલીક મૂળભૂત મેચનો ઉપયોગ કરીએ છીએ. |
ગ્રીડમાં ફેરફાર કરવાનો અર્થ એ છે કે ત્રણ @grid-*
ચલોને બદલવું અને ઓછી ફાઇલોને ફરીથી કમ્પાઇલ કરવી.
બુટસ્ટ્રેપ 24 કૉલમ સુધીની ગ્રીડ સિસ્ટમને હેન્ડલ કરવા માટે સજ્જ છે; ડિફૉલ્ટ માત્ર 16 છે. તમારા ગ્રીડ વેરીએબલ્સ 24-કૉલમ ગ્રીડમાં કસ્ટમાઇઝ્ડ કેવી રીતે દેખાશે તે અહીં છે.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
એકવાર ફરીથી કમ્પાઇલ થઈ ગયા પછી, તમે સેટ થઈ જશો!
ડિફૉલ્ટ અને સરળ 940px-વાઇડ, એકલ દ્વારા પૂરી પાડવામાં આવેલ લગભગ કોઈપણ વેબસાઇટ અથવા પૃષ્ઠ માટે કેન્દ્રિત લેઆઉટ <div.container>
.
- <body>
- <div વર્ગ = "કન્ટેનર" >
- ...
- </div>
- </body>
ન્યૂનતમ અને મહત્તમ-પહોળાઈ અને ડાબી બાજુની સાઇડબાર સાથે વૈકલ્પિક, લવચીક પ્રવાહી પૃષ્ઠ માળખું. એપ્લિકેશન્સ અને દસ્તાવેજો માટે સરસ.
- <body>
- <div class = "container-fluid" >
- <div વર્ગ = "સાઇડબાર" >
- ...
- </div>
- <div વર્ગ = "સામગ્રી" >
- ...
- </div>
- </div>
- </body>
તમારા વેબપૃષ્ઠોને સંરચિત કરવા માટે માનક ટાઇપોગ્રાફિક વંશવેલો.
સમગ્ર ટાઈપોગ્રાફિક ગ્રીડ અમારી preboot.less ફાઈલમાં બે ઓછા વેરીએબલ પર આધારિત છે: @basefont
અને @baseline
. પ્રથમ સમગ્ર ઉપયોગમાં લેવાતો આધાર ફોન્ટ-કદ છે અને બીજો આધાર રેખા-ઊંચાઈ છે.
અમે તે ચલો અને કેટલાક ગણિતનો ઉપયોગ અમારા તમામ પ્રકારના અને વધુના માર્જિન, પેડિંગ્સ અને લાઇન-હાઈટ્સ બનાવવા માટે કરીએ છીએ.
નુલ્લમ ક્વિસ રિસસ એગેટ ઉર્ના મોલીસ ઓર્નારે વેલ ઇયુ લીઓ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
ભાર, સરનામાં અને સંક્ષિપ્ત શબ્દોનો ઉપયોગ કરીને
<strong>
<em>
<address>
<abbr>
એમ્ફેસિસ ટૅગ્સ ( <strong>
અને <em>
) નો ઉપયોગ શબ્દ અથવા શબ્દસમૂહની તેની આસપાસની નકલને સંબંધિત વધારાના મહત્વ અથવા ભાર દર્શાવવા માટે થવો જોઈએ. <strong>
મહત્વ <em>
માટે અને તાણના ભાર માટે ઉપયોગ કરો .
ફ્યુસે ડેપિબસ , ટેલસ એસી કર્સસ કોમોડો , ટોર્ટર મૌરીસ કન્ડીમેન્ટમ નિભ , યુટ ફર્મેન્ટમ માસ્સા જસ્ટો સીટ એમેટ રીસસ. Maecenas faucibus mollis interdum. નુલ્લા વિટાએ એલિટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ.
નોંધ:<b>
HTML5 માં ઉપયોગ અને ટૅગ કરવા હજુ પણ ઠીક છે <i>
અને તેમને અનુક્રમે બોલ્ડ અને ઇટાલિક સ્ટાઇલ કરવાની જરૂર નથી (જોકે જો ત્યાં વધુ સિમેન્ટીક તત્વ હોય, તો તેનો ઉપયોગ કરો). <b>
વધારાના મહત્વ દર્શાવ્યા વિના શબ્દો અથવા શબ્દસમૂહોને પ્રકાશિત કરવા માટે છે, જ્યારે <i>
મોટે ભાગે અવાજ, તકનીકી શબ્દો વગેરે માટે છે.
તત્વનો ઉપયોગ તેના નજીકના <address>
પૂર્વજ અથવા કાર્યના સમગ્ર ભાગ માટે સંપર્ક માહિતી માટે થાય છે. તેનો ઉપયોગ કેવી રીતે થઈ શકે તેના બે ઉદાહરણો અહીં છે:
નોંધ: સામગ્રીને યોગ્ય રીતે સંરચિત કરવા માટે દરેક લાઇન <address>
લાઇન-બ્રેક ( ) સાથે સમાપ્ત થવી જોઈએ <br />
અથવા બ્લોક-લેવલ ટેગ (દા.ત., ) માં લપેટી હોવી જોઈએ .<p>
સંક્ષિપ્ત શબ્દો અને સંક્ષિપ્ત શબ્દો માટે, <abbr>
ટેગનો ઉપયોગ કરો ( HTML5<acronym>
માં નાપસંદ કરેલ છે ). ટૅગની અંદર શોર્ટહેન્ડ ફોર્મ મૂકો અને સંપૂર્ણ નામ માટે શીર્ષક સેટ કરો.
<blockquote>
<p>
<small>
બ્લોકક્વોટ સમાવવા માટે, <blockquote>
આસપાસ લપેટી <p>
અને <small>
ટૅગ્સ. તમારા સ્રોતને ટાંકવા માટે તત્વનો ઉપયોગ કરો અને તમને તે પહેલાં <small>
એક em ડેશ મળશે .—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante venenatis dapibus posuere velit aliquet.
ડૉ. જુલિયસ હિબર્ટ
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> ડૉ. જુલિયસ હિબર્ટ </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
બે સરળ ટૅગ્સ વડે તમારા કોડને સ્ટાઇલમાં બનાવો. જાવાસ્ક્રિપ્ટ દ્વારા હજી વધુ અદ્ભુતતા માટે, Google ની કોડ પ્રીટિફાઈ લાઇબ્રેરીમાં મૂકો અને તમે સેટ થઈ ગયા છો.
કોડ, બ્લોક્સ અથવા ફક્ત સ્નિપેટ્સ ઇનલાઇન, ફક્ત યોગ્ય ટેગમાં લપેટીને શૈલી સાથે પ્રદર્શિત કરી શકાય છે. બહુવિધ રેખાઓ સુધી ફેલાયેલા કોડના બ્લોક્સ માટે, <pre>
તત્વનો ઉપયોગ કરો. ઇનલાઇન કોડ માટે, <code>
તત્વનો ઉપયોગ કરો.
તત્વ | પરિણામ |
---|---|
<code> |
>html< આના જેવા ટેક્સ્ટની લાઇનમાં, તમારો આવરિત કોડ આ તત્વ જેવો દેખાશે . |
<pre> |
<div> <h1>મથાળું</h1> <p>અહીં જ કંઈક...</p> </div> નોંધ: |
<pre class="prettyprint"> |
google-code-prettify લાઇબ્રેરીનો ઉપયોગ કરીને, તમે કોડના બ્લોક્સને થોડી અલગ વિઝ્યુઅલ શૈલી અને સ્વચાલિત સિન્ટેક્સ હાઇલાઇટિંગ મેળવો છો. <div> <h1> મથાળું </h1> <p> અહીં કંઈક... </p> </div> google-code-prettify ડાઉનલોડ કરો અને કેવી રીતે ઉપયોગ કરવો તે માટે રીડમી જુઓ. |
<span class="label">
તમારા બોડી ટેક્સ્ટમાં કોઈપણ શબ્દસમૂહ પર ધ્યાન આપો અથવા ફ્લેગ કરો.
ક્યારેય તે ફેન્સી નવામાંથી એકની જરૂર છે ! કોડ લખતી વખતે અથવા મહત્વપૂર્ણ ફ્લેગ્સ? સારું, હવે તમારી પાસે તે છે. ડિફૉલ્ટ રૂપે શું શામેલ છે તે અહીં છે:
લેબલ | પરિણામ |
---|---|
<span class="label">Default</span> |
ડિફૉલ્ટ |
<span class="label success">New</span> |
નવી |
<span class="label warning">Warning</span> |
ચેતવણી |
<span class="label important">Important</span> |
મહત્વપૂર્ણ |
<span class="label notice">Notice</span> |
નોટિસ |
ઓછી HTML ફૂટપ્રિન્ટ અને ન્યૂનતમ શૈલીઓવાળા પૃષ્ઠો પર વિવિધ કદના થંબનેલ્સ પ્રદર્શિત કરો.
માંના થંબનેલ્સ .media-grid
કોઈપણ કદના હોઈ શકે છે, પરંતુ જ્યારે બિલ્ટ-ઇન બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમમાં સીધા જ મેપ કરવામાં આવે ત્યારે તે શ્રેષ્ઠ કાર્ય કરે છે. .span2
90, 210 અને 330 જેવી છબીની પહોળાઈ , .span4
, અને .span6
કૉલમના કદને સમાન કરવા માટે પેડિંગના થોડા પિક્સેલ સાથે જોડાય છે .
મીડિયા ગ્રીડ વાપરવા માટે સરળ છે અને માર્કઅપ બાજુએ એકદમ સરળ છે. તેમના પરિમાણો સંપૂર્ણપણે સમાવિષ્ટ છબીઓના કદ પર આધારિત છે.
- <ul class = "મીડિયા-ગ્રીડ" >
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
કોષ્ટકો મહાન છે - ઘણી બધી વસ્તુઓ માટે. મહાન કોષ્ટકો, જોકે, ઉપયોગી, માપી શકાય તેવા અને વાંચી શકાય તેવા (કોડ સ્તરે) બનવા માટે થોડો માર્કઅપ પ્રેમની જરૂર છે. મદદ કરવા માટે અહીં કેટલીક ટીપ્સ આપી છે.
હંમેશા તમારા કૉલમ હેડરને <thead>
એવી રીતે લપેટીએ કે વંશવેલો <thead>
> <tr>
> હોય <th>
.
કૉલમ હેડરોની જેમ જ, તમારા કોષ્ટકની બધી મુખ્ય સામગ્રી એકમાં આવરિત હોવી જોઈએ <tbody>
જેથી તમારું વંશવેલો <tbody>
> <tr>
> હોય <td>
.
વાંચનક્ષમતા સુનિશ્ચિત કરવા અને માળખું જાળવવા માટે તમામ કોષ્ટકો ફક્ત આવશ્યક કિનારીઓ સાથે આપમેળે સ્ટાઇલ કરવામાં આવશે. વધારાના વર્ગો અથવા વિશેષતાઓ ઉમેરવાની જરૂર નથી.
# | પ્રથમ નામ | છેલ્લું નામ | ભાષા |
---|---|---|---|
1 | કેટલાક | એક | અંગ્રેજી |
2 | જૉ | છ પેક | અંગ્રેજી |
3 | સ્ટુ | ડેન્ટ | કોડ |
- <ટેબલ>
- ...
- </ ટેબલ>
ઝેબ્રા-સ્ટ્રાઇપિંગ ઉમેરીને તમારા કોષ્ટકો સાથે થોડી ફેન્સી મેળવો—ફક્ત .zebra-striped
વર્ગ ઉમેરો.
# | પ્રથમ નામ | છેલ્લું નામ | ભાષા |
---|---|---|---|
1 | કેટલાક | એક | અંગ્રેજી |
2 | જૉ | છ પેક | અંગ્રેજી |
3 | સ્ટુ | ડેન્ટ | કોડ |
નોંધ: ઝેબ્રા-સ્ટ્રાઇપિંગ એ પ્રગતિશીલ ઉન્નતીકરણ છે જે IE8 અને નીચેના જૂના બ્રાઉઝર માટે ઉપલબ્ધ નથી.
- <ટેબલ વર્ગ = "ઝેબ્રા-પટ્ટાવાળી" >
- ...
- </ ટેબલ>
અગાઉનું ઉદાહરણ લેતા, અમે jQuery અને ટેબલસોર્ટર પ્લગઇન દ્વારા સૉર્ટિંગ કાર્યક્ષમતા પ્રદાન કરીને અમારા કોષ્ટકોની ઉપયોગિતામાં સુધારો કરીએ છીએ. સૉર્ટ બદલવા માટે કોઈપણ કૉલમના હેડરને ક્લિક કરો.
# | પ્રથમ નામ | છેલ્લું નામ | ભાષા |
---|---|---|---|
2 | જૉ | છ પેક | અંગ્રેજી |
3 | સ્ટુ | ડેન્ટ | કોડ |
1 | તમારા | એક | અંગ્રેજી |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <સ્ક્રીપ્ટ >
- $ ( કાર્ય () {
- $ ( "table#sortTableExample" ). ટેબલસોર્ટર ({ સૉર્ટલિસ્ટ : [[ 1 , 0 ]] });
- });
- </script>
- <ટેબલ વર્ગ = "ઝેબ્રા-પટ્ટાવાળી" >
- ...
- </ ટેબલ>
બધા સ્વરૂપોને વાંચી શકાય તેવી અને માપી શકાય તેવી રીતે પ્રસ્તુત કરવા માટે ડિફૉલ્ટ શૈલીઓ આપવામાં આવી છે. ટેક્સ્ટ ઇનપુટ્સ, સિલેક્ટ લિસ્ટ્સ, ટેક્સટેરિયા, રેડિયો બટન્સ અને ચેકબોક્સ અને બટન્સ માટે સ્ટાઇલ આપવામાં આવે છે.
તમારા ફોર્મના HTML માં ઉમેરો .form-stacked
અને તમારી પાસે તેમની ડાબી બાજુને બદલે તેમના ફીલ્ડ્સની ટોચ પર લેબલ્સ હશે. જો તમારા ફોર્મ ટૂંકા હોય અથવા તમારી પાસે ભારે સ્વરૂપો માટે ઇનપુટની બે કૉલમ હોય તો આ સારું કામ કરે છે.
તમારા માર્કઅપમાં માત્ર થોડા વર્ગો ઉમેરીને કોઈપણ ફોર્મ input
, select
અથવા પહોળાઈને કસ્ટમાઇઝ કરો.textarea
v1.3.0 મુજબ, અમે ફોર્મ તત્વો માટે ગ્રીડ-આધારિત કદ બદલવાના વર્ગો ઉમેર્યા છે. કૃપા કરીને હાલના , વગેરે વર્ગો પર આનો ઉપયોગ .mini
કરો .small
.
સંમેલન તરીકે, બટનોનો ઉપયોગ ક્રિયાઓ માટે થાય છે જ્યારે લિંક્સનો ઉપયોગ વસ્તુઓ માટે થાય છે. દાખલા તરીકે, "ડાઉનલોડ" એ એક બટન હોઈ શકે છે અને "તાજેતરની પ્રવૃત્તિ" એક લિંક હોઈ શકે છે.
બધા બટનો આછા ગ્રે શૈલીમાં ડિફોલ્ટ છે, પરંતુ વિવિધ રંગ શૈલીઓ માટે સંખ્યાબંધ કાર્યાત્મક વર્ગો લાગુ કરી શકાય છે. આ વર્ગોમાં વાદળી .primary
વર્ગ, આછો-વાદળી .info
વર્ગ, લીલો .success
વર્ગ અને લાલ .danger
વર્ગનો સમાવેશ થાય છે.
બટન શૈલીઓ લાગુ સાથે કોઈપણ વસ્તુ પર લાગુ કરી શકાય છે .btn
. સામાન્ય રીતે તમે આને ફક્ત <a>
, <button>
, અને પસંદ કરો <input>
ઘટકો પર લાગુ કરવા માંગો છો. તે કેવી રીતે દેખાય છે તે અહીં છે:
ફેન્સી મોટા કે નાના બટનો? તે છે!
એક અથવા બીજા કારણસર એપ દ્વારા સક્રિય ન હોય અથવા અક્ષમ કરેલ હોય તેવા બટનો માટે, અક્ષમ સ્થિતિનો ઉપયોગ કરો. તે .disabled
લિંક્સ અને તત્વો :disabled
માટે છે.<button>
.alert-message
નિષ્ફળતા, સંભવિત નિષ્ફળતા અથવા ક્રિયાની સફળતાને પ્રકાશિત કરવા માટે એક-લાઇન સંદેશાઓ. ફોર્મ માટે ખાસ કરીને ઉપયોગી.
- <div class = "ચેતવણી-સંદેશ ચેતવણી" >
- <a class = "close" href = "#" > × </a>
- <p><strong> પવિત્ર ગુઆકામોલ! </strong> તમે તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે વધુ સારા દેખાતા ન��ી. </p>
- </div>
.alert-message.block-message
સંદેશાઓ માટે કે જેને થોડી સમજૂતીની જરૂર હોય, અમારી પાસે ફકરા શૈલી ચેતવણીઓ છે. આ લાંબા સમય સુધી ભૂલ સંદેશાઓને બબલિંગ કરવા માટે, વપરાશકર્તાને બાકી ક્રિયા વિશે ચેતવણી આપવા માટે અથવા ફક્ત પૃષ્ઠ પર વધુ ભાર આપવા માટે માહિતી પ્રસ્તુત કરવા માટે યોગ્ય છે.
- <div class = "alert-message block-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> પવિત્ર ગુઆકામોલ! આ એક ચેતવણી છે! </strong> તમે તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે વધુ સારા દેખાતા નથી. નુલ્લા વિટાએ એલિટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "ચેતવણી-ક્રિયાઓ" >
- <a class = "btn small" href = "#" > આ પગલાં લો </a> <a class = "btn small" href = "#" > અથવા આ કરો </a>
- </div>
- </div>
મોડલ્સ—સંવાદો અથવા લાઇટબૉક્સ—પશ્ચાદભૂનો સંદર્ભ જાળવવો મહત્વપૂર્ણ હોય તેવી પરિસ્થિતિઓમાં સંદર્ભાત્મક ક્રિયાઓ માટે ઉત્તમ છે.
એક સુંદર શરીર…
મૂંઝવણમાં મૂકાયેલા વપરાશકર્તાને મદદ કરવા અને તેમને યોગ્ય દિશામાં નિર્દેશ કરવા માટે ટ્વિપ્સી ખૂબ જ ઉપયોગી છે.
Lorem ipsum dolar sit amet illo error ipsum veritatis ut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae fugit fugit accusantium totam totam acusantium
લેઆઉટને અસર કર્યા વિના પૃષ્ઠને સબટેક્સ્ટ્યુઅલ માહિતી પ્રદાન કરવા માટે પોપોવર્સનો ઉપયોગ કરો.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. મોરબી લીઓ રીસસ, પોર્ટા એસી કોન્સેકટુર એસી, વેસ્ટીબુલમ એટ ઇરોસ.
બુટસ્ટ્રેપ લાઇબ્રેરી સાથે જાવાસ્ક્રિપ્ટને એકીકૃત કરવું ખૂબ સરળ છે. નીચે અમે મૂળભૂત બાબતો પર જઈએ છીએ અને તમને પ્રારંભ કરવા માટે કેટલાક અદ્ભુત પ્લગિન્સ પ્રદાન કરીએ છીએ!
jQuery અને Ender સાથે કામ કરતા નવા કસ્ટમ પ્લગઈનો સાથે બુટસ્ટ્રેપના કેટલાક પ્રાથમિક ઘટકોને જીવંત બનાવો . અમે તમને તમારી ચોક્કસ વિકાસ જરૂરિયાતોને અનુરૂપ થવા માટે તેમને વિસ્તારવા અને સંશોધિત કરવા પ્રોત્સાહિત કરીએ છીએ.
ફાઈલ | વર્ણન |
---|---|
bootstrap-modal.js | અમારું મોડલ પ્લગઇન પરંપરાગત મોડલ જેએસ પ્લગઇન પર એક સુપર સ્લિમ ટેક છે! અમે twitter પર જોઈતી માત્ર એકદમ કાર્યક્ષમતા સમાવવા માટે ખાસ કાળજી લીધી. |
bootstrap-alerts.js | ચેતવણી પ્લગઇન એ ચેતવણીઓમાં નજીકની કાર્યક્ષમતા ઉમેરવા માટે એક સુપર નાનો વર્ગ છે. |
bootstrap-dropdown.js | આ પ્લગઇન બુટસ્ટ્રેપ ટોપબાર અથવા ટેબ કરેલ નેવિગેશનમાં ડ્રોપડાઉન ક્રિયાપ્રતિક્રિયા ઉમેરવા માટે છે. |
bootstrap-scrollspy.js | સ્ક્રોલસ્પાય પ્લગઇન બુટસ્ટ્રેપ ટોપબારમાં સ્ક્રોલ સ્થિતિના આધારે ઓટો અપડેટિંગ એનએવી ઉમેરવા માટે છે. |
bootstrap-tabs.js | આ પ્લગઇન સ્થાનિક સામગ્રી દ્વારા સાયકલ ચલાવવા માટે ઝડપી, ગતિશીલ ટેબ અને ગોળી કાર્યક્ષમતા ઉમેરે છે. |
bootstrap-twipsy.js | જેસન ફ્રેમ દ્વારા લખાયેલ ઉત્તમ jQuery.tipsy પ્લગઇન પર આધારિત; twipsy એ અપડેટેડ વર્ઝન છે, જે ઈમેજીસ પર આધાર રાખતું નથી, એનિમેશન માટે css3 અને લોકલ શીર્ષક સ્ટોરેજ માટે ડેટા-એટ્રીબ્યુટનો ઉપયોગ કરે છે! |
bootstrap-popover.js | પોપઓવર પ્લગઈન તમારી એપ્લિકેશનમાં પોપઓવર ઉમેરવા માટે એક સરળ ઈન્ટરફેસ પૂરું પાડે છે. તે boostrap-twipsy.js પ્લગઇનને વિસ્તૃત કરે છે, તેથી તમારા પ્રોજેક્ટમાં પોપોવર્સનો સમાવેશ કરતી વખતે તે ફાઇલને પણ પડાવી લેવાની ખાતરી કરો! |
ના! બુટસ્ટ્રેપને CSS લાઇબ્રેરી બનાવવા માટે સૌથી પહેલા અને અગ્રણી ડિઝાઇન કરવામાં આવી છે. આ જાવાસ્ક્રિપ્ટ શામેલ શૈલીઓની ટોચ પર મૂળભૂત ઇન્ટરેક્ટિવ સ્તર પ્રદાન કરે છે.
જો કે, જેમને જાવાસ્ક્રિપ્ટની જરૂર છે તેમના માટે, અમે તમને જાવાસ્ક્રિપ્ટ સાથે બુટસ્ટ્રેપને કેવી રીતે એકીકૃત કરવું તે સમજવામાં મદદ કરવા અને તમને મૂળભૂત કાર્યક્ષમતા માટે તરત જ ઝડપી, હળવા વિકલ્પ આપવા માટે ઉપરના પ્લગઇન્સ પ્રદાન કર્યા છે.
વધુ માહિતી માટે અને કેટલાક લાઇવ ડેમો જોવા માટે, કૃપા કરીને અમારા પ્લગઇન દસ્તાવેજીકરણ પૃષ્ઠનો સંદર્ભ લો .
બુટસ્ટ્રેપ પ્રીબૂટ સાથે બનાવવામાં આવ્યું હતું, જે ઝડપી અને સરળ વેબ ડેવલપમેન્ટ માટે સીએસએસ પ્રીપ્રોસેસર, Less સાથે જોડાણમાં ઉપયોગમાં લેવા માટે મિક્સિન્સ અને ચલોનો ઓપન-સોર્સ પેક છે .
અમે બુટસ્ટ્રેપમાં પ્રીબૂટનો ઉપયોગ કેવી રીતે કર્યો તે તપાસો અને જો તમે તમારા આગલા પ્રોજેક્ટ પર ઓછું ચલાવવાનું પસંદ કરો તો તમે તેનો ઉપયોગ કેવી રીતે કરી શકો છો.
તમારા બ્રાઉઝરમાં જાવાસ્ક્રિપ્ટ દ્વારા બુટસ્ટ્રેપના ઓછા વેરિયેબલ્સ, મિક્સિન્સ અને CSSમાં નેસ્ટિંગનો સંપૂર્ણ ઉપયોગ કરવા માટે આ વિકલ્પનો ઉપયોગ કરો.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" મીડિયા = "બધા" />
- <script src = "js/less-1.1.3.min.js" ></script>
.js ઉકેલ નથી લાગતું? લેસ મેક એપ્લિકેશન અજમાવો અથવા જ્યારે તમે તમારો કોડ જમાવશો ત્યારે કમ્પાઇલ કરવા માટે Node.js નો ઉપયોગ કરો.
બુટસ્ટ્રેપના ભાગ રૂપે Twitter બુટસ્ટ્રેપમાં શું સમાવવામાં આવ્યું છે તેની કેટલીક હાઇલાઇટ્સ અહીં છે. ડાઉનલોડ કરવા અને વધુ જાણવા માટે બુટસ્ટ્રેપ વેબસાઇટ અથવા ગીથબ પ્રોજેક્ટ પૃષ્ઠ પર જાઓ.
ઓછા માં વેરિયેબલ્સ તમારા CSS માથાનો દુખાવો મુક્ત જાળવવા અને અપડેટ કરવા માટે યોગ્ય છે. જ્યારે તમે રંગ મૂલ્ય અથવા વારંવાર ઉપયોગમાં લેવાતા મૂલ્યને બદલવા માંગતા હો, ત્યારે તેને એક જગ્યાએ અપડેટ કરો અને તમે સેટ થઈ ગયા છો.
- // લિંક્સ
- @linkColor : #8b59c2;
- @linkColorHover : ઘાટો ( @linkColor , 10 );
- // ગ્રે
- @બ્લેક : #000;
- @ગ્રેડાર્ક : આછું ( @બ્લેક , 25 %);
- @ગ્રે : આછું ( @કાળો , 50 %);
- @ગ્રેલાઇટ : આછું ( @બ્લેક , 70 %);
- @ગ્રેલાઈટર : આછું ( @બ્લેક , 90 %);
- @સફેદ : #ffff ;
- // ઉચ્ચાર રંગો
- @blue : #08b5fb;
- @ગ્રીન : #46a546 ;
- @લાલ : #9d261d ;
- @પીળો : #ffc40d ;
- @ઓરેન્જ : #f89406 ;
- @pink : #c3325f;
- @જાંબલી : #7a43b6 ;
- // બેઝલાઇન ગ્રીડ
- @basefont : 13px ;
- @બેઝલાઇન : 18px ;
/* ... */
સીએસએસના સામાન્ય વાક્યરચના ઉપરાંત ઓછી ટિપ્પણી કરવાની બીજી શૈલી પણ પ્રદાન કરે છે .
- // આ એક ટિપ્પણી છે
- /* આ પણ એક ટિપ્પણી છે */
મિક્સિન્સ મૂળભૂત રીતે CSS માટે સમાવિષ્ટ અથવા આંશિક છે, જે તમને કોડના બ્લોકને એકમાં જોડવાની મંજૂરી આપે છે. તેઓ વિક્રેતા પ્રીફિક્સ પ્રોપર્ટીઝ જેમ કે box-shadow
, ક્રોસ-બ્રાઉઝર ગ્રેડિએન્ટ્સ, ફોન્ટ સ્ટેક્સ અને વધુ માટે ઉત્તમ છે. નીચે બૂટસ્ટ્રેપ સાથે સમાવિષ્ટ મિક્સિન્સનો નમૂનો છે.
- #ફોન્ટ {
- . લઘુલિપિ ( @વજન : સામાન્ય , @ કદ : 14px , @લાઇન ઊંચાઈ : 20px ) {
- ફોન્ટ માપ : @size ; _
- ફોન્ટ - વજન : @weight ;
- રેખા - ઊંચાઈ : @lineHeight ;
- }
- . સાન્સ - સેરીફ ( @વજન : સામાન્ય , @ કદ : 14px , @લાઇન ઊંચાઈ : 20px ) {
- ફોન્ટ - કુટુંબ : "હેલ્વેટિકા ન્યુ" , હેલ્વેટિકા , એરિયલ , સેન્સ - સેરીફ ;
- ફોન્ટ માપ : @size ; _
- ફોન્ટ - વજન : @weight ;
- રેખા - ઊંચાઈ : @lineHeight ;
- }
- ...
- }
- #ગ્રેડિયન્ટ {
- ...
- . વર્ટિકલ ( @startColor : #555, @endColor: #333) {
- પૃષ્ઠભૂમિ - રંગ : @endColor ;
- પૃષ્ઠભૂમિ - પુનરાવર્તન : પુનરાવર્તન - x ;
- પૃષ્ઠભૂમિ - છબી : - khtml - ઢાળ ( રેખીય , ડાબી ટોચ , ડાબી નીચે , ( @startColor ) થી ( @endColor ) સુધી ); // કોન્કરર
- પૃષ્ઠભૂમિ - છબી : - moz - રેખીય - ઢાળ ( @startColor , @endColor ); // FF 3.6+
- પૃષ્ઠભૂમિ - છબી : - ms - રેખીય - ઢાળ ( @startColor , @endColor ); // IE10
- પૃષ્ઠભૂમિ - છબી : - વેબકિટ - ઢાળ ( રેખીય , ડાબી ટોચ , ડાબી નીચે , રંગ - સ્ટોપ ( 0 % , @startColor ), રંગ - સ્ટોપ ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- પૃષ્ઠભૂમિ - છબી : - વેબકિટ - રેખીય - ઢાળ ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- પૃષ્ઠભૂમિ - છબી : - o - રેખીય - ઢાળ ( @startColor , @endColor ); // ઓપેરા 11.10
- પૃષ્ઠભૂમિ - છબી : રેખીય - ઢાળ ( @startColor , @endColor ); // ધોરણ
- }
- ...
- }
ફેન્સી મેળવો અને નીચેની જેમ લવચીક અને શક્તિશાળી મિશ્રણ જનરેટ કરવા માટે થોડું ગણિત કરો.
- // ગ્રિડ્યુડ
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // કેટલીક કૉલમ બનાવો
- . કૉલમ ( @columnSpan : 1 ) {
- પહોળાઈ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
/lib/ માં ફાઈલોને સંશોધિત કર્યા પછી .less
, તમારે તેમને ફરીથી કમ્પાઈલ કરવાની જરૂર પડશે જેથી bootstrap-*xx.css અને bootstrap-*xx.min.css ફાઈલો પુનઃજીવિત થઈ શકે. જો તમે GitHub પર પુલ વિનંતી સબમિટ કરી રહ્યાં છો, તો તમારે હંમેશા ફરીથી કમ્પાઇલ કરવું આવશ્યક છે.
પદ્ધતિ | પગલાં |
---|---|
મેકફાઇલ સાથે નોડ | નીચેનો આદેશ ચલાવીને npm સાથે ઓછી કમાન્ડ લાઇન કમ્પાઇલર ઇન્સ્ટોલ કરો: $ npm install lessc એકવાર ઇન્સ્ટોલ થઈ ગયા પછી ફક્ત વધારામાં, જો તમારી પાસે વોચર ઇન્સ્ટોલ કરેલ હોય, તો તમે |
જાવાસ્ક્રિપ્ટ | નવીનતમ Less.js ડાઉનલોડ કરો અને તેમાં તેનો પાથ (અને બુટસ્ટ્રેપ) શામેલ કરો
.less ફાઇલોને ફરીથી કમ્પાઇલ કરવા માટે, ફક્ત તેમને સાચવો અને તમારું પૃષ્ઠ ફરીથી લોડ કરો. Less.js તેમને કમ્પાઇલ કરે છે અને સ્થાનિક સ્ટોરેજમાં સ્ટોર કરે છે. |
આદેશ વાક્ય | જો તમારી પાસે પહેલેથી જ ઓછું કમાન્ડ લાઇન ટૂલ ઇન્સ્ટોલ કરેલું છે, તો ફક્ત નીચેનો આદેશ ચલાવો: $lessc ./lib/bootstrap.less > bootstrap.css
|
ઓછી મેક એપ્લિકેશન | બિનસત્તાવાર Mac એપ્લિકેશન .less ફાઇલોની ડિરેક્ટરીઓ જુએ છે અને જોયેલી .less ફાઇલના દરેક સેવ પછી કોડને સ્થાનિક ફાઇલોમાં કમ્પાઇલ કરે છે. જો તમે ઇચ્છો, તો તમે એપમાં ઓટોમેટિક મિનિફાઇંગ માટે પસંદગીઓને ટૉગલ કરી શકો છો અને કમ્પાઇલ કરેલી ફાઇલો કઈ ડિરેક્ટરીમાં સમાપ્ત થાય છે. |