Bootstrap rows and columns

First of all: it’s Bootstrap, not bootstamp…

Bootstrap is a mobile-first framework for making websites. It has custom classes and elements and also redefines the style of some html tags.

The main idea is that it divides the page/screen to rows and columns. Rows are 12 units wide, columns can be 1-12. The unit is the 1/12th of the including object (row or column).

Unique breakpoints can be set for different screen sizes. Important note: all declarations have an efffect for its screen size and all of the ones above it (if not overwritten).

  • xs: extra small, for smartphones
  • sm: small, for tablets
  • md: for desktop
  • lg: large, for large screens

For easier positioning, column-offsets can be added for each screen sizes.

  • <div class="col-md-6 col-xs-12">
          <div class="row">
            <div class="col-xs-4">Ide kisebb dolgokat pakolok be. Talán ha ezeket hosszabbra írom...</div>
            <div class="col-xs-4">Pl. ilyen kis szövegeket.</div>
            <div class="col-xs-4">Először 4 belső oszlopot akartam.</div>
          </div>
          
          <div class="row">
             <div class="col-xs-4 col-xs-offset-4">Jó lenne valami függőleges offset is, mert így nem különülnek el a celláim :(</div>  
          </div>
          
        <div class="row">
          <div class="col-xs-12">Eléggé átláthatatlan már így is a kód, valahogy meg kellene különböztetni a sorokat-oszlopokat. Legalább kommentekkel.</div>
        </div>
        </div>

     

JS basics – Col(h)our

JavaScript basics:

  • JS commands run in the Console of the browser
  • new variables can be defined as:
    var a = 21;                /* integer */
    var b = 'string '         /* string */

     

  • print into the console with:
    console.log('Hello, " + "World!');

     

  • access member functions with “.”:
    var date = new Date();
    var hours = date.getHour();

     

  • access the HTML via the “document” object
    document.getElementById('clock').innerHTML = 'hello world';

     

  • run functions periodically:
    setTimeout(function(){  }, 5000);

Kompozíció vörössel, sárgával és kékkel

I learned the following from this exercise (https://jsbin.com/nupajek):

  • <div></div>: “division” to encapsulate content
  • every html tag can have a unique id in order to handle them differently in CSS. In html:
    <div id="canvas">...</div>

    In CSS:

    #canvas {...
    }

     

  • child inherits all properties of its parent
  • measurements of an object can be set by the percentage of the containging object
    #first-row {
    height: 75%;
    }

     

  • object can be assigned to one or more classes. In html:
    <div id="big-rectangle" class="red right">...</div>

    In CSS:

    .red {
    ...
    }

First steps

I decided to write this blog in English in order to practice the language. I’m not keen on it, since I find hard to understand my own code if I write comments in English. Maybe learning and making notes are different…

So, let’s go! 🙂

#include <iostream>

int main()
{
     std::cout << "Hello World!";
     return 0;
}

(This is a C++ code ‘coz that’s the only programming language I know 😛 )