Esempi di utilizzo Bootstrap

[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...