Esempi di utilizzo Bootstrap

[alexred]

Su Joomla 3.0 è presente il Bootstrap che mette a disposizione stili ed icone predefiniti, ho provato a creare una pagina dimostrativo, tipo il Typography, dove raccogliere alcuni esempi semplici di utilizzo del codice che vale su tutti i template che utilizziamo!

Se riusciamo a creare una bella pagina credo sia utile inserirla nei dati di esempio nel pacchetto localizzato, così è facilmente a disposizione di tutti.
Questa la pagina di prova: http://demo.joomlahost.it/30test/index.php/notizie/3-esempi-di-utilizzo-bootstrap

Aiutatemi a capire se il codice utilizzato è corretto e se ci sono altre interessanti ed utili caratteristiche da inserire.
Non ho trovato niente per inserire una parte di testo all'interno di un paragrafo, allineando questa parte di testo in un rettangolino a destra o a sinistra del testo.
Non saprei nemmeno quale possa essere il codice corretto per allineare un icona da un testo, fare in modo che l'icona grande rimanga a sinistra ed il testo gli gira tutto intorno.

Grazie per l'aiuto

EDIT: modificato il link alla pagina dimostrativa

[alexred]

Ho notato anche una cosa strana, installando la 3.0.1 localizzata con i dati di esempio italiani il modulo del percorso si trova in basso. Non mi sembra una buona soluzione e proporrei di provare a metterlo nella posizione position-3  nei nostri dati di esempio, così da apparire proprio sotto l'immagine in alto.

EDIT: è anche necessario nel modulo "Percorso" nelle opzioni base impostare su NO il Mostra "Sei qui"
perchè altrimenti si perde la validazione W3C            

[alexred]

il link alle icone che ho messo nella pagina non mostra tutte le effettive icone presenti in Joomla 3.0,
ho creato una pagina con tutte le icone
forse anche questa sarebbe utile da inserire nei dati di esempio.

Non riesco ancora a gestire al meglio le dimensioni delle icone, dovrebbero esserci tre valori predefiniti ma non riesco a capire come dare questi valori alle icone.

[tonicopi]

Adesso le provo pure io. Per farle circondare dal testo, come dici nel post su googleplus, pasta inserirle dentro un div con il float:left o right...

[alexred]

Adesso le provo pure io. Per farle circondare dal testo, come dici nel post su googleplus, pasta inserirle dentro un div con il float:left o right...

grazie del suggerimento, ma preferirei se mi passi direttamente il codice da inserire, io ho provato ma da bravo imbranato se metto l'icona grande poi mi rimane grande anche il font del testo che gli gira attorno... 

[alexred]

Ho inserito le icone direttamente in basso alla pagina dimostrativa di Bootstrap, così credo sia più facile avere tutto nella stessa pagina.
Ho cambiato il link nella frase "(vedi elenco)" mettendo un ancora che porta in basso alle icone, ma nella validazione W3C mi da errore
http://validator.w3.org/check?uri=http%3A%2F%2Fdemo.joomlahost.it%2F30test%2Findex.php%2Fnotizie%2F3-esempi-di-utilizzo-bootstrap&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&user-agent=W3C_Validator%2F1.3

Mi da errore di validazione anche il tentativo di gestire le dimensioni delle icone con lo span:

Codice: [Seleziona]

<span style="font-size: 50px; aria-hidden="true" class="icon-picture icon-large"></span>
Aiutoooooooooooo

[dritanc]

Io il modulo percorso l'ho posizionato nella posizione banner, mi sembre meglio li..

EDIT: è anche necessario nel modulo "Percorso" nelle opzioni base impostare su NO il Mostra "Sei qui"
perchè altrimenti si perde la validazione W3C

[alexred]

ciao    Dritan Cami,
perdonami ma non capisco, io nel Protostar non riesco ad assegnare al modulo "Percorso" la posizione "banner", non la trovo nell'elenco

[dritanc]

Guarda io ho installato direttamente la versione 3.0.1 in questo dominio aperto per fare prove, test ecc e io c'è l'ho e posso impostarlo:
http://www.dritancami.com/?tp=1

[alexred]

ok, inserendola manualmente mi ha preso quella posizione,
ma non mi convince molto, la trovo troppo vicina al topmenu e si ritrovano troppo vicine le due voci Home

[dritanc]

Chiaro! Volendo si può disabilitare la visualizzazione della home (oltre al qui) nel percorso perché facendo delle prove da smartphone, per percorsi lunghi viene fuori una cosa infinita..

[dritanc]

Eccomi qua. Nel file ho messo solo quelli che a me funzionano (scartando quelli che non funzionano e che hai già inserito nella demo)

[allegato eliminato da un amministratore essendo vecchio più di un anno]

[alexred]

ciao Dritan Cami,
ma li hai provati in un contenuto di Joomla prima di allegarli?
Io ho provato i primi due ma non mi è apparso nulla di interessante (o forse sono io che non capisco a cosa servano).

[dritanc]

Si alexred, i primi due sono: la prima una list semplice senza puntini e la seconda una list composta tra titolo-descrizione titolo-descrizione. Forse non saranno chissà cosa ma sono sempre esempi delle caratteristiche del bootstrap.
Comunque sono i meno belli di tutto il file. Prova anche gli altri. A mio dire ne vale la pena.

Eccomi qua. Nel file ho messo solo quelli che a me funzionano (scartando quelli che non funzionano e che hai già inserito nella demo)

[alexred]

ok, mi hai convito ed ho provato il terzo. Sembrano dei campi form ma non capisco a cosa possano servire all'interno di un contenuto. Dove vanno a finire i dati se compilati?

[dritanc]

No ma infatti, non sono esempi solo per articoli o contenuti. Sono caratteristiche del bootstrap. Se tu parlavi solo per contenuti, vedi te se inserirli nella demo.

[alexred]

Aiutoooooo
La 3.0.2 sta per uscire e noi non siamo ancora stati capaci di preparare questa pagina per i dati di esempio 

C'è qualche anima buona che voglia aiutarmi?
Non riesco ad allineare una icona rispetto al testo.
Ho provato a pasticciare qualcosa qui: http://demo.joomlahost.it/30test/index.php/notizie/8-allineare-icona
ma non funziona.....

questo il codice pasticciato:

Codice: [Seleziona]

<div style="font-size: 80px; color: #DC143C"><i class="icon-question-sign icon-large" style="float: left; margin: 2px;"></i></div><p>testo testo testo testo testotesto testotesto testotesto testotesto testotesto testotesto testotesto testotesto testotesto testotesto testotesto testotesto testotesto testotesto testotesto testotesto testotesto ..........</p>

[Razzo]

Codice: [Seleziona]

<div><i style="color: rgb(220, 20, 60); font-size: 80px; float: left; margin: 30px 70px 30px 0px;" class="icon-question-sign icon-large"></div>
poi gioca un po' con i margin se vuoi centrala diversamente

[alexred]

funziona, ma ogni volta che viene modificata la dimensione dell'icona devono essere modificati anche tutti i valori dei margini. C'è una relazione fra questi valori che possiamo scrivere per aiutare gli utenti?

[Razzo]

funziona anche con il padding, ad esempio:

Codice: [Seleziona]

<div><i style="color: rgb(220, 20, 60); float: left; font-size: 100px; padding: 50px 100px 50px 0" class="icon-question-sign icon-large"></div>
le dimensioni da mettere per il padding/margin sono: Apx Bpx Apx 0;
dove:
A = font-size/2
B = font-size


p.s. = questo sito spero già lo conosciate: http://bootsnipp.com/ ci sono un po' di esempi di utilizzo

[alexred]

ho provato ad inserire anche il codice con il padding ma è scoppiato tutto:
http://demo.joomlahost.it/30test/index.php/notizie/8-allineare-icona

mentre utilizzando il codice di prima ma allineando a destra l'icona il testo non si distazia più

[Razzo]

però è scoppiato in modo carino.....

Codice: [Seleziona]

<p><i class="icon-question-sign icon-large" style="color: rgb(220, 20, 60); font-size: 80px; margin: 50px 100px 50px 0px; float: left;">left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left.</p>
<p><i class="icon-question-sign icon-large" style="color: rgb(220, 20, 60); font-size: 80px; margin: 50px 100px 50px 0px; float: right;">right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right.</p>
demo: http://joomla3.0.razzo.org/


p.s. =  da notare l'effetto ottico: i left sembrano scendere e i right salire... O.o

[alexred]

Ottimo, ora provo a scrivere l'esempio.

Ti viene in mente anche un esempio su come utilizzare jQuery per far aprire una immagine nel "modal" a schermo intero?

[Razzo]

no  quello ancora non so farlo...

[alexred]

ok, grazie per l'aiuto
la pagina con il codice di esempio è migliore grazie al tuo esempio di allineamento icone:
http://demo.joomlahost.it/30test/index.php/notizie/3-esempi-di-utilizzo-bootstrap

Se ti viene in mente qualche altro esempio che possa essere utile agli utenti da utilizzare semplicemente nei contenuti indicalo che lo proviamo

[alexred]

credo sarebbe utile capire se con Bootstrap sia possibile ottenere l'effetto di un blocco di testo allineato all'interno del testo dell'articolo. Per fare un esempio di quello che intendo visualizzate questa pagina: http://www.joomla.it/presentazione-joomla.html
e i blocchi sono quelli con all'interno il testo "Joomla non è un prodotto ma è un progetto collaborativo..."
oppure quello in basso con "- Register Globals: OFF
- Magic Quotes: ON
- Emulazione RG: ON"

[tonicopi]

Così?

Codice: [Seleziona]

<p>Blocco semplice in evidenza all'interno di testo con dimensione e float</p>
<pre>&lt;div&gt;
&lt;pre style=" float:left; width:100px; margin:0 10px;"&gt;Blocco semplice in evidenza con dimensione e float&lt;/pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis sem et nulla consequat nec interdum nunc cursus. Praesent venenatis risus id nunc lacinia fermentum. Fusce feugiat molestie molestie. Vestibulum gravida dui ac ante tempor quis vehicula purus venenatis. Etiam sed massa orci. Vivamus purus mauris, luctus eu placerat eu, suscipit et turpis. Vestibulum accumsan ultrices turpis sed sollicitudin. Sed et nibh orci.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis sem et nulla consequat nec interdum nunc cursus. Praesent venenatis risus id nunc lacinia fermentum. Fusce feugiat molestie molestie. Vestibulum gravida dui ac ante tempor quis vehicula purus venenatis.
&lt;/div&gt;</pre>
<div>
<pre style=" float:left; width:100px; margin: 0 10px;">Blocco semplice in evidenza con dimensione e float</pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis sem et nulla consequat nec interdum nunc cursus. Praesent venenatis risus id nunc lacinia fermentum. Fusce feugiat molestie molestie. Vestibulum gravida dui ac ante tempor quis vehicula purus venenatis. Etiam sed massa orci. Vivamus purus mauris, luctus eu placerat eu, suscipit et turpis. Vestibulum accumsan ultrices turpis sed sollicitudin. Sed et nibh orci.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis sem et nulla consequat nec interdum nunc cursus. Praesent venenatis risus id nunc lacinia fermentum. Fusce feugiat molestie molestie. Vestibulum gravida dui ac ante tempor quis vehicula purus venenatis.
</div>

[alexred]

grazie tonicopi,
l'idea è proprio quella. Ho provato ad inserirla qui: http://demo.joomlahost.it/30test/index.php/notizie/8-allineare-icona

e sparando dentro anche una delle classi class="alert alert-info" funziona, ma in entrambi i casi mi taglia il testo

[tonicopi]

Si si, è meglio  farlo proprio con le classi usando il tag div al posto del pre 

[alexred]

ottimo, con i div sembra funzionare meglio,
ora provo a inserirlo nella pagina con tutti gli esempi. Grazie per l'aiuto

[alexred]

Sono riuscito a fare anche l'esempio dell'immagine miniatura che apre la grande con il modal 
erano giorni che ci provato e rompevo le scatole ad altre persone per aiutarmi.

Provate a cercare il testo: Immagine miniatura che apre la grande
nella pagina con tutti gli esempi http://demo.joomlahost.it/30test/index.php/notizie/3-esempi-di-utilizzo-bootstrap 
per vedere come funziona!

[masmaz]

ciao a tutti


scusate ma un popup modale da una immagine di partenza che poi mostra un testo??   non riesco a crearlo...


si potrà??


grazie
massimo

[alexred]

ciao masmaz,
si, certo che si può, ma provalo inizialmente solo sul template di default.

a me con questo codice ha funzionato:

Codice: [Seleziona]

<div id="myModal2" class="modal hide fade" style=" width:auto;">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel2">Titolo finestra</h3>
</div>
<div class="modal-body">Testo testo...Testo testo...Testo testo...Testo testo...Testo testo...Testo testo...Testo testo...</div>
<div class="modal-footer"><button class="btn" data-dismiss="modal">Chiudi</button></div>
</div>
<a href="#myModal2" data-toggle="modal"><img class="img-polaroid" src="/images/sampledata/parks/landscape/120px_pinnacles_western_australia.jpg" alt="nome immagine" /></a>

[masmaz]

ok provo subito...



grazie
Max

[masmaz]

ciao masmaz,
si, certo che si può, ma provalo inizialmente solo sul template di default.

a me con questo codice ha funzionato:

Codice: [Seleziona]

<div id="myModal2" class="modal hide fade" style=" width:auto;">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel2">Titolo finestra</h3>
<>
<div class="modal-body">Testo testo...Testo testo...Testo testo...Testo testo...Testo testo...Testo testo...Testo testo...<>
<div class="modal-footer"><button class="btn" data-dismiss="modal">Chiudi</button><>
<>
<a href="#myModal2" data-toggle="modal"><img class="img-polaroid" src="/images/sampledata/parks/landscape/120px_pinnacles_western_australia.jpg" alt="nome immagine" />[/url]

funzionare funziona perfettamente ma da molti errori di validazione wc3, e non mi tiene più immagini affiancate ma incolonnate...  eppure ci deve essere il sistema...