Bootstrap

Zane-zane

An gina Bootstrap akan grid ginshiƙi 12 mai amsawa. Mun kuma haɗa ƙayyadaddun ƙayyadaddun shimfidu da faɗin ruwa bisa wannan tsarin.

Salon duniya don sake saitin CSS, rubutun rubutu, da hanyoyin haɗin gwiwa

Yana buƙatar doctype HTML5

Bootstrap yana amfani da abubuwan HTML da kaddarorin CSS waɗanda ke buƙatar amfani da ka'idar HTML5. Tabbatar kun haɗa shi a farkon kowane shafin Bootstrapped a cikin aikin ku.

  1. <!DOCTYPE html>
  2. <html lang = "ha" > 
  3.   ...
  4. </html>

Rubutun rubutu da haɗin kai

A cikin fayil ɗin scaffolding.less , mun saita ainihin nunin duniya, rubutun rubutu, da salon haɗin kai. Musamman, mu:

  • Cire gefe a jiki
  • Saita background-color: white;akanbody
  • Yi amfani da @baseFontFamily, @baseFontSize, da @baseLineHeightsifofi azaman tushen rubutun mu
  • Saita kalar mahaɗin duniya ta hanyar @linkColorkuma yi amfani da layin layi kawai a kan:hover

Sake saiti ta hanyar Normalize

Kamar na Bootstrap 2, sake saitin CSS na al'ada ya samo asali don yin amfani da abubuwa daga Normalize.css , aikin Nicolas Gallagher wanda kuma ke iko da HTML5 Boilerplate .

Har yanzu ana iya samun sabon sake saiti a cikin reset.less , amma tare da abubuwa da yawa da aka cire don taƙaitawa da daidaito.

Tsohuwar tsarin grid ginshiƙai 12 tare da karkatar da martani

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Tsohuwar tsarin grid da aka bayar a cikin Bootstrap yana amfani da ginshiƙai 12 waɗanda ke samarwa a faɗin 724px, 940px (tsoho ba tare da haɗa CSS mai amsawa ba), da 1170px. A ƙasan wuraren kallon 767px, ginshiƙan sun zama ruwa kuma suna tari a tsaye.

  1. <div class = "jere" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Kamar yadda aka nuna a nan, za a iya ƙirƙira wani tsari na asali tare da "ginshiƙai" guda biyu, kowannensu yana da adadin ginshiƙai 12 da muka ayyana a matsayin wani ɓangare na tsarin grid ɗin mu.


ginshiƙan kashewa

4
4 tafe 4
3 tafe 3
3 tafe 3
8 tafe 4 
  1. <div class = "jere" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

ginshiƙan gida

Tare da tsarin grid na tsaye (marasa ruwa) a cikin Bootstrap, gida yana da sauƙi. Don shigar da abun cikin ku, kawai ƙara sabon .rowda saitin .span*ginshiƙai a cikin .span*ginshiƙi da ke akwai.

Misali

Layukan da aka gina su ya kamata su haɗa da saitin ginshiƙai waɗanda suka haɗa har zuwa adadin ginshiƙan iyayensa. Misali, .span3ya kamata a sanya ginshiƙai biyu masu gida a cikin .span6.

Mataki na 1 na shafi
Mataki na 2
Mataki na 2 
  1. <div class = "jere" > 
  2.   <div class = "span6" > 
  3.     Mataki na 1 shafi
  4.     <div class = "jere" > 
  5.       <div class = "span3" > Mataki na 2 </div> 
  6.       <div class = "span3" > Mataki na 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Tsarin grid ruwa 12 mai amsawa, ginshiƙan tushen kashi

ginshiƙan ruwa

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Kashi ɗari, ba pixels ba

Tsarin grid na ruwa yana amfani da kaso don faɗin shafi maimakon ƙayyadaddun pixels. Hakanan yana da bambance-bambancen amsa iri ɗaya kamar ƙayyadaddun tsarin grid ɗin mu, yana tabbatar da madaidaitan madaidaitan maɓalli don ƙudurin allo da na'urori.

Layukan ruwa

Yi kowane jeri ruwa ta hanyar canzawa .rowzuwa .row-fluid. ginshiƙan sun kasance daidai ɗaya, yana mai da shi madaidaici don juyawa tsakanin ƙayyadaddun shimfidar wuri da ruwa.

Alamar alama

  1. <div class = "jere-ruwa" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Ruwan gida

Gura tare da grid ruwa ya ɗan bambanta: adadin ginshiƙan gida baya buƙatar dacewa da iyaye. Madadin haka, ana sake saita ginshiƙan ku a kowane matakin saboda kowane jere yana ɗaukar 100% na ginshiƙin iyaye.

Ruwa 12
Ruwa 6
Ruwa 6 
  1. <div class = "jere-ruwa" > 
  2.   <div class = "span12" > 
  3.     Mataki na 1 na shafi
  4.     <div class = "jere-ruwa" > 
  5.       <div class = "span6" > Mataki na 2 </div> 
  6.       <div class = "span6" > Mataki na 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Keɓance Grid

Mai canzawa Ƙimar ta asali Bayani
@gridColumns 12 Adadin ginshiƙai
@gridColumnWidth 60px ku Nisa na kowane shafi
@gridGutterWidth 20px ku Mara kyau sarari tsakanin ginshiƙai

Canje-canje a cikin LESS

Gina cikin Bootstrap kaɗan ne na masu canji don keɓance tsohuwar tsarin grid 940px, rubuce a sama. Ana adana duk masu canji na grid a cikin masu canji.less.

Yadda ake keɓancewa

Gyara grid yana nufin canza masu @grid*canji guda uku da sake tattara Bootstrap. Canja masu canjin grid a cikin masu canji.less kuma yi amfani da ɗayan hanyoyi huɗu da aka rubuta don sake tarawa . Idan kana ƙara ƙarin ginshiƙai, tabbatar da ƙara CSS ga waɗanda ke cikin grid.less.

Kasance mai amsawa

Keɓance grid ɗin yana aiki ne kawai a matakin tsoho, grid 940px. Don kula da abubuwan da suka dace na Bootstrap, za ku kuma tsara grid a cikin amsawa.less.

Layouts Na asali samfuri don ƙirƙirar shafukan yanar gizo

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 class="container">.

  1. <jiki>
  2.   <div class = "kwantena" > 
  3.     ...
  4.   </div>
  5. </ jiki>

Tsarin ruwa

<div class="container-fluid">yana ba da tsarin shafi mai sassauƙa, min- da max- faɗin, da mashigin gefen hagu. Yana da kyau ga apps da docs.

  1. <div class = "container-fluid" > 
  2.   <div class = "jere-ruwa" > 
  3.     <div class = "span2" > 
  4.       <!-- Abun ciki na gefe-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Abin cikin jiki-->
  8.     </div>
  9.   </div>
  10. </div>

Zane mai amsa tambayoyin Mai jarida don na'urori da shawarwari daban-daban

Na'urori masu amsawa

Abin da suke yi

Tambayoyin watsa labarai suna ba da izinin CSS na al'ada dangane da adadin sharuɗɗa - ragi, faɗin, nau'in nuni, da sauransu-amma yawanci yana mai da hankali a kusa min-widthda max-width.

  • Gyara nisa na ginshiƙi a cikin grid ɗin mu
  • Tari abubuwa maimakon yin iyo a duk inda ya cancanta
  • Maimaita girman kanun labarai da rubutu don zama mafi dacewa ga na'urori

Yi amfani da tambayoyin kafofin watsa labarai cikin gaskiya kuma kawai azaman farawa ga masu sauraron wayar hannu. Don manyan ayyuka, yi la'akari da ginshiƙan ƙididdiga na ƙididdiga ba jerin tambayoyin kafofin watsa labarai ba.

Na'urori masu tallafi

Bootstrap yana goyan bayan ɗimbin tambayoyin kafofin watsa labarai a cikin fayil ɗaya don taimakawa yin ayyukan ku mafi dacewa akan na'urori daban-daban da ƙudurin allo. Ga abin da ya haɗa:

Lakabi Faɗin shimfidar wuri Faɗin ginshiƙi Faɗin gutter
Wayoyin hannu 480px da ƙasa ginshiƙan ruwa, babu tsayayyen faɗin
Wayoyin hannu zuwa kwamfutar hannu 767px da ƙasa ginshiƙan ruwa, babu tsayayyen faɗin
Allunan hoto 768px da sama 42px ku 20px ku
Tsohuwar 980px kuma sama 60px ku 20px ku
Babban nuni 1200px da sama 70px ku 30px ku

Yana buƙatar alamar meta

Don tabbatar da cewa na'urori suna nuna shafuka masu amsa da kyau, haɗa da alamar meta mai duba.

  1. <meta name = "viewport" abun ciki = "nisa = nisa-na'ura, sikelin farko=1.0" >

Amfani da tambayoyin kafofin watsa labarai

Bootstrap baya haɗa waɗannan tambayoyin kafofin watsa labarai ta atomatik, amma fahimta da ƙara su abu ne mai sauƙi kuma yana buƙatar saiti kaɗan. Kuna da ƴan zaɓuɓɓuka don haɗawa da abubuwan amsawa na Bootstrap:

  1. Yi amfani da sigar amsawa da aka haɗa, bootstrap-responsive.css
  2. Ƙara @import "responsive.less" kuma a sake haɗa Bootstrap
  3. Gyara da sake tattara amsawa.less azaman fayil daban

Me zai hana kawai hada shi? Gaskiyar magana, ba duk abin da yake bukatar ya kasance mai amsawa ba. Maimakon ƙarfafa masu haɓakawa don cire wannan fasalin, mun ga zai fi dacewa mu kunna shi.

  1.   /* Wayoyin yanayi da ƙasa */
  2.   @media ( max - nisa : 480px ) { ... }     
  3.  
  4.   /* Wayar shimfidar wuri zuwa kwamfutar hannu mai hoto */
  5.   @media ( max - nisa : 767px ) { ... }     
  6.  
  7.   /* Hoton kwamfutar hannu zuwa wuri mai faɗi da tebur */
  8.   @media ( min - nisa : 768px ) da ( max - nisa : 979px ) { ... }        
  9.  
  10.   /* Babban Desktop */
  11.   @media ( min - nisa : 1200px ) { ... }

Azuzuwan masu amfani masu amsawa

Menene su

Don saurin haɓaka abokantaka na wayar hannu, yi amfani da waɗannan azuzuwan masu amfani don nunawa da ɓoye abun ciki ta na'ura.

Lokacin amfani

Yi amfani da ƙayyadaddun tushe kuma guje wa ƙirƙirar rukunoni daban-daban na rukunin yanar gizon guda ɗaya. Madadin haka, yi amfani da su don dacewa da gabatarwar kowace na'ura.

Misali, zaku iya nuna wani yanki <select>na nav akan shimfidar wayar hannu, amma ba akan allunan ko tebur ba.

Tallafin azuzuwan

An nuna a nan tebur na azuzuwan da muke tallafawa da tasirinsu akan shimfidar tambayar kafofin watsa labarai da aka bayar (mai lakabin na'ura). Ana iya samun su a cikin responsive.less.

Class Wayoyi480px da ƙasa Allunan767px da ƙasa Kwamfutoci768px da sama
.visible-phone Ganuwa
.visible-tablet Ganuwa
.visible-desktop Ganuwa
.hidden-phone Ganuwa Ganuwa
.hidden-tablet Ganuwa Ganuwa
.hidden-desktop Ganuwa Ganuwa

Gwajin gwaji

Maimaita girman burauzarku ko lodi akan na'urori daban-daban don gwada azuzuwan da ke sama.

Ganuwa akan...

Alamun kore kore suna nuna cewa ajin yana bayyane a wurin kallon ku na yanzu.

  • Waya✔ Waya
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Boye akan...

Anan, koren cak yana nuna cewa ajin yana ɓoye a wurin kallon ku na yanzu.

  • Waya✔ Waya
  • Tablet✔ Tablet
  • Desktop✔ Desktop