Sito Responsive.. e bootstrap (molti dubbi)

[Pandax]

Ciao a tutti mi sono stati chiesti dei siti responsive e quindi sto cercando di capire come realizzarli nel modo migliore.

Mi è stato consigliato l'uso di bootstrap che da quanto ho capito mette a disposizione una serie di elementi prefatti ... che si possono poi personalizzare graficamente tramite css
Oltre a una costruzione a griglia a 12 colonne preimpostata con delle classi css.

Di responsive.. a me pare che ci sia la griglia.. ho visto degli esempi che mostrano come impostare i div in modo che occupino un tot di colonne...ma per gestire una grafica con div annidati o comunque un po più complessa come si va?

I margin ... i padding... i border... i font ....solitamente li gestisco in pixel ma così non sarebbe responsive... quindi come dovrei gestirli, potreste farmi un esempio?

Con bootstrap... devo fare un css in cui mettere le media query per gestire in modo responsive queste cose? nel caso però poi dovrei usare le stesse dimensioni usate in bootstrap ... dove le trovo?

@media only screenand (min-width: 1200px) {
}
@media only screen and (max-width: 1199px) {

}
@media only screen and (max-width: 991px) {

}
@media only screen and (max-width: 767px) {

}

Cioè non riesco bene a capire se bootstrap mi aiuti e quanto nel creare un sito responsive...
perchè se l'unico elemento è la griglia a 12 colonne.. con un po di css, credo riuscirei a ricrearmela senza dover usare bootstrap...

ad esempio per fare una cosa come questa..



ho provato a buttar giu un po di codice usando...bootstrap..
ma come si nota.. ho usato solo la class col-sm-6... e in ogni caso...non è ancora totalmente responsive, dovrei sistemare almeno il testo.. in modo che si adatti.
ma anche il border..non si adatta visto che è in pixel...
e il riguadro non risulta sempre quadrato.. ma mi taglia lo sfondo conforme la risoluzione.. perchè ok il layout a colonne mi mantiene una dimensione del 50%... ma in altezza..non si regola..
qualcuno saprebbe darmi una schiarita alle idee...
Grazie a chiunque risponda.

<div style="background:url(img/pencil-3.jpg) center center no-repeat;  -webkit-background-size: cover;    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; min-height:460px; border-radius:5px; border:10px solid #FFFFFF; " class="col-sm-6">
    
        <div style="background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 40%; position: absolute; bottom: 0px; left: 0px; padding: 5px; color: #ffffff; font-size: 28px; line-height: 30px;">
        Menu siriano libanese con fragole, noci e tartarughe vive
        </div>
    
  </div>

[theseo]

io ho imparato ad usare bootstrap leggendo questa guida
http://www.mrwebmaster.it/web-design...ida-bootstrap/