Bootstrap

Zane-zane

Bootstrap an gina shi akan grid ginshiƙai 12 masu amsawa, shimfidu, da abubuwan haɗin gwiwa.

Saitunan duniya

Yana buƙatar doctype HTML5

Bootstrap yana amfani da wasu abubuwan HTML da kaddarorin CSS waɗanda ke buƙatar amfani da tsarin HTML5. Hada shi a farkon duk ayyukan ku.

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

Rubutun rubutu da haɗin kai

Bootstrap yana saita ainihin nunin duniya, rubutun rubutu, da salon haɗin kai. Musamman, mu:

  • Cire margina 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

Ana iya samun waɗannan salon a cikin scaffolding.less .

Sake saiti ta hanyar Normalize

Tare da Bootstrap 2, an jefar da tsohuwar toshewar sake saiti a cikin ni'imar Normalize.css , aikin Nicolas Gallagher da Jonathan Neal wanda kuma ke iko da HTML5 Boilerplate . Yayin da muke amfani da yawa na Normalize a cikin reset.less , mun cire wasu abubuwa musamman don Bootstrap.

Tsohuwar tsarin grid

Misalin grid live

Tsohuwar tsarin grid na Bootstrap yana amfani da ginshiƙai 12 , yana yin babban akwati mai faɗin 940px ba tare da kunna fasali masu amsawa ba. Tare da ƙara fayil ɗin CSS mai amsa, grid ɗin ya dace da zama 724px da faɗin 1170px ya danganta da kallon kallon ku. A ƙasan wuraren kallon 767px, ginshiƙan sun zama ruwa kuma suna tari a tsaye.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Asalin grid HTML

Don shimfidar ginshiƙi biyu mai sauƙi, ƙirƙira .rowkuma ƙara adadin .span*ginshiƙan da suka dace. Da yake wannan grid mai shafi 12 ne, kowanne .span*ya faɗi adadin waɗannan ginshiƙai 12, kuma koyaushe yakamata ya ƙara har zuwa 12 ga kowane jere (ko adadin ginshiƙai a cikin iyaye).

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

An ba da wannan misalin, muna da .span4kuma .span8, yin ginshiƙai 12 duka da cikakken jeri.

ginshiƙan kashewa

Matsar da ginshiƙai zuwa dama ta amfani .offset*da azuzuwan. Kowane aji yana ƙara gefen hagu na ginshiƙi da gabaɗayan ginshiƙi. Misali, .offset4yana motsawa .span4sama da ginshiƙai huɗu.

4
3 faduwa 2
3 faduwa 1
3 faduwa 2
6 kafe 3 
  1. <div class = "jere" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

ginshiƙan gida

Don shigar da abun cikin ku tare da tsoho grid, ƙara sabon .rowda saitin .span*ginshiƙai a cikin .span*ginshiƙi da ke akwai. Layukan da aka kafa ya kamata su haɗa da saitin ginshiƙai waɗanda ke ƙara adadin ginshiƙan iyayensa.

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

Tsarin grid ruwa

Misali grid ruwa mai rai

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

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

Asalin grid HTML

Yi kowane jere "ruwa" ta canza .rowzuwa .row-fluid. Azuzuwan ginshiƙi sun kasance daidai ɗaya, yana sauƙaƙa juyawa tsakanin kafaffen grid da ruwa.

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

Gyaran ruwa

Yana aiki daidai da ƙayyadaddun tsarin tsarin grid: ƙara .offset*zuwa kowane shafi don daidaitawa ta ginshiƙan da yawa.

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

Ruwan gida

Gilashin ruwa suna amfani da gida daban-daban: kowane matakin ginshiƙai ya kamata ya ƙara har zuwa ginshiƙai 12. Wannan saboda grid na ruwa yana amfani da kaso, ba pixels ba, don saita faɗin.

Ruwa 12
Ruwa 6
Ruwa 6
Ruwa 6
Ruwa 6 
  1. <div class = "jere-ruwa" > 
  2.   <div class = "span12" > 
  3.     Ruwa 12
  4.     <div class = "jere-ruwa" > 
  5.       <div class = "span6" > 
  6.         Ruwa 6
  7.         <div class = "jere-ruwa" > 
  8.           <div class = "span6" > Ruwa 6 </div> 
  9.           <div class = "span6" > Ruwa 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Ruwa 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Tsari

Kafaffen shimfidar wuri

Yana ba da ƙayyadaddun ƙayyadadden faɗin gama gari (da zaɓin amsa) tare da buƙatu kawai <div class="container">.

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

Tsarin ruwa

Ƙirƙirar ruwa, shafi mai shafi biyu tare da <div class="container-fluid">-mai girma don aikace-aikace da takardu.

  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 amsawa

Kunna fasalulluka masu amsawa

Kunna CSS mai amsawa a cikin aikinku ta haɗa madaidaicin alamar meta da ƙarin salo a cikin <head>takaddun ku. Idan kun haɗa Bootstrap daga shafin Customize, kuna buƙatar haɗa alamar meta kawai.

  1. <meta name = "viewport" abun ciki = "nisa = nisa-na'ura, sikelin farko=1.0" >  
  2. <link href = "kadara/css/bootstrap-responsive.css" rel = "stylesheet" >

A kula!Bootstrap baya haɗa da fasalulluka masu amsa ta tsohuwa a wannan lokacin saboda ba komai yana buƙatar amsawa ba. Maimakon ƙarfafa masu haɓakawa don cire wannan fasalin, muna ganin zai fi dacewa mu kunna shi yadda ake buƙata.

Game da Bootstrap mai amsawa

Na'urori masu amsawa

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 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
Babban nuni 1200px da sama 70px ku 30px ku
Default 980px kuma sama 60px ku 20px ku
Allunan hoto 768px da sama 42px ku 20px ku
Wayoyi zuwa kwamfutar hannu 767px da ƙasa ginshiƙan ruwa, babu tsayayyen faɗin
Wayoyi 480px da ƙasa ginshiƙan ruwa, babu tsayayyen faɗin 
  1. /* Babban Desktop */
  2. @media ( min - nisa : 1200px ) { ... }     
  3.  
  4. /* Hoton kwamfutar hannu zuwa wuri mai faɗi da tebur */
  5. @media ( min - nisa : 768px ) da ( max - nisa : 979px ) { ... }        
  6.  
  7. /* Wayar shimfidar wuri zuwa kwamfutar hannu mai hoto */
  8. @media ( max - nisa : 767px ) { ... }     
  9.  
  10. /* Wayoyin yanayi da ƙasa */
  11. @media ( max - nisa : 480px ) { ... }

Azuzuwan masu amfani masu amsawa

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. A ƙasa akwai tebur na azuzuwan da ake da su da tasirinsu akan shimfidar tambayar kafofin watsa labarai da aka bayar (lakabi ta na'ura). Ana iya samun su a cikin responsive.less.

Class Wayoyi767px da ƙasa Allunan979px zuwa 768px KwamfutociDefault
.visible-phone Ganuwa
.visible-tablet Ganuwa
.visible-desktop Ganuwa
.hidden-phone Ganuwa Ganuwa
.hidden-tablet Ganuwa Ganuwa
.hidden-desktop Ganuwa Ganuwa

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. Kada a yi amfani da kayan aiki masu amsawa tare da tebur, kuma don haka ba a tallafawa.

Maganganun gwajin abubuwan amfani

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

Ganuwa akan...

Koren cak yana 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