Come formattare testo con Bootstrap3 e classi hidden e visible.

Framework Bootstrap 3 viene fornito con molti stili incorporati, alcuni dei quali potrete sicuramente trovare utile. Tutte le varietà di stili  si possa  scoprire passando alla pagina uficiale di Bootstrap soto la voce  CSS di menu. Su quella pagina una volta aperta nella colonna sulla destra troverete varie voci e tra quelli una che si chiama Tipografia.

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

Formatare testo con Bootstrap

Cominciamo dalla pagina ufilicale di Bootstrap. Da questa pagina si capisce come saranno decorati  titoli da H1 a H6, posiamo scoprire che la dimensione di caratteri di default di Bootstrap sono pari a 14 pixel e l'altezza delle righe sarà di 20 pixel. E utilizzando il tag <p> nel ambito di  bootstrap noteremo notare  indentazione per ogni paragrafo di mezza riga. Per cambiare proprieta del tag si utilizzano classi CSS ( corso gratuiro dei CSS). Ad esempio, spesso per il primo paragrafo del articolo si utilizza un font più grande per aumentare la sua visibilità e attirare  lettore e suscitarlo a leggere l'articolo.

 

Nel bootstrap per realizzare lo steso effetto sarà sufficiente per tag del paragrafo scelto aggiungere la classe "lead"

<p class="lead">

Per questa riga ho aggiunto semplicemente la classe "lead"

Formattazione di testo, principali stili  di Bootstrap

In termini di formattazione di testo Bootstrap è molto simile al linguaggio classico Html, che consente, ad esempio, fare le seguenti cose:

 

  1. Evidenziare il codice nel testo con aiuto del tag <code>
  2. Evidenziare un framento del testo utilizando tag di apertura e chiusura speciali <mark>
  3. realizzare testo contrassegnato usando tag “S” nel apertura e chiusura <del> oppure <s>
  4. Testo sottolineato utilizando tag “u” <ins> o <u>
  5. Diminuire font del testo selezionato con l'aiuto del tag di appertura e chuisura “small” <small>
  6. Evidenziare in grasseto o corsivo con aiuto di tag <strong> e <em>
  7. Allineamento del testo nel contenitore, per esempio, al bordo destro - aggiungendo classe text-right
  8. Oppure centrarlo - aggiungendo classe text-center
  9. Fare citazioni utilizzando i tag <blockquote>
  10. Inversione del 'allineamento del testo in una citazione con l'aggiunta al tag<blockquote> classe blockquote-reverse

 

Quindi come avete visto basta aggiungere rispettivo tag  HTML come per esempio <del > al pezzo scelto per realizzare testo cancellato o <u> per sottolinearlo. Vorrei anche far notare che posiamo sempre modificare gli stili di Bootstrp che non ci piacciono creando dei stili propri in un altro fail css e indicare per esempio per il tag <h4> che crea un titolo di quarto livello uno stile personalizzato. Invece dello stile di default che è  h4{Semibold 18px} indicare per esempio altezza di 14 px e un altro tipo di robustezza di font come 300 invece di 500 unita per esempio. Cosi avremo h4{font-size:14px, font-weight:300}
Il resto non e tanto difficile da capire se conosci gia linguaggi CSS ed HTML perche in realta Bootsrap come qualsiasi altro framework semplicemente presenta la sua visone di come modificare testo. Ma si bassa sempre sul linguaggi CSS ed HTML.

Potete anche notare che questa pagina del nostro sito e diversa dalle altre basta aprire qualsiasi link in un altra scheda del browser e vedrete la differenza nei colori del testo e la sua formattazione come per esempio nuvola di tag. E perche su questa pagina abbiamo utilizzato gli stili predefiniti di Botstrap  per formattazione del testo. Proprio per mostrarli a te!

Classi specilai  di Bootstrap 3 (nascondere e visualizzare hidden e visible) dove posiamo utilizzarli ?

In questo articolo, gli scrinchot li ho fatto dalla pagina che abbiamo creato nei articoli precedenti. Quindi ti consiglio di rileggere articoli precedenti legati a Bootstrap e scaricare la  pagina con il framework bootstrap e rispettivi stili, per poter fare delle prove insieme con me.

Nella nostra pagina che abbiamo creato abbiamo anche configurato la sistema a griglia che modifica la posizione dei blocchi del contenuto nel ordine voluto quando si cambia la larghezza della finestra del browser. Tuttavia, puo capitare che quando si visualizza la pagina su un  schermo piccolo, alcuni elementi di design sono inutili (non rilevanti, ad esempio, sullo smartphone).

Cosa voglio dire? Nel file della nostra pagina la riga superiore (ricordo che rige nel Bootstrap vengono formati con l'aiuto di classe = "row") mostra il titolo e descrizione del sito, così come il suo logo. Così, con la diminuzione della larghezza dello schermo, si arriva alla situazione in cui il logo si posiziona sotto il titolo, e solo dopo segue il contenuto del sito:

img7 2

 

In linea di principio, sarebbe opportuno che logo su dispositivi di piccole dimensioni vvera rimosso (soprattutto se è anche grande), perché non porta nessun significato e puo soltanto disorientare visitatore del sito, che acede alla nostra pagina tramite un dispositivo con un schermo piu piccolo di 768 pixel.

Classi hidden e visible  in Bootstrap.

Cosa si può fare?

Utilizzare classi speciali hidden e visible. Tuttavia, vorrei subito precisare che con utilizzo di questi classi nasconderemo soltanto il logo del nostro sito ma il disegno del logo vera caricato lo stesso sul dispositivo o piu precisamente sul browser del utente.

Per una soluzione radicale al problema esistono metodi di Java-script, ma in questo articolo prendiamo in esame soltanto le possibilità di Bootstrap, e quindi il loro uso. Così, per chiarezza passiamo alla pagina del sito uficiale di Bootstrap che si chiama "utilities Responsive" dal menu a sinistra, che a sua volta viene visualizzata quando si fa clic sulla scheda «CSS» dal menu in alto. Li possiamo vedere una tabella di funzionamento di queste classi per i diversi formati di schermi su cui viene visualizzato il sito:.

dis7 2

 

Presente serie di classi è responsabile per la mappatura dei singoli elementi sulla pagina web a seconda  le dimensioni dello schermo. Attraverso trattino vengono indicati  anche le dimensioni della griglia  per cui sono destinati (ricordiamo che ci sono quattro dimensioni - molto piccoli xs, piccolo sm, md media e largo o grande lg).

Proprio classe hidden solo ci permetteo di realizzare il nostro obiettivo - nascondere elemento (logo), al ridimensionamento della risoluzione dello schermo (finestra del browser) al di sotto dei 768 pixel di larghezza. Cio significa che avremo bisogno di usare una classe hidden-xs  per questo ellemento prescindere dalla tabella di cui sopra. Come fare? Abbastanza semplice. Trovate nel codice della nostra pagina il tag che introduce il logo sulla pagina e semplicemente agiungere a questo tag IMG la classe  hidden-xs (<img class=”hidden-xs”...).

Di conseguenza, a basse risoluzioni logo semplicemente scompare, e non passa piu sotto il nome della pagina
Vediamo a schermo largo e a quello piccolo.
img7 5
img7 6

Riguardo le altre possibilità di utilizzo di classi ti invito di scoprirli da solo.

Per cambiare la largezza della finestra del browser e per testare varie opzioni di Bootstrap utilizzo voce Sviluppo dal menu a destra di Firefox.

Oppure combinazione di tasti Ctrl+Maiusc+M come si vede dal sottomenu.

img7 7

img7 8

 

Ok per oggi è tutto alla prosima. Dove vediamo come realizzare buttoni.

Qui sotto potete scaricare i fail relativi alla lezione. Ciao!

Letto 2088 volte