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