Come creare header di una pagina web utilizzando Bootstrap 3.

Facciamo un altro sperimento sempre con la nostra pagina sito.html e proviamo di sistemare anche la nostra prima e seconda riga della pagina utilizando la  sistema a griglia per la prima riga, che contiene due potenziali colonne  - il nome del sito con la descrizione e il logo. In realtà, proviamo di riposizionarli .

Principali nozioni su Bootstrap.

  1. Introduzione a Bootstrap
  2. Colegare fail di bootstrap
  3. La sistema a grglia
  4. Offset in Bootstrp. Spazio fra le colonne
  5. Ordine delle colonne
  6. La prima pagina html su Bootstrap
  7. Header con bootstrap
  8. Come realizzare menu responsive con Bootstrap
  9. Formatazione del testo.
  10. Come creare bottoni con Bootstrap
  11. Come rendere immagini responsive con Bootstrap
  12. Carosello bootstrap
  13. Bricioli di pane con Bootstrap
  14. Come realizzare accordeon

Creare header della pagina con Bootstrap

Vediamo di usare in questo caso la griglia piu grande  "col-lg"  e per ottenere due colonne uguali dovremo come avete capito utilizzare la classe "col-lg-6".due colone da 6 unita faranno insieme 12 e riemperano una riga class="row" intera.

 

<!-- 1 row -->
<div class="row"><!--appertura  della riga -->
    <div class="col-lg-6"><!-tag di appertura  della colonna con il nome e decrizzione -->
        <a href="#"><h1>www.ioeweb.it</h1></a>
        <p>Come costruire un sito, Joomla, html,css, lezioni di jomla, infobusiness </p>
    </div>
    <div class="col-lg-6"><!--appertura  colonna con il logo-->
        <img src="/img/ioeweb_logo.png" alt="">
    </div>
</div><!--chiusura del tag con la classe row della sistema Bootstrap-->

Come potete vedere ho creato una nova scatola grande <div class="row"></div>, dopo di che ho creato due scatole piu piccole <div class="col-lg-6">, che contengono nome e descrizione del sito nella prima  e nella seconda il logo del sito.  Ok. Provate di fare la stessa cosa anche voi al interno del vostro fail sito.html dalla lezione precedente.

Vediamo il risultato

Prima :

dis4 0Dopo
dis4 1

Pero, se si utilizza la classe della colonna larga lg la rottura della riga avviene alle larghezze dello schermo piuttosto alte  quando andiamo sotto 992 px  (la finestra del browser, nel nostro caso, perché abbiamo fatto simulare dispositivi vari cambiando la larghezza dello schermo ).  Dopo di che i nostri blocchi di novo si rimettono in verticale. Per evitare questo, si aggiungere un'altra classe Bootstrap 3 per la prima e seconda scatole . Penso che si possa utilizzare la classe piccola (classe con prefisso col-sm) nel nostro caso, dato che di materiale da visualizzare c'e ne poco. Quindi il codice diventera come questo:

<!-- 1 riga -->
<div class="row"><!--appertura  riga con la classe row-->
    <div class="col-lg-6 col-sm-8"><!--appertura  colonna con il nome e decrizzione -->
        <a href="#"><h1>www.ioeweb.it</h1></a>
        <p>Come costruire un sito, Joomla, html,css, lezioni di jomla, infobusiness </p>
    </div>
    <div class="col-lg-6 col-sm-4"><!--appertura  colonna con il logo e decrizzione con sistema Bootstrap-->
        <img src="/img/ioeweb_logo.png" alt="">
    </div>
</div><!--chiusura riga della  sistema Bootstrap-->

Tuttavia, non ho fatto colonne della griglia uguali 6 e 6 con il nome del sito e logo   ma 8 e 4  unita, perché il logo è molto più stretto rispetto il titolo con la descrizione. Con una larghezza ridotta  dello schermo non sarebbe logico  assegnare a loro la parità di largezza. Ecco perché ho fatto la prima colonna con il nome e la descrizione del sito nella  piccola sistema di griglia bootstrap due volte piu larga di quella  con il logo.
dis4 2

Di conseguenza, con restringimento della finestra del browser,  le nostre due colonne rimanerano affincate fino al punto di rottura previsto dalla sistema  sistema picola della griglia di bootstrap, che succedera  con una larghezza inferiore a 768px, e quindi le nostre colonne-scatole saranno posizionati una sopra l'altro.

Probabilmente hai notato che il testo della pagina  è troppo attaccato al lato sinistro dello schermo, che provoca una sensazione di dissonanza. È possibile  correggere questa situazione aggiungendo per il tag body proprietà padding  che respingerà il contenuto della pagina dai bordi dell'area di visualizzazione. Pero  è possibile risolvere questa situazione anche con i mezzi standard di Bootstrap 3.

Per fare questo, tutto il contenuto della pagina  (tutto ciò che si trova fra i tag body ) inserire nel contenitore con la  classe - <div class = "container">. Mettere questo tag con la classe container subito dopo il tag body e chiuderlo sempre prima della chiusura del tag </body> Dopo di che il testo non sarà più appoggiato sulla finestra del browser.

Inoltre, è possibile vedere che le immagini d'annunci si avvicinano troppo con la diminuzione della larghezza dello schermo. Il fatto è che essi non sono ancora "responsive", ma lo faremo nei seguenti articoli nel ambito di questo ciclo di articoli.

Letto 1100 volte