Come modificare l'ordine delle colonne utilizzando Push and Pull

Vediamo di crearci un problema per  poi risolverla con strumenti di  Bootstrap. Supponiamo che nel nostro esempio precedente, la prima colonna (circa Css pratica)  ha una importanza secondaria  e sarebbe solo il componente aggiuntivo alla seconda colonna   (circa PhpDesigner). Questa situazione può verificarsi in qualche vostra pagina, e a prima vista non vi è nulla di sbagliato in questo.

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

Modifficare ordine di colonne con Push and Pull

Ma ci sono due momenti particolari che possono costringerti ad utilizzare le classi push e pull, che ci permettono di cambiare la sequenza di colonne (cambiare il loro ordine).

In primo luogo, in termini di SEO, la piu alta posizione di un certo blocco html  sulla pagina web dovrebbe corrispondere al suo maggiore valore, e piu andiamo in basso meno valore ha. Questo diventa particolarmente importante quando tentiamo di riportare il nostro sito nel top 10 con centinaia o addirittura migliaia di concorrenti. Allora qualsiasi piccola cosa può influenzare il ranking delle tue pagine web per i  motori di ricerca. Allo stesso tempo, cambiare la posizione di una  colonna (per rialzare sulla pagina  articolo principale) può essere dannoso in termini di usabilità.

In secondo luogo, se si riduce la larghezza della finestra del browser, fino al  punto di rottura  nel 768 si vedrà che le colonne verano riposizionati in  verticale. Tuttavia, la prima colonna alla sinistra sarà anche prima nella versione in ordine verticale, mentre il contenuto principale è concluso nella seconda colonna.
dis6 1
Sarebbe logico prima offrire a lettore il testo principale, e poi il resto.

E proprio per questa situazione e per molti altri problemi(che non puoi adesso nemmeno immaginare ),  si possa utilizzare la nuova funzionalità di Bootsrap 3. Questo viene fatto usando le classi di cui sopra push e pull.

Come funzionano Push and Pull?

Beh, prima  nel codice sorgente vedimo di cambiare le posizioni di anunci dal esempio . Otteniamo qualcosa  simile.

<div class="row">
    <div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1">
        <p><img src="/img/PhpDesigener.png" width="70" height="90" alt=""></p>
        <h4>PhpDesigner</h4>
        <p>Durante questo piccolo corso impari ad usare il programma "PhpDesigner", che ti permette di velocizzare il processo della scrittura del codice per qualsiasi sito web, perche ha una interfaccia molto comoda, strumenti utilissimi, sono presenti autocorrezione e suggerimento per tutti i tag di linguaggio HTML o proprietà CSS. Proprio questo programma sto utilizzando nei miei corsi "Css pratica" e "Sito web da 0"</p>
         <p><a  target="_blank" href="http://www.ioeweb.it/PhpDesigner/">Leggi tutto...</a></p>
    </div>
    <div class="col-lg-3 col-sm-4">
        <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 bser moderno.</p>
        <p><a  target="_blank" href="http://www.ioeweb.it/corso12/">Leggi tutto...</a></p>
    </div>    
</div>

Con questo risolveremo i problemi sopra citati, ottimizzero la pagina in termini di SEO, e diminuendo la larghezza dello schermo, fino a riposizionamento di colonne in verticali, all'inizio avrò il contenuto più importante. Tuttavia, sulla  pagina web  ora alla sinistra avrò il blocco principale e alla destra il secondario. A volte, per ragioni di usabilità (o per qualche altra ragione ) puo 'essere inaccettabile.
dis 6 2

Con classi push e pull  si puo fare in modo che  il browser dell'utente visualizza ancora la prima colonna a sinistra come era al inizio  (con il blocco di informazioni di valore secondario ma che nel codice html questo blocco secondario sarà posizionato sotto il blocco principale ). Cio è creeremo una sorta di illusione ottica. Come farlo? Questa situazione riguarda particolarmente i vari  menu e il contenuto. Prima vorrei mostrare su un schermo piccolo il mio articolo e solo dopo il bloccco con menu. Anche se su uno scermo grande sulla sinistra ho il mio menu e solo dopo il mio articolo.

Ok, il blocco principale  (nel nostro caso “PhpDesigner” con classe class = "col-lg-8 col-lg-offset 1 col-sm-7 col--sm Offset-1") avremo bisogno di spostare a destra per tanto spazio quanto occupa il bloco “Css pratica”   (che ha la classe  class = "col-lg-3 col-sm-4"). Per fare questo, usiamo la classe push  (spinta a destra) dal arsenale di Bootstrap, vale a dire per la griglia  grande  col-lg-push-3, e per quella piccola   - col-sm-push-4. I numeri li ho presi dalla classe del blocco secondario, perché proprio esso che dovrò mettere sulla destra del blocco principale.

<!-- 3 riga -->
<div class="row">
    <div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1 col-lg-push-3 col-sm-push-4">
        <p><img src="/img/PhpDesigener.png" width="70" height="90" alt=""></p>
        <h4>PhpDesigner</h4>
        <p>Durante questo piccolo corso impari ad usare il programma "PhpDesigner", che ti permette di velocizzare il processo della scrittura del codice per qualsiasi sito web, perche ha una interfaccia molto comoda, strumenti utilissimi, sono presenti autocorrezione e suggerimento per tutti i tag di linguaggio HTML o proprietà CSS. Proprio questo programma sto utilizzando nei miei corsi "Css pratica" e "Sito web da 0"</p>
         <p><a  target="_blank" href="http://www.ioeweb.it/PhpDesigner/">Leggi tutto...</a></p>
    </div>

Ed  ecco il risultato provvisorio:
dis6 3
È evidente ora che blocco secondario (Css pratica) deve essere spostato a sinistra per un  numero di cellule (cellule), quanto occupava come largezza  il blocco principale  in modo che non si sovrappongano. Con semplici calcoli scopriamo che è necessario utilizzare per il classe pull  (tirare verso sinistra) dal arsenale  Bootstrap seguenti valori:

    Per la griglia  grande col-lg-8 (larghezza del contenuto) più col-lg-offset 1 (la larghezza dello spazio vuoto  ) dovremo indicare spostamento per 9 unita . Quindi avremo un classe  class="col-lg-pull-9".
    Per la griglia piccola  o col-sm-7 più col-sm-offset 1, in totale abbiamo 8   e avremo la sua classe  class="col-sm-pull-8"

<!-- 3 riga -->
<div class="row">
    <div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1 col-lg-push-3 col-sm-push-4">
        <p><img src="/img/PhpDesigener.png" width="70" height="90" alt=""></p>
        <h4>PhpDesigner</h4>
        <p>Durante questo piccolo corso impari ad usare il programma "PhpDesigner", che ti permette di velocizzare il processo della scrittura del codice per qualsiasi sito web, perche ha una interfaccia molto comoda, strumenti utilissimi, sono presenti autocorrezione e suggerimento per tutti i tag di linguaggio HTML o proprietà CSS. Proprio questo programma sto utilizzando nei miei corsi "Css pratica" e "Sito web da 0"</p>
         <p><a  target="_blank" href="http://www.ioeweb.it/PhpDesigner/">Leggi tutto...</a></p>
    </div>
    <div class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">
        <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 bser moderno.</p>
        <p><a  target="_blank" href="http://www.ioeweb.it/corso12/">Leggi tutto...</a></p>
    </div>    
</div>

dis6 4

Vediamo il nostro risultato  tutte le cose andati al suo posto, anche se nel codice html il blocco sinistro con valore secondario si trova sotto il blocco destro con valore primario del contenuto.  Abbiamo ottenuto quello che volevamo.

Letto 1858 volte