Kiunzi

Inahitaji aina ya hati ya HTML5

Bootstrap hutumia vipengele fulani vya HTML na sifa za CSS ambazo zinahitaji matumizi ya aina ya hati ya HTML5. Ijumuishe mwanzoni mwa miradi yako yote.

<!DOCTTYPE html>
<html lang = "en" > 
  ...
</ html>

Uchapaji na viungo

Bootstrap huweka onyesho msingi la kimataifa, uchapaji, na mitindo ya viungo. Hasa, sisi:

Ondoa marginkwenye mwili
Weka background-color: white;kwenyebody
Tumia @baseFontFamily, @baseFontSize, na @baseLineHeightsifa kama msingi wetu wa uchapaji
Weka rangi ya kiungo cha kimataifa kupitia @linkColorna tumia mistari ya chini ya kiungo kwenye tu:hover

Mitindo hii inaweza kupatikana ndani ya scaffolding.less .

Weka upya kupitia Normalize

Kwa Bootstrap 2, kizuizi cha zamani cha kuweka upya kimetupwa kwa ajili ya Normalize.css , mradi wa Nicolas Gallagher na Jonathan Neal ambao pia unasimamia HTML5 Boilerplate . Ingawa tunatumia sehemu kubwa ya Kusawazisha ndani ya reset.less , tumeondoa baadhi ya vipengele mahususi kwa Bootstrap.

Mfano wa gridi ya moja kwa moja

Mfumo wa gridi ya Bootstrap chaguo-msingi hutumia safuwima 12 , na kutengeneza kontena pana la 940px bila vipengele jibu kuwashwa. Na faili sikivu ya CSS imeongezwa, gridi ya taifa hubadilika na kuwa 724px na upana wa 1170px kulingana na poti yako ya kutazama. Chini ya lango la kutazama la 767px, safu wima huwa maji na kutundikwa wima.

HTML ya gridi ya msingi

Kwa mpangilio rahisi wa safu mbili, unda a .rowna uongeze nambari inayofaa ya .span*safuwima. Kwa vile hii ni gridi ya safu wima 12, kila safu .span*hujumuisha idadi ya safu wima hizo 12, na inapaswa kujumlisha hadi 12 kila wakati kwa kila safu (au idadi ya safu wima katika mzazi).

<div class = "safu" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

Kwa kuzingatia mfano huu, tunayo .span4na .span8, kutengeneza safu wima 12 na safu kamili.

Kuweka safu wima

Sogeza safu kulia kwa kutumia .offset*madarasa. Kila darasa huongeza ukingo wa kushoto wa safu kwa safu nzima. Kwa mfano, .offset4husogea .span4zaidi ya safu wima nne.

3 kurekebisha 2

3 kurekebisha 1

3 kurekebisha 2

6 kurekebisha 3

<div class = "safu" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</ div>

Safu wima za kuota

Ili kuweka maudhui yako kwa gridi chaguo-msingi, ongeza safu mpya .rowna seti ya .span*safu wima iliyopo .span*. Safu mlalo zilizowekwa zinapaswa kujumuisha seti ya safu wima zinazojumlisha hadi idadi ya safu wima za mzazi wake.

Safu wima ya kiwango cha 1

Kiwango cha 2

<div class = "safu" > 
  <div class = "span9" > 
    Safu wima ya kiwango cha 1
    <div class = "safu" > 
      <div class = "span6" > Kiwango cha 2 </div> 
      <div class = "span3" > Kiwango cha 2 </div> 
    </ div>
  </ div>
</ div>

Mfano wa gridi ya maji hai

Mfumo wa gridi ya maji hutumia percents badala ya pikseli kwa upana wa safu wima. Ina uwezo wa kuitikia sawa na mfumo wetu wa gridi isiyobadilika, inahakikisha uwiano ufaao wa maazimio na vifaa muhimu vya skrini.

HTML msingi wa gridi ya maji

Tengeneza safu mlalo yoyote "majimaji" kwa kubadilisha .rowhadi .row-fluid. Madarasa ya safu wima hukaa sawa, na kuifanya iwe rahisi kugeuza kati ya gridi zisizobadilika na za maji.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

Kupunguza maji

Hufanya kazi kwa njia sawa na urekebishaji wa mfumo wa gridi isiyobadilika: ongeza .offset*kwenye safu wima yoyote ili kurekebisha safu wima nyingi.

4 kurekebisha 4

3 kurekebisha 3

6 kurekebisha 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</ div>

Kuota kwa maji

Gridi za maji hutumia kutagia kwa njia tofauti: kila kiwango cha safu wima kinapaswa kuongezwa hadi safu 12. Hii ni kwa sababu gridi ya maji hutumia asilimia, si saizi, kwa kuweka upana.

Majimaji 12

Majimaji 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Majimaji 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        Majimaji 6
        <div class = "row-fluid" > 
          <div class = "span6" > Fluid 6 </div> 
          <div class = "span6" > Fluid 6 </div> 
        </ div>
      </ div>
      <div class = "span6" > Fluid 6 </div> 
    </ div>
  </ div>
</ div>

Mpangilio usiohamishika

Hutoa mpangilio wa kawaida wa upana usiobadilika (na inayoweza kuitikia kwa hiari) <div class="container">unaohitajika pekee.

<mwili>
  <div class = "chombo" > 
    ...
  </ div>
</ mwili>

Mpangilio wa maji

Unda ukurasa wa safu wima mbili na— <div class="container-fluid">nzuri kwa programu-tumizi na hati.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Maudhui ya Upau wa kando-->
    </ div>
    <div class = "span10" > 
      <!--Maudhui ya mwili-->
    </ div>
  </ div>
</ div>

Inawezesha vipengele vya kuitikia

Washa CSS inayojibu katika mradi wako kwa kujumuisha meta tagi inayofaa na laha ya ziada ya mtindo ndani ya <head>hati yako. Ikiwa umekusanya Bootstrap kutoka kwa ukurasa wa Geuza kukufaa, unahitaji tu kujumuisha meta tag.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Vichwa juu!Bootstrap haijumuishi vipengele vya kuitikia kwa chaguo-msingi kwa wakati huu kwani si kila kitu kinahitaji kutekelezwa. Badala ya kuhimiza wasanidi programu kuondoa kipengele hiki, tunaona ni vyema kukiwezesha inapohitajika.

Kuhusu Bootstrap msikivu

Hoja za midia huruhusu CSS maalum kulingana na idadi ya masharti—uwiano, upana, aina ya onyesho, n.k—lakini kwa kawaida hulenga min-widthna max-width.

Rekebisha upana wa safu kwenye gridi yetu
Vipengee vya mrundikano badala ya kuelea inapobidi
Badilisha ukubwa wa vichwa na maandishi ili yafae zaidi vifaa

Tumia maswali ya media kwa kuwajibika na kama mwanzo tu kwa hadhira yako ya rununu. Kwa miradi mikubwa, zingatia misingi maalum ya misimbo na si safu za hoja za midia.

Vifaa vinavyotumika

Bootstrap inaauni hoja chache za midia katika faili moja ili kusaidia kufanya miradi yako iwe sahihi zaidi kwenye vifaa tofauti na masuluhisho ya skrini. Hivi ndivyo vilivyojumuishwa:

Lebo	Upana wa mpangilio	Upana wa safu wima	Upana wa gutter
Onyesho kubwa	1200px na juu	70px	30px
Chaguomsingi	980px na juu	60px	20px
Vidonge vya picha	768px na zaidi	42px	20px
Simu kwa kompyuta kibao	767px na chini	Safu wima za maji, hakuna upana usiobadilika
Simu	480px na chini	Safu wima za maji, hakuna upana usiobadilika

/* Desktop kubwa */
@media ( min - upana : 1200px ) { ... }     
 
/* Picha kibao kwa mazingira na eneo-kazi */
@media ( min - width : 768px ) na ( max - width : 979px ) { ... }        
 
/* Simu ya mlalo ili kupiga picha ya kompyuta kibao */
@media ( max - width : 767px ) { ... }     
 
/* Simu za mazingira na chini */
@media ( max - width : 480px ) { ... }

Madarasa ya matumizi ya msikivu

Kwa maendeleo ya haraka ya kutumia simu ya mkononi, tumia madarasa haya ya matumizi kwa kuonyesha na kuficha maudhui kulingana na kifaa. Ifuatayo ni jedwali la madarasa yanayopatikana na athari zake kwenye mpangilio wa hoja ya media fulani (iliyowekwa lebo na kifaa). Wanaweza kupatikana katika responsive.less.

Darasa	Simu767px na chini	Vidonge979px hadi 768px	Kompyuta za mezaniChaguomsingi
`.visible-phone`	Inaonekana	Imefichwa	Imefichwa
`.visible-tablet`	Imefichwa	Inaonekana	Imefichwa
`.visible-desktop`	Imefichwa	Imefichwa	Inaonekana
`.hidden-phone`	Imefichwa	Inaonekana	Inaonekana
`.hidden-tablet`	Inaonekana	Imefichwa	Inaonekana
`.hidden-desktop`	Inaonekana	Inaonekana	Imefichwa

Wakati wa kutumia

Tumia kwa ukomo na uepuke kuunda matoleo tofauti kabisa ya tovuti moja. Badala yake, zitumie ili kukamilisha wasilisho la kila kifaa. Huduma za kuitikia hazipaswi kutumiwa pamoja na jedwali, na kwa hivyo hazitumiki.

Kesi ya majaribio ya huduma zinazojibu

Badilisha ukubwa wa kivinjari chako au upakie kwenye vifaa tofauti ili kujaribu aina zilizo hapo juu.

Inaonekana kwenye...

Alama za tiki za kijani zinaonyesha kuwa darasa linaonekana katika kituo chako cha kutazama cha sasa.

Simu✔ Simu
Kompyuta kibao✔ Kompyuta kibao
Eneo-kazi✔ Kompyuta ya mezani

Imefichwa kwenye...

Hapa, alama za tiki za kijani zinaonyesha kuwa darasa limefichwa kwenye kituo chako cha kutazama cha sasa.

Simu✔ Simu
Kompyuta kibao✔ Kompyuta kibao
Eneo-kazi✔ Kompyuta ya mezani

Mipangilio ya kimataifa