Tusaalooyinka bilawga degdega ah

Ma u baahan tahay naqshado degdeg ah? Fiiri tusaalayaashan aasaasiga ah ee aan isla meeldhignay:

Shabakadda asalka ah

Nidaamka shabagga caadiga ah ee lagu bixiyo qayb ka mid ah Bootstrap waa 940px ballaaran oo 16-column ah. Waa dhadhan habka caanka ah ee 960, laakiin iyada oo aan lahayn margin/padding dheeraad ah ee dhinaca bidix iyo midig.

Tusaalaha calaamadaynta grid

Sida halkan ku cad, qaabayn aasaasi ah ayaa lagu abuuri karaa laba "tiir", mid kastaa wuxuu ka kooban yahay tiro ka mid ah 16-ka tiir ee aasaasiga ah ee aan ku qeexnay qayb ka mid ah nidaamkayaga qulqulka. Kala duwanaansho badan ka eeg tusaalayaasha hoose.

<div class = " saf" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Tiirarka buulka

Nool macluumaadkaaga haddii ay tahay inaad abuurto .rowtiir jira gudahooda.

Tusaalaha tiirarka buulka leh

<div class = " saf" > 
  <div class = "span12" > 
    Heerka 1 ee tiirka
    <div class = " saf" > 
      <div class = "span6" > 
        Heerka 2
      </div>
      <div class = "span6" > 
        Heerka 2
      </div>
    </div>
  </div>
</div>

Is rogi shabkada adiga kuu gaar ah

Lagu dhisay Bootstrap waa doorsoomayaal faro badan oo loogu talagalay habaynta nidaamka grid 940px ee caadiga ah. Waxoogaa habayn ah, waxaad wax ka beddeli kartaa cabbirka tiirarka, godadkooda, iyo weelka ay ku nool yihiin.

Gudaha xabagta

Doorsoomayaasha loo baahan yahay si wax looga beddelo nidaamka grid-ka hadda dhammaan waxay ku nool yihiin variables.less.

Hadda si loo habeeyo

Wax ka beddelka shabkada macneheedu waa beddelka saddexda @grid-*doorsoome iyo dib-u-ururinta faylalka Yaryar.

Bootstrap wuxuu ku yimaadaa qalabaysan si uu u maareeyo nidaamka grid oo leh ilaa 24 tiir; default waa kaliya 16. Waa kan sida doorsoomayaasha shabakadu u ekaan lahaayeen kuwo loo habeeyey si ay u noqdaan 24-column.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Marka dib la isu keeno, waa lagu dejin doonaa!

Qaab go'an

Qaabka caadiga ah oo fudud ee 940px-ballaaran, qaabaynta xuddun u ah kaliya degel kasta ama bog uu bixiyo hal <div.container>.

<jir>
  <div class = "konteenar" > 
    ...
  </div>
</body>

Qaabka dareeraha

Beddel, qaab dhismeedka dareeraha dabacsan oo leh min-iyo ugu badan ballac iyo bar dhinaca bidix ah. Ku fiican apps iyo dukumentiyada.

<jir>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Ciwaanka & koobiga

Heerarka qoraalka caadiga ah ee qaabaynta boggaga internetka.

@basefontIsku-xidhka qoraalka oo dhan wuxuu ku salaysan yahay laba doorsoomayaal ka yar doorsoomayaalkeenna @baseline. Midka koowaad waa cabbirka font-saldhigga ee la isticmaalo oo dhan kan labaadna waa dhererka xarriiqda saldhigga.

Waxaan isticmaalnaa doorsoomayaashaas, iyo xisaabta qaar, si aan u abuurno xad-dhaafka, suufka, iyo dhererka-line ee dhammaan noocyadayada iyo in ka badan.

h1. Ciwaanka 1

h2. Ciwaanka 2

h3. Ciwaanka 3

h4. Ciwaanka 4

h5. Ciwaanka 5

h6. Ciwaanka 6

Tusaalaha cutubka

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Tusaalaha ciwaanka waxa uu leeyahay ciwaan hoose...

Kala duwan curiyayaasha

Isticmaalka xoojinta, ciwaannada, & soo gaabinta

<strong> <em> <address> <abbr>

Marka la isticmaalo

Calaamadaha xoogga la saarayo ( <strong>iyo <em>) waa in loo adeegsadaa si loo muujiyo muhiimad dheeri ah ama xooga la saarayo kelmad ama weedh marka loo eego koobiga ku xeeran. U isticmaal muhiimada <strong>iyo xooga saarista.<em>

Xooga saarida cutubka

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Fiiro gaar ah: Weli waa caadi in HTML5 lagu isticmaalo <b>oo <i>lagu calaamadiyo mana aha in loo qaabeeyo geesinimo iyo fartaag, siday u kala horreeyaan (inkasta oo haddii ay jirto qayb semantic dheeraad ah, isticmaal). <b>waxaa loola jeedaa in lagu muujiyo ereyada ama odhaahyada iyada oo aan la gudbin muhiimad dheeraad ah, halka <i>inta badan loogu talagalay cod, ereyo farsamo, iwm.

Cinwaanada

Cunsurka <address>waxaa loo isticmaalaa macluumaadka xiriirka ee awoowaha ugu dhow, ama dhammaan jirka shaqada. Halkan waxaa ah laba tusaale oo ku saabsan sida loo isticmaali karo:

Fiiro gaar ah: Xariiq kasta oo ku dhex jira <address>waa in uu ku dhamaadaa xariiq jebin ( <br />) ama lagu duuduubo summada heerka block (tusaale, <p>) si si habboon loogu habeeyo waxa ku jira.

Soo gaabinta

Soo gaabinta iyo gaabinnada, isticmaal <abbr>summada ( <acronym>waxaa laga saaray HTML5 ). Geli foomka gacanta gaaban gudaha summada oo u deji cinwaan magaca oo dhammaystiran.

Xigashooyinka

<blockquote> <p> <small>

Sida loo soo xigtay

Si loogu daro blockquote, <blockquote>ku duub <p>oo <small>tag Isticmaal <small>walxaha si aad u sheegtid ishaada oo waxaad heli doontaa em dash —ka hor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Aan la dalban<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Aan habayn<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Dalbaday<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Sharaxaadadl

Liiska sharraxaadda

Liiska sharraxaadda ayaa ku habboon qeexida ereyada.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id un mi porta gravida iyo eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Koodhka

<code> <pre>

Ku dheji koodka qaab ahaan laba sumadood oo fudud. Si aad u hesho wacnaan dheeraad ah iyada oo loo marayo Javascript, ku rid koodka Google ee maktabadda qurxoon oo waad dejisay.

Soo bandhigida koodka

Koodhka, baloogyada ama qayb yar oo khadka ah, ayaa lagu soo bandhigi karaa qaab kaliya iyadoo lagu duuduubo summada saxda ah. Si aad u heshid baloogyada koodka ee kala qaybinaya khadadka badan, isticmaal <pre>curiyaha. Koodhka gudaha, isticmaal <code>curiyaha.

<div>
  <h1>ciwaanka</h1>
  <p>Wax halkan jooga...</p>
</div>

<div> <h1> Ciwaanka </h1> <p> Wax halkan jooga... </p> </div>
  
  

Calaamadaha khadka

<span class="label">

U wac dareenka ama calaamadee weedh kasta oo qoraalka jidhkaaga ah.

Calaamadee wax kasta

Weligaa u baahday mid ka mid ah kuwa cusub ee quruxda badan ! ama calamada muhiimka ah marka kood la qorayo? Hagaag, hadda waad haysataa. Waa kuwan waxa ku jira sida caadiga ah:

Shabakadda warbaahinta

Ku muuji sawir-gacmeedyo cabbirro kala duwan leh oo ku yaal bogag leh raad HTML hooseeya iyo qaababka ugu yar.

Tusaalaha sawirka thumbnails

Sawir-gacmeedka ku yaala xuubka .media-gridwuxuu noqon karaa cabbir kasta, laakiin waxay si fiican u shaqeeyaan marka si toos ah loogu dhejiyo nidaamka isku-xidhka Bootstrap ee ku dhex jira. Ballaararka sawirka sida 90, 210, iyo 330 waxay ku daraan dhowr pixels oo suuf ah si ay u siman yihiin cabbirrada tiirarka .span2, .span4, iyo tiirka..span6

Weyn

Dhexdhexaad

Yar

Codaynta iyaga

Shabaqyada warbaahintu way fududahay in la isticmaalo oo waxay fudud yihiin dhinaca calaamadaynta. Cabbirkoodu waxa uu ku salaysan yahay cabbirka sawirada lagu soo daray.

<ul class = "media-grid" > 
  <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>

Miisaska dhismaha

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Miisaska ayaa ku fiican - waxyaabo badan. Miisaska waaweyn, si kastaba ha ahaatee, waxay u baahan yihiin xoogaa jacayl ah si ay u noqdaan kuwo faa'iido leh, la cabbiri karo, oo la akhriyi karo (heerka koodhka). Halkan waxaa ah dhowr tilmaamood oo lagu caawinayo.

Had iyo jeer ku duub madaxyada tiirkaaga si <thead>ay u kala sarreyso <thead>> <tr>> <th>.

Si la mid ah madaxyada tiirarka, dhammaan waxyaabaha ku jira miiskaaga waa in lagu duuduubaa <tbody>si kala sareyntaadu u noqoto <tbody>> <tr>> <td>.

Tusaale: Qaababka miiska caadiga ah

Miisaska oo dhan si toos ah ayaa loo qaabayn doonaa iyada oo leh kaliya xuduudaha muhiimka ah si loo hubiyo in la akhriyi karo oo loo ilaaliyo qaabdhismeedka. Looma baahna in lagu daro fasalo ama astaamo dheeri ah.

<miiska>
  ...
</miiska>

Tusaale: Miis cufan

Miisaska u baahan xog badan oo ku yaal meelo cidhiidhi ah, isticmaal dhadhanka cufan ee gooya suufka kala badh. Waxa kale oo loo isticmaali karaa iyada oo la socota xudduudaha iyo xariijimaha zebra, sida qaababka miiska caadiga ah.

Tusaale: Miis xuduudeed

Ka dhig miisaskaagu inay u muuqdaan kuwo qurux badan adiga oo geesahooda isku rogaya oo ku dara xuduudaha dhinacyada oo dhan.

< class class = "bordered-table" > 
  ...
</miiska>

Tusaale: Zebra-xariif ah

Wax yar ka hel miisaskaada adigoo ku daraya zebra-striping-kaliya ku dar .zebra-stripedfasalka.

Fiiro gaar ah: Zebra-striping waa kobcin horumarsan oo aan diyaar u ahayn daalacashada duugga ah sida IE8 iyo wixii ka hooseeya.

< class class = "zebra-stripped" > 
  ...
</miiska>

Tusaale: Zebra-xariif ah w/ TableSorter.js

Qaadashada tusaalihii hore, waxaan wanaajinaa faa'iidada miisaskayada annagoo siinaya kala soocida shaqeynta jQuery iyo plugin Tablesorter . Guji madaxa tiir kasta si aad u beddesho nooca

<script src = "js/jquery/jquery.tablesorter.min.js" >> script> 
<script > 
  $ ( shaqada () { 
    $ ( "miiska # kala-soocida Tusaalaha " ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  }
</script>
< class class = "zebra-stripped" > 
  ...
</miiska>

Qaababka asalka ah

Dhammaan foomamka waxaa lasiiyaa qaabab aan fiicneyn si ay ugu soo bandhigaan si la akhriyi karo oo la cabbiri karo. Qaababka waxaa loo bixiyaa gelinta qoraalka, liiska xulashada, meelaha qoraalka, badhamada raadiyaha iyo sanduuqyada hubinta, iyo badhamada.

Foomamka is dulsaaran

Ku dar .form-stackedHTML foomkaaga oo waxaad yeelan doontaa calaamado korka beerahooda halkii aad bidixda ka ahaan lahayd. Tani waxay si weyn u shaqeysaa haddii foomamkaagu ay gaaban yihiin ama aad leedahay laba tiir oo agabka foomamka culus.

Foomka cabbirrada goobta

Habbee foom kasta input, select, ama textareaballac adiga oo ku dara dhawr fasal oo kaliya calaamadayntaada.

Laga bilaabo v1.3.0, waxaanu ku darnay fasalada cabirka ku salaysan grid ee walxaha qaabaysan. Fadlan kuwan u isticmaal fasallada jira .mini, .smalliwm.

Badhamada

Caadi ahaan, badhamada waxaa loo isticmaalaa ficilada halka xiriirinta loo isticmaalo walxaha. Tusaale ahaan, "Download" waxay noqon kartaa badhan iyo "waxqabadyadii dhawaa" waxay noqon kartaa xiriiriye.

Dhammaan badhamada waxay ku habboon yihiin qaab cawl khafiif ah, laakiin tiro ka mid ah fasallada shaqaynta ayaa lagu dabaqi karaa qaabab midab kala duwan. Fasaladaan waxaa ka mid ah .primaryfasalka buluuga ah, fasalka buluug khafiifka ah .info, fasalka cagaaran .success, iyo fasalka cas .danger.

Tusaalooyinka badhamada

Hababka badhanka waxaa lagu dabaqi karaa wax kasta oo la .btndabaqay. Caadi ahaan waxaad u baahan doontaa inaad kuwan ku dabaqdo oo keliya <a>, <button>oo dooro <input>curiyeyaasha. Waa kan sida ay u egtahay:

Cabbirrada kale

Ma jeceshahay badhamada waaweyn ama ka yar? Qabo!

Gobolka naafada

Badhamada aan shaqaynayn ama uu curyaamiyay abka hal sabab ama mid kale, isticmaal gobolka naafada ah. Taas waxaa loogu talagalay .disabledisku xirka iyo curiyeyaasha.:disabled<button>

Xiriirinta

Badhamada

Waa maxay

Barkeena sare waa baar go'an oo leh astaanta ama magaca degelka, navigation hoose, iyo foomka raadinta.

La beddeli karo

Dhammaan walxaha ku jira, iyo guud ahaan bar-sare sidoo kale, waa ikhtiyaari. Waxaad dooran kartaa inaad ku darto calaamad/magac, nav, goobitaan, iyo nav sare-ama mid kasta oo taas la mid ah.

Hoos u dhaca waxaa ka mid ahaa

Iyada oo qayb ka ah hagidda ugu weyn, waxaan ku soo darnay awoodda aad ku dari karto hoos u dhigista navkaaga. Fiiri qaybta sare ee sare (midig toosan) si aad u aragto sida loo sameeyay. Dhibcaha litags sidoo kale waxay taageerayaan .activemuujinta xulashada bogga hadda.

Tabs iyo kaniiniyo

Ku samee navigation sare fudud oo leh a <ul>. Isku beddesho tabs ama kaniiniyada adiga oo ku daraya fasalka ku habboon.

Ku fiican qaybaha hoose ee macluumaadka sida boggaga dejinta akoonnadayada iyo wakhtiyada isticmaalayaasha ee u dhexeeya boggaga waxyaabaha la midka ah. Lagu heli karo qaababka tabbed ama kaniiniga.

Tusaalaha tabs ee aasaasiga ah

Tabs-ka waxa loo isticmaali karaa hagitaan joogto ah (ku shubidda bogag dibadeed oo isla tab ah) ama meelaha nuxurka leh ee la isku dhaafsado muraayadaha nuxurka. Waxaan leenahay tabs plugin oo loo isticmaali karo in lagu dhex daro kuwa dambe.

• Guriga
• Profile
• Fariimaha
• Dejinta
• Xiriir
• Hoos u dhigid
  • Isku xirka sare
  • Wax kale halkan
  • Xiriir kale

<ul class = "tabs" > 
  <li class = "firfircoon" ><a href = "#" > Guriga </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Farriimaha </a></li> 
  <li><a href = "#" > Dejinta </a></li> 
  <li><a href = "#" > La xidhiidh </a></li> 
</ul>

Tusaale ahaan kaniiniyada aasaasiga ah

• Guriga
• Profile
• Fariimaha
• Dejinta
• Xiriir

<ul class = "kiniiniyada" > 
  <li class = "firfircoon" ><a href = "#" > Guriga </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Farriimaha </a></li> 
  <li><a href = "#" > Dejinta </a></li> 
  <li><a href = "#" > La xidhiidh </a></li> 
</ul>

Burburka rootiga

Burburinta rootiga waxaa loo istcimaalaa si loo tuso isticmaalayaasha halka ay ku dhex jiraan abka ama goobta, laakiin looma isticmaalo marinka aasaasiga ah.

• Guriga

• Guriga /
• Bogga dhexe

• Guriga /
• Bogga dhexe /
• Mid kale

• Guriga /
• Bogga dhexe /
• Mid kale /
• halkan ayaad joogtaa

<ul class = "Qalabka rootiga" > 
  <li><a href = "#" > Guriga </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Bogga dhexe </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Mid kale </a> <span class = "qaybiye" > / </span></li>   
  <li class = "firfircoon" > Waxaad joogtaa halkan </li> 
</ul>

Pagination

aadka u fudud oo qaab yar u qaabaysan bogga Rdio. Baloogga weyni way adag tahay in la waayo, si fudud ayaa loo miisaami karaa, wuxuuna bixiyaa meelo badan oo gujis ah.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Hore </a></li>  
    <li class = "firfircoon" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Xiga → </a></li>  
  </ul>
</div>

Digniinaha aasaasiga ah

.alert-message

Fariimo hal sadar ah oo loogu talagalay muujinta guul-darrada, guul-darrida suurtagalka ah, ama guusha ficilka. Gaar ahaan faa'iido u leh foomamka.

Hel javascript-ka

Koodhka tusaale

<div class = "digniinta fariinta digniinta" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole Qudduuska ah! </strong> Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan. </p>
</div>

Jooji fariimaha

.alert-message.block-message

Farriimaha u baahan sharraxaad yar, waxaan haynaa digniinaha qaabka cutubka. Kuwani waxay ku fiican yihiin buunbuuninta farriimaha khaldan ee dheer, uga digaya isticmaalaha ficil la sugayo, ama kaliya soo bandhigida macluumaadka si xooga loo saaro bogga.

Hel javascript-ka

Koodhka tusaale

<div class = "digniinta-farriimaha xannibaadda digniinta" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole Qudduuska ah! Tani waa digniin! </strong> Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan. Nulla vitae elit libero, a pharetra augue. Preesent commodo cursus magna, vel selerisque nisl consectetur et. </p>
  <div class = "xaq-qabeed" > 
    <a class = "btn small" href = "#" > Tallaabadan qaado </a> <a class = "btn small" href = "#" > Ama tan samee </a>     
  </div>
</div>

Hababka

Hababka — wada-hadallada ama sanduuqyada iftiinka - waxay ku fiican yihiin ficillada macnaha guud ee xaaladaha ay muhiim tahay in macnaha asalka ah la ilaaliyo.

Hel javascript-ka

Tilmaamaha Qalabka

Twipsies aad bay faa'iido ugu leedahay caawinta isticmaale wareersan oo u tilmaama jihada saxda ah.

Hel javascript-ka

Popovers

Isticmaal popovers si aad u siiso macluumaadka qoraal-hoosaad bogga adiga oo aan saameyn ku yeelan qaabka.

Hel javascript-ka

Bilaabayaa

Isku-dhafka Javascript iyo maktabadda Bootstrap waa mid aad u fudud. Hoos waxaan ka gudubnay aasaaska waxaanan ku siineynaa qaar ka mid ah plugins cajiib ah si aad u bilowdo!

Eeg dukumentiyada Javascript »

Maxaa ka mid ah

Keen qaar ka mid ah qaybaha aasaasiga ah ee Bootstrap nolosha iyaga oo wata qalab cusub oo caado u ah kuwaas oo la shaqeeya jQuery iyo Ender . Waxaan kugu dhiirigelinaynaa inaad kordhiso oo aad wax ka beddesho si ay ugu habboonaadaan baahiyahaaga horumarineed ee gaarka ah.

Javascript ma lagama maarmaan baa?

Maya! Bootstrap waxaa marka hore loogu talagalay inay noqoto maktabad CSS ah. Javascript-kani waxa uu bixiyaa lakab is-dhexgal oo aasaasi ah oo ka sarreeya qaababka lagu soo daray.

Si kastaba ha ahaatee, kuwa u baahan Javascript, waxaanu siinay plugins-yada kor ku xusan si ay kaaga caawiyaan inaad fahamto sida loogu daro Bootstrap javascript iyo inuu ku siiyo dhakhso, doorasho miisaan fudud oo ah shaqeynta aasaasiga ah isla markiiba.

Wixii macluumaad dheeraad ah iyo si aad u aragto qaar ka mid ah bandhigyada tooska ah, fadlan tixraac boggayaga dukumeentiyada plugin .