Come fare una pagina HTML in Bootstrap.

Per capire meglio  funzionamento della sistema a griglia di Bootstrap creeremo una pagina HTML,  una pagina web vera  (con heder, testo, contenuti grafici, futer) e vediamo di sistemarla con la sistema a griglia di Bootstrap 3.

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 una pagina html in Bootstrap, inizio.

Più precisamente, io  creerò una pagina come nella lezione precedente che si chiamerà sito.html,  (cliccanre sul link, con il tasto destro del mouse e selezionare dal menu a comparsa, "Salva destinazione con nome  ..."), per puoi gia insieme aggiungere a questa bozza della pagina varie classi di Bootstrap per renderla responsiva utilizzando la  sistema a griglia. Sarà inoltre necessario mettere il nostro nuovo fail  nella  cartella di Bootstrap allo stesso livello con index.html come descritto qui .

Se apriamo il fai scaricato sito.html in un editore del codice per esempio, notepad++, si potra notare che ho gia creato collegamenti a fail di  Bootstrap e jQuery, e ho aggiunto del contenuto  per simulare l'aspetto di una  pagina web vera.  Ho preparato anche immagini per poter utilizzarli sulla nostra pagina sito.html. Potete scaricare la cartella con le immagini qui img.zip. Basta decomprimere il file e inserire le immagini in essa contenuti nella cartella che abbiamo già  img. Alla fine avremo una struttura come illustrato sul disegno:

cart1

Ora aprite il fail sito.html nel vostro browser e potete vedere la pagina completata che avevo preparato con del testo e delle immagini. Potete anche notare che tutti i blocchi sono sovrapposti il cio rende la nostra pagina pocco piacevole.  Sarebbe logico di dividere contenuto per colonne e renderla responsiva la paggina  cio è  che sullo schermo grande le colonne affiancano una l'altra e solo con diminuzione dello schermo si cambia la loro posizione a secondo dello spazio disponibile sul dispositivo.

dis4 11

Aprendo il fail sito.html in un editore del codice potrai anche  notare che ho inserito anche dei commenti per dividere i nostri blocchi e mostrare i loro confini. E proprio questi confini utilizzeremo per personalizzare le nostre colonne col sistema a griglia di Bootstrap. Abbiamo soltanto 4 blocchi ( li ho numerati)  il header (con il nome del sito e logo),  il titolo e il contenuto della pagina (contenuto principale e composto da  quattro articoli di annunci) e il futer della  pagina.

Ora abbiamo bisogno di aggiungere al nostro codice del fail sito.html la sistema a griglia di bootstrap, che dividera il contenuto in rige e colonne . Per creare le rige utilizeremo tag <div></div>  e ad ogni div  attribuiremo la  classe class = "row" . E la nostra prima riga  avrà questo aspetto :

<!-- 1 riga -->
<div class="row">
    <a href="#"><h1>www.ioeweb.it</h1></a>
    <p>Come costruire un sito, Joomla, html,css, lezioni di joomla, infobusiness </p>
    <img src="/img/webcamxp.png" alt="">
</div>

La stessa cosa facciamo con tutte le altre rige, mettiamo il tag di apertura <div class = "row"> all'inizio della riga  e il tag </ div>  alla fine.

Come utilizzare varie calssi di colonne di Bootstrap

Ora passiamo alla formazione di colonnee nelle righe dove c'e senso di farlo. Sarebbe logico collocare gli annunci di articoli (numero 3 guarda disegno) nelle quattro colonne, e con una diminuzione della larghezza dello schermo fare in modo che  questi quattro colonne vengono convertiti in due.Come farlo? Vediamo.

Come sapiamo in Bootstrap 3 ci sono 12 colonne, di cui abbiamo parlato prima. Abbiamo pensato  di fare quattro colonne con annunci, allora sarebbe logico renderli uguali come larghezza e quindi ogni blocco destino ad un anuncio avra la larghezza di tre colonne dalla nostra  sistema a griglia invisibile (indipendentemente dalla grandezza che abbiamo scelto – molto piccola , piccola, media o grande).

Per implementare il concetto, dobbiamo "avvolgere"  i nostri blocchi di nuovo nel div  (in questo caso, essi comprenderanno immagine, Html codice, titolo, testo e link  "Leggi tutto"), al quale assegniamo dei classi dal arsenale di bootstrap con i prefissi necessari. Ripeto ancora utilizzeremo tag <div></div> per condividere i nostri annunci.

Quale misura del prefisso della classe scegliere per questo lavoro? Prendiamo la classe della griglia media per l'inizio come un compromesso. In questo caso, a tutti i quattro box dovremo aggiungere una classe «col-md-3» - <div class = "col-md-3">. Vediamo un fragmento del codice, una singolo box-colonna , in modo da non ingombrare l'articolo:

<div class="row">
    <div class="col-md-3">
        <p><img src="/img/css_practice.png" width="70" height="90" alt=""></p>
        <h4>Css pratica</h4>
        <p>Durante i 35 lezioni noi insieme creeremo un templates di un sito da una immagine in formato PSD, pronto per essere visualizzato in qualsiasi browser moderno.Le nozioni che aquisterete vi darrano la possibilita di creare qulsiasi templates, perche in questo corso scopriremo tutti i principi utilizzati nella creazione di una paggina web.Cio sinifica che potrete transformare qualsiasi disegnio di una paggina web shelto per il vostro sito in un teplates. Creato seguendo tutte le regole della scrittura del codice.
</p>
<div>/* tag  di chiusura del div con la classe "col-md-3"*/
......../*div con il conetuto con la classe "col-md-3"*/
......../* div con il conetuto con la classe "col-md-3"*/
......./*div con il conetuto con la classe "col-md-3"*/
</div>/* tag  di chiusura del div con la classe row*/

Ricarichiamo la pagina dopo le modifiche riportate e vediamo risultato
dis2 11

Tuttavia, con la diminuzione della finestra del browser  al punto di rottura (nel caso in cui si usa la griglia media sarà 992 pixel), tutti gli annunci di nuovo verranno sovrapposti in una colonna che non è un bene per l'usabilità, che in questo caso si riduce (risoluzione di quasi 1.000 pixel permette ancora di inserire come nel nostro caso almeno 2 colonne di annunci affiancate ). Per risolvere questo problema, è possibile aggiungere un'altra classe con un altra misura  dall'arsenale di bootstrap . Come fare? Vediamo.

Aggiungiamo la misura piu piccola della bootstrap utilizzando il prefisso «Col-xs-6" per ogni   classe in ogni blocco con l'annuncio (il risultato sarà una classe  molteplice = "col-md-3 col-xs-6"). Essa sarà simile a questa (l'esempio di un singolo box)

    <div class="col-md-3 col-xs-6">
        <p><img src="/img/css_practice.png" width="70" height="90" alt=""></p>
        <h4>Css pratica</h4>
        <p>Durante i 35 lezioni noi insieme creeremo un templates di un sito da una immagine in formato PSD, pronto per essere visualizzato in qualsiasi browser moderno.Le nozioni che aquisterete vi darrano la possibilita di creare qulsiasi templates, perche in questo corso scopriremo tutti i principi utilizzati nella creazione di una paggina web.Cio sinifica che potrete transformare qualsiasi disegnio di una paggina web shelto per il vostro sito in un teplates. Creato seguendo tutte le regole della scrittura del codice.
</p>
</div>

Perché xs6? Penso che avete capito. Due blocchi da 6 per creare due colonne affiancate di annunci, nel nostro caso, nello schermo con la largezza sotto i 992 px  e che nella somma dovranno fare 12 colonne della sistema di bootstrap.

dis2 12

 Dato che abbiamo scelto la classe  di griglia xs, con un'ulteriore riduzione della larghezza della  finestra del browser i nostri 2 colonne rimangono e non si sposterano una sotto altra anche se visualizziomo la nostra pagina su un schermo molto piccolo . Spero che avete capito il perche. Semplicemente perche abbiamo usato la sistema piu picola xs, provate di sostituire con quella piccola sm e vedrete la differenza. Quindi se volete che le vostre quatro colonne si trasformeranno prima in due e puoi in una sola  dobbiamo utilizzare non "col-xs-6" ma penso che avete capito "col-sm-6"

<div class="col-md-3 col-sm-6">
        <p><img src="/img/css_practice.png" width="70" height="90" alt=""></p>
        <h4>Css pratica</h4>
        <p>Durante i 35 lezioni noi insieme creeremo un templates di un sito da una immagine in formato PSD, pronto per essere visualizzato in qualsiasi browser moderno.Le nozioni che aquisterete vi darrano la possibilita di creare qulsiasi templates, perche in questo corso scopriremo tutti i principi utilizzati nella creazione di una paggina web. Il cio sinifica che potrete transformare qualsiasi disegnio di una paggina web shelto per il vostro sito in un teplates. Creato seguendo tutte le regole della scrittura del codice.
</p>
        <p><a  target="_blank" href="http://www.ioeweb.it/corso12/">Leggi tutto...</a></p>
    </div>    

Allora , con la diminuzione della larghezza della finestra del browser sotto 768, si vedrà la demolizione, in cui due colonne con annunci si trasformeranno in una. Provate  e vedrete  la differenza.

Ok per oggi è tutto alla prossima.

 
Letto 1495 volte