Misalai masu saurin farawa

Kuna buƙatar samfuri masu sauri? Duba waɗannan misalai na asali da muka haɗa tare:

Tsohuwar grid

Tsohuwar tsarin grid da aka bayar azaman ɓangare na Bootstrap shine grid mai faɗin 940px 16. Yana da ɗanɗano na mashahurin tsarin grid 960, amma ba tare da ƙarin gefe/padding a gefen hagu da dama ba.

Misali alamar grid

Kamar yadda aka nuna a nan, za a iya ƙirƙira wani tsari na asali tare da "ginshiƙai" guda biyu, kowanne ya faɗi adadin ginshiƙai 16 da muka ayyana a matsayin wani ɓangare na tsarin grid ɗin mu. Dubi misalan da ke ƙasa don ƙarin bambancin.

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

ginshiƙan gida

Nesa abun cikin ku idan dole ne ku ƙirƙira .rowa cikin ginshiƙi mai wanzuwa.

Misali na ginshiƙai

<div class = "jere" > 
  <div class = "span12" > 
    Mataki na 1 na shafi
    <div class = "jere" > 
      <div class = "span6" > 
        Mataki na 2
      </div>
      <div class = "span6" > 
        Mataki na 2
      </div>
    </div>
  </div>
</div>

Mirgine grid naku

Gina cikin Bootstrap kaɗan ne na masu canji don keɓance tsoffin tsarin grid 940px. Tare da ɗan gyare-gyare, zaku iya canza girman ginshiƙai, magudanar ruwa, da kwandon da suke zaune a ciki.

Ciki grid

Masu canji da ake buƙata don gyara tsarin grid a halin yanzu duk suna cikin variables.less.

Yanzu don keɓancewa

Gyara grid yana nufin canza masu @grid-*canji guda uku da sake tattara Ƙananan fayiloli.

Bootstrap ya zo sanye take don sarrafa tsarin grid mai har zuwa ginshiƙai 24; tsoho shine kawai 16. Anan ga yadda masu canjin grid ɗinku zasu yi kama da grid mai shafi 24.

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

Da zarar an sake tattarawa, za a saita ku!

Kafaffen shimfidar wuri

Tsohuwar kuma mai sauƙi 940px-fadi, shimfidar wuri na tsakiya don kusan kowane gidan yanar gizo ko shafi da aka samar ta guda <div.container>.

<jiki>
  <div class = "kwantena" > 
    ...
  </div>
</ jiki>

Tsarin ruwa

Madadin, tsarin shafi mai sassauƙa mai sassauƙa tare da min- da max-fasa da mashigin gefen hagu. Mafi kyau ga apps da docs.

<jiki>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "abun ciki" > 
      ...
    </div>
  </div>
</ jiki>

Kanun labarai & kwafi

Madaidaicin matsayi na rubutu don tsara shafukan yanar gizonku.

Gabaɗayan grid ɗin rubutun ya dogara ne akan ƙananan masu canji guda biyu a cikin masu canjin mu.Fayil maras kyau: @basefontda@baseline . Na farko shine girman font-girman da aka yi amfani da shi duka kuma na biyu shine tsayin layin tushe.

Muna amfani da waɗancan sauye-sauye, da wasu maths, don ƙirƙira margins, paddings, da tsayin layi na kowane nau'in mu da ƙari.

h1. Take 1

h2. Take 2

h3. Take 3

h4. Take 4

h5. Take 5

h6. Take 6

Misali sakin layi

Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban dariya da kuma ban mamaki. Nullam id dolor id nibh ultricies vehicula ut id elit.

Misalin taken Yana da babban taken…

Misc abubuwa

Amfani da girmamawa, adireshi, & gajarta

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

Lokacin amfani

Ya kamata a yi amfani da alamun girmamawa ( <strong>da <em>) don nuna ƙarin mahimmanci ko jaddada kalma ko jumla dangane da kwafinta na kewaye. Yi amfani <strong>da mahimmanci <em>da damuwa .

Ƙaddamarwa a cikin sakin layi

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.

Lura: Har yanzu yana da kyau a yi amfani <b>da <i>alama a cikin HTML5 kuma ba dole ba ne a yi musu salo mai ƙarfi da rubutu ba, bi da bi (ko da yake idan akwai ƙarin ma'anar ma'anar, yi amfani da shi). <b>ana nufin haskaka kalmomi ko jimloli ba tare da isar da ƙarin mahimmanci ba, yayin da<i> da galibin murya ne, kalmomin fasaha, da sauransu.

Adireshi

Ana <address>amfani da kashi don bayanin tuntuɓar kakansa na kusa, ko duka jikin aikin. Ga misalai guda biyu na yadda za a iya amfani da shi:

Lura: Kowane layi a cikin <address>dole ne ya ƙare tare da karya-layi ( <br />) ko a naɗe shi cikin alamar toshewa (misali, <p>) don tsara abun ciki yadda ya kamata.

Gajartawa

Don gajartawa da gajarta, yi amfani da <abbr>tag ( <acronym>an soke shi a cikin HTML5 ). Saka fom ɗin gajeriyar hannu a cikin alamar kuma saita take don cikakken suna.

Blockquotes

<blockquote> <p> <small>

Yadda za a faɗi

Don haɗa da blockquote, kunsa <blockquote>kusa <p>da <small>alama. Yi amfani da <small>kashi don faɗi tushen ku kuma za ku sami dash —a gabansa.

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

Dokta 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>

Ba a ba da oda ba<ul>

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

Mara salo<ul.unstyled>

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

An yi oda<ol>

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

Bayanidl

Jerin bayanin

Jerin bayanin ya dace don ma'anar kalmomi.

Euismod

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

Donec id un mi porta gravida a eget metus.

Malesuada porta

Ka yi la'akari da abin da ake kira euismod.

Lambar

<code> <pre>

Sanya lambar ku a cikin salo tare da alamun sauƙaƙan guda biyu. Don ƙarin ban mamaki ta hanyar javascript, je zuwa ɗakin karatu mai kyau na lambar Google kuma an saita ku.

Lambar gabatarwa

Lambar, tubalan ko snippets na layi, ana iya nunawa tare da salo kawai ta hanyar nannade cikin alamar dama. Don tubalan lambar da ke faɗin layi ɗaya, yi amfani da <pre>kashi. Don lambar layi, yi amfani da <code>kashi.

<div>
  <h1>Jigo </h1>
  <p>Wani abu a nan...</p>
</div>

<div> <h1> Take </h1> <p> Wani abu a nan... </p> </div>
  
  

Lakabin layi

<span class="label">

Kira hankali ga ko ba da alama ga kowane jumla a cikin rubutun jikin ku.

Lakabi wani abu

Ya taɓa buƙatar ɗaya daga cikin sabbin sabbin abubuwan ban sha'awa! ko Tutoci masu mahimmanci lokacin rubuta lamba? To, yanzu kuna da su. Ga abin da aka haɗa ta tsohuwa:

Grid mai jarida

Nuna manyan hotuna masu girma dabam a shafuka masu ƙarancin sawun HTML da ƙananan salo.

Misalin takaitaccen siffofi

Thumbnails a cikin na .media-gridiya zama kowane girman, amma suna aiki mafi kyau idan aka tsara taswirar kai tsaye zuwa tsarin grid na Bootstrap. Faɗin hoto kamar 90, 210, da 330 suna haɗuwa tare da ƴan pixels na padding don daidaita girman .span2, .span4, da .span6girman shafi.

Babba

Matsakaici

Karami

Yi rikodin su

Rukunin kafofin watsa labarai suna da sauƙin amfani kuma suna da sauƙi a gefen alama. Girman su ya dogara ne kawai akan girman hotunan da aka haɗa.

<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>

Gine-gine tebur

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

Tables suna da kyau-don abubuwa da yawa. Manyan teburi, duk da haka, suna buƙatar ɗan ƙaƙƙarfan soyayya don zama mai amfani, daidaitacce, da abin karantawa (a matakin lambar). Anan akwai 'yan shawarwari don taimakawa.

Koyaushe ku nannade rubutun ku a cikin <thead>irin wannan matsayi shine <thead>> <tr>> <th>.

Hakazalika da rubutun kan layi, duk abubuwan da ke cikin teburin ku yakamata a nannade su cikin ta <tbody>yadda tsarinku ya kasance <tbody>> <tr>> <td>.

Misali: Tsoffin salon tebur

Duk teburi za a tsara su ta atomatik tare da mahimman iyakoki kawai don tabbatar da karantawa da kiyaye tsari. Babu buƙatar ƙara ƙarin azuzuwan ko halaye.

<tebur>
  ...
</text>

Misali: Tebu mai kauri

Don allunan da ke buƙatar ƙarin bayanai a cikin wurare masu maƙarƙashiya, yi amfani da ɗanɗanon ɗanɗano wanda ke yanke padding cikin rabi. Hakanan za'a iya amfani dashi tare da iyakoki da ratsin zebra, kamar yadda tsarin tebur na tsoho.

Misali: Tebur mai iyaka

Sanya tebur ɗinku su yi kama da ɗan santsi ta hanyar zagaye sasanninta da ƙara iyakoki a kowane bangare.

< class class = "bordered-tebur" > 
  ...
</text>

Misali: Zaki-tsitsi

Samun ɗan zato tare da tebur ɗinku ta ƙara zakin zebra - ƙara .zebra-stripedaji kawai.

Lura: Zebra-striping shine haɓakawa na ci gaba da ba samuwa ga tsofaffin masu bincike kamar IE8 da ƙasa.

< class class = "zebra-striped" > 
  ...
</text>

Misali: Zaure-Tabled w/TableSorter.js

Ɗaukar misalin da ya gabata, muna inganta fa'idar teburin mu ta hanyar samar da aikin rarrabawa ta hanyar jQuery da plugin ɗin Tablesorter . Danna kowane ginshiƙi don canza nau'in.

<script src = "js/jquery/jquery.tablesorter.min.js" > </script> 
<rubutu > 
  $ ( aiki () { 
    $ ( "tebur# sortTableExample" ). tablesorter ({ irinList : [[ 1 , 0 ]]] );  
  });
</script>
< class class = "zebra-striped" > 
  ...
</text>

Salon tsoho

Ana ba da kowane nau'i nau'i na asali don gabatar da su a cikin hanyar da za a iya karantawa da kuma daidaitawa. An ba da salo don shigar da rubutu, zaɓi lissafin, wuraren rubutu, maɓallan rediyo da akwatunan rajista, da maɓalli.

Siffofin da aka tattara

Ƙara .form-stackedzuwa HTML na fom ɗin ku kuma za ku sami lakabi a saman filayen su maimakon hagu. Wannan yana aiki da kyau idan fom ɗinku gajeru ne ko kuna da ginshiƙai biyu na abubuwan shigar da sifofi masu nauyi.

Girman girman filin

Keɓance kowane nau'i input, select, ko textareafaɗi ta ƙara ƴan azuzuwan zuwa alamarku.

Tun daga v1.3.0, mun ƙara azuzuwan ma'auni na tushen grid don nau'ikan abubuwa. Da fatan za a yi amfani da waɗannan akan azuzuwan da suke .mini, .small, da sauransu.

Maɓalli

A matsayin al'ada, ana amfani da maɓalli don ayyuka yayin da ake amfani da hanyoyin haɗin gwiwa don abubuwa. Misali, "Zazzagewa" na iya zama maɓalli kuma "aikin kwanan nan" na iya zama hanyar haɗi.

Duk maɓallai sun saba zuwa salon launin toka mai haske, amma ana iya amfani da nau'ikan azuzuwan aiki don nau'ikan launi daban-daban. Waɗannan azuzuwan sun haɗa da ajin shuɗi .primary, ajin haske-blue .info, ajin kore .success, da kuma jan .dangeraji.

Misali maɓallan

Za a iya amfani da salon maɓalli ga kowane abu tare da abin da aka .btnyi amfani da shi. Yawanci kuna son amfani da waɗannan zuwa kawai <a>, <button>, kuma zaɓi <input>abubuwa. Ga yadda abin yake:

Madadin girma dabam

Kuna son manyan maɓalli ko ƙarami? Ku zo da shi!

Jihar naƙasassu

Don maɓallan da ba su aiki ko ƙa'idar ta kashe su saboda dalili ɗaya ko wani, yi amfani da yanayin nakasa. Wato .disableddon haɗin kai da :disabledabubuwan <button>abubuwa.

Hanyoyin haɗi

Maɓalli

Menene

Babban mashaya na mu kafaffen mashaya ne wanda ke dauke da tambarin gidan yanar gizo ko suna, kewayawa na farko, da sigar bincike.

Mai iya daidaitawa

Duk abubuwan da ke ciki, da kuma gabaɗayan saman saman ma, zaɓi ne. Za ka iya zaɓar haɗa tambari/suna, kewayawa, bincike, da nav na biyu-ko kowane haɗin wancan.

An haɗa abubuwan saukarwa

A matsayin wani ɓangare na babban kewayawa, mun haɗa da ikon da za ku ƙara abubuwan da aka sauke zuwa nav ɗinku. Duba babban kewayawa na biyu a sama (daidaitacce) don ganin yadda aka yi. Abubuwan da aka saukar likuma suna goyan bayan .activenuna zaɓin shafi na yanzu.

Tabs da kwayoyi

Ƙirƙiri sauƙi na kewayawa na sakandare tare da <ul>. Musanya tsakanin shafuka ko kwayoyi ta ƙara ajin da ya dace.

Mai girma ga ƙananan sassan abun ciki kamar shafukan saitunan asusun mu da lokutan masu amfani don juyawa tsakanin shafuka na abun ciki. Akwai a cikin tabbed ko tsarin kwaya.

Misalin shafuka na asali

Ana iya amfani da shafuka azaman kewayawa na yau da kullun (ɗora shafuna na waje a shafi ɗaya) ko azaman wuraren abun ciki da za'a iya amfani da su don musanya fakitin abun ciki. Muna da plugin ɗin shafuka waɗanda za a iya amfani da su don haɗa na ƙarshe.

• Gida
• Bayanan martaba
• Saƙonni
• Saituna
• Tuntuɓar
• Zazzagewa
  • mahada na biyu
  • Wani abu kuma a nan
  • Wata hanyar haɗi

<ul class = "shafukan" > 
  <li class = "active" ><a href = "#" > Gida </a></li>  
  <li><a href = "#" > Bayanan martaba </a></li> 
  <li><a href = "#" > Saƙonni </a></li> 
  <li><a href = "#" > Saituna </a></li> 
  <li><a href = "#" > Tuntuɓi </a></li> 
</ul>

Misalin kwayoyi na asali

• Gida
• Bayanan martaba
• Saƙonni
• Saituna
• Tuntuɓar

<ul class = "kwayoyin kwayoyi" > 
  <li class = "active" ><a href = "#" > Gida </a></li>  
  <li><a href = "#" > Bayanan martaba </a></li> 
  <li><a href = "#" > Saƙonni </a></li> 
  <li><a href = "#" > Saituna </a></li> 
  <li><a href = "#" > Tuntuɓi </a></li> 
</ul>

Gurasa gurasa

Ana amfani da kewayawar biredi a matsayin hanya don nuna masu amfani inda suke cikin manhaja ko wani shafi, amma ba don kewayawa na farko ba.

• Gida

• Gida /
• Shafi na tsakiya

• Gida /
• Shafi na tsakiya /
• Wani kuma

• Gida /
• Shafi na tsakiya /
• Wani /
• Kuna nan

<ul class = "breadcrumb" > 
  <li><a href = "#" > Gida </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Shafi na tsakiya </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Wani </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Kuna nan </li> 
</ul>

Pagination

Matsakaicin sauƙi da ƙaramin salo mai salo wanda Rdio yayi wahayi. Babban toshe yana da wuya a rasa, sauƙin daidaitawa, kuma yana ba da manyan wuraren dannawa.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Na baya </a></li>  
    <li class = "active" ><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 = "na gaba" ><a href = "#" > Gaba → </li>  
  </ul>
</div>

Fadakarwa na asali

.alert-message

Saƙonnin layi ɗaya don nuna gazawa, yuwuwar gazawa, ko nasarar aiki. Musamman amfani ga siffofin.

Samu javascript »

Misali code

<div class = "gargadin saƙon faɗakarwa" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole mai tsarki! Mafi kyawun duba yo kai, ba ka da kyau sosai. </p>
</div>

Toshe saƙonni

.alert-message.block-message

Don saƙonnin da ke buƙatar ɗan bayani, muna da faɗakarwar salon sakin layi. Waɗannan cikakke ne don busa saƙonnin kuskure masu tsayi, gargaɗin mai amfani da wani mataki na jiran aiki, ko gabatar da bayanai kawai don ƙarin girmamawa akan shafin.

Samu javascript »

Misali code

<div class = "gargadin-saƙon toshe-saƙon faɗakarwa" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole mai tsarki! Wannan gargadi ne! Mafi kyawun duba yo kai, ba ka da kyau sosai. Nulla vitae elit libero, a pharetra augue. Abubuwan da suka dace da cursus magna, velsselerisque nisl consectetur et. </p>
  <div class = "ayyukan faɗakarwa" > 
    <a class = "btn small" href = "#" > Ɗauki wannan mataki </a> <a class = "btn small" href = "#" > Ko yi wannan </a>     
  </div>
</div>

Modals

Modals — maganganu ko akwatunan haske — suna da kyau don ayyukan mahallin a cikin yanayi inda yana da mahimmanci a kiyaye mahallin baya.

Samu javascript »

Nasihun kayan aiki

Twipsies suna da fa'ida sosai don taimaka wa mai amfani da ya ruɗe da nuna su ta hanya madaidaiciya.

Samu javascript »

Popovers

Yi amfani da popovers don samar da bayanan rubutu zuwa shafi ba tare da shafar shimfidar wuri ba.

Samu javascript »

Farawa

Haɗa javascript tare da ɗakin karatu na Bootstrap abu ne mai sauqi sosai. A ƙasa mun wuce abubuwan yau da kullun kuma muna samar muku da wasu abubuwan plugins masu ban sha'awa don farawa!

Duba takardun javascript »

Me ya hada

Kawo wasu abubuwan farko na Bootstrap zuwa rayuwa tare da sabbin plugins na al'ada waɗanda ke aiki tare da jQuery da Ender . Muna ƙarfafa ku don ƙarawa da gyara su don dacewa da takamaiman bukatun ku na ci gaba.

Javascript ya zama dole?

A'a! An tsara Bootstrap da farko don zama ɗakin karatu na CSS. Wannan javascript yana ba da tushe na mu'amala na asali a saman salon da aka haɗa.

Koyaya, ga waɗanda suke buƙatar javascript, mun samar da plugins ɗin da ke sama don taimaka muku fahimtar yadda ake haɗa Bootstrap tare da javascript kuma don ba ku zaɓi mai sauri, mara nauyi don ainihin aikin nan take.

Don ƙarin bayani da don ganin wasu nunin raye-raye, da fatan za a koma zuwa shafin takaddun kayan aikin mu .