Bootstrap első megakadás…

Eljutottam a Bootstrapig és a Codeberry leírása elsőre “nem jött át”. Nekiugrottam még egyszer és még egyszer, de nem állt össze a kép.

“A col-xs- után álló szám mutatja, hogy milyen széles az oszlop. A fenti példában az első sorban mindkét oszlop 6 széles (összesen 6+6 = 12), a második sorban mindhárom oszlop 4 széles (összesen 4+4+4 = 12), a harmadik sorban mind a négy oszlop 3 széles (összesen 3+3+3+3 = 12).” 6 széles mi?

Ez a szélesség dolog nem volt világos. Félretettem, rápihentem, majd nekiugrottam újra és összeállt.

Megfogalmaztam magam szájíze szerint és ez annyira megtetszett, hogy muszáj volt írni róla egy blog bejegyzést. 🙂

12 egységből áll egy oszlop. A col-xs- után álló szám mutatja hány egységet foglal el egy oszlop. A fenti idézetet átírva: “A col-xs- után álló szám mutatja, hogy hány egység széles az oszlop. A fenti példában az első sorban mindkét oszlop 6 egység széles (összesen 6+6 = 12), a második sorban mindhárom oszlop 4 egység széles (összesen 4+4+4 = 12), a harmadik sorban mind a négy oszlop 3 egység széles (összesen 3+3+3+3 = 12).”

Persze, tudom nem egy hatalmas felfedezés, de Nekem segített ez az egy kis szó.

 

HTML és CSS

HTML

<title>Az oldal címe</title>

<h1>A legfontosabb címsor</h1>
<h6>A legkisebb címsor</h6>

<figure>
  <img src="http://a-kep-cime.jpg" alt="alternatív szöveg">
  <figcaption>Képaláírás</figcaption>
</figure>

<article>
  <p>Bekezdés <a href="http://link-valahova.hu" title="A hivatkozott oldal címe">egy kattintható linkkel</a></p>
  <p>Egy másik bekezdés <strong>kiemelten hangsúlyos tartalommal</strong>.</p>
</article>

CSS

h1 {
  color:          rgba(0,0,0,.8);     // szín, (piros, zöld, kék, átlátszóság)
  font-family:    serif;              // betűtípus
  font-size:      36px;               // betűméret
  line-height:    1.58;               // sormagasság
  letter-spacing: -.003em;            // betűköz
  text-align:     center;             // szöveg igazítása
}

img {
  height:         auto;               // magasság
  width:          100%;               // szélesség
}

figure {
  margin:         0;                  // margó
}

article {
  margin:         0 auto;             // középre rendezett
}

a:hover {
                                      // az egér éppen ide mutat állapot
}