Sviluppo dell'interfaccia web avanzata di Bootstrap Framework

In un altro tutorial è stata spiegata un'introduzione alle interfacce utente Bootstrap e anche un tutorial su come progettare un progetto web con Bootstrap 2.0, in questo ci sposteremo verso le interfacce e gli elementi più utilizzati nello sviluppo web.
Possiamo scaricare Bootstrap e metterlo in una directory sul nostro sito web o usarlo collegandolo alla tua libreria online.
Bootstrap è un framework open source e aperto per uno sviluppo web più rapido e semplice.
Cercando possiamo trovare molti contributi dalla comunità css e componenti personalizzati e modelli di progettazione che altri utenti hanno realizzato e renderli disponibili, ci sono molti componenti per creare barre di navigazione, finestre modali e popup, caroselli di immagini, menu e molti altri ancora. come plugin JavaScript e Jquery per convalidare moduli e altre funzionalità

Tabelle e righe con effetti

Bootstrap ha stili ed effetti CSS già programmati che possiamo usare, ad esempio, per cambiare il colore delle righe in una tabella e quando il mouse ci passa sopra.

Il codice sarà il seguente:

Tabella e righe con effetto
 

 
 
Veicolo
 
Fonte
 
Condizione
 
Prezzo
 

 

 

 
 
Fiat 500
 
Madrid
 
Usato
 
9690€
 

 
 
accordo Honda
 
Barcellona
 
Usato
 
14500€
 

 
 
Renault laguna
 
Toledo
 
Usato
 
2800€
 

 

 

Successivamente creeremo un menu con sottomenu utilizzando solo Bootstrap CSS:

INGRANDIRE

Il codice sarà il seguente:

Menu multilivello utilizzando Css Bootstrap
Amministratore vendite clienti 

Sistema
Utenti
Impostazioni

permessi
Server

Server Vps A
Server Vps B


Consumo di risorse
Backup

Spieghiamo la struttura e le sue classi predefinite. La classe definisce la dimensione del web trovato di default in Bootstrap.

 .contenitore {larghezza: 1170px; } 

Le seguenti classi di riga forniscono un margine sinistro e destro sull'intera pagina:

 .riga {; margine destro: -15px; } 

La classe del menu a discesa viene già fornita con Bootstrap e anche le classi di pulsanti btn btn-primary. Aggiungeremo il sottomenu e le classi di livello per poter generare il sottomenu. Ricorda che le classi hanno gerarchie, quindi se chiamiamo la stessa classe che abbiamo in Bootstrap e aggiungiamo qualche attributo ad essa, prevale l'ultima dichiarazione fatta.
Questo è per il caso in cui aggiungiamo un attributo shift left anche se la classe è già definita in bootstrap.min.css

 .menu a discesa {sinistra: 150px; } 

Popup css e jquery con contenuto html
Utilizzeremo la funzione popover che visualizza un popup quando si passa con il mouse su un collegamento e la variabile di contenuto ha l'html da visualizzare.
Prenderemo la tabella precedente e aggiungeremo una colonna per una scheda tecnica.
In ogni link avremo la seguente frase e poi con l'id invocheremo uno script.

 
 

 
 
Veicolo
 
Fonte
 
Condizione
 
Prezzo
 
Fotografie
 

 

 

 
 
Fiat 500
 
Madrid
 
Usato
 
9690€
 
Scheda dati
 

 
 
accordo Honda
 
Barcellona
 
Usato
 
14500€
 
Scheda dati
 

 

 

 

Se abbiamo una lista ampia possiamo creare una funzione JQuery dove possiamo inviare contenuti dinamici ad esempio estratti da un database.

Colonne e blocchi nella pagina

Bootstrap si basa su una larghezza di 1200 pixel, suddivisi in 12 blocchi che coprono il 99% della struttura del web, ogni blocco copre l'8,3333%, equivalente a 100 pixel e ha anche uno spazio di 1 pixel.
Sempre la combinazione di blocchi nella stessa riga per aggiungere 12 ad esempio:
Due blocchi da 3 e uno da 6

Blocchi bootstrap
Blocco Col-md-3 di 300px.
Col-md-6 blocco di 600px.
Blocco Col-md-3 di 300px.
800px col-md-8 blocco.

Di seguito mettiamo un blocco di dimensioni 8 che è 800 pixel:

Questi blocchi sono reattivi in ​​quanto sono configurati nel CSS Bootstrap. Qui possiamo vedere un esempio di come i blocchi si adattano a un cambio di schermo di un dispositivo mobile.

Come personalizzare Bootstrap per cambiare stili e funzionalità

Per creare stili e funzionalità compatibili con Bootstrap, dobbiamo usarlo come qualsiasi altra libreria css o js, ​​come un altro framework del progetto, in questo caso verrà utilizzato per il design e le funzionalità nel browser dell'utente. Dovremmo evitare di riformare le librerie originali, ma agganciare le nostre, quindi quando gli sviluppatori Bootstrap rilasceranno un aggiornamento, non avremo problemi a incorporare il nuovo se teniamo separate le nostre modifiche.
Per definire i nostri fogli di stile, dobbiamo creare un nuovo file di stili CSS, per definire le nostre modifiche senza influenzare il css originale. Ricordiamo la gerarchia, per esempio.
Se in Bootstrap css bootstrap.min.css

 .col-md-3 {larghezza: 25%; } 

E vogliamo che abbia un bordo, quindi in un file separato my styles.css, possiamo dichiarare:

 .borderojo {bordo: 1px rosso solido} 

Quindi nella pagina invochiamo entrambi i file

Nel blocco lo applichiamo come segue:

Blocco Col-md-3 di 300px.

Sarebbe equivalente a dichiararlo in questo modo:

 col-md-3 {larghezza: 25%; bordo: 1px rosso pieno; } 

Ora, se per qualche ragione avesse due affermazioni simili, supponiamo

 .borderojo {bordo: 1px rosso solido; } .clientblock {border: 1px blu fisso; }
Blocco Col-md-3 di 300px.

Chi prevale è la sentenza che è stata dichiarata per ultima. Pertanto il blocco avrà un bordo blu.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo