Come creare bottoni in Bootstrap 3.

Un bottone è un elemento piuttosto popolare che viene utilizzato in quasi tutti  siti web è naturalmente, framework Bootstrap consente di impostare  colore e  dimensione giusta per qualsiasi tipo di  bottoni imaginabili sulla vostra pagina web. E 'sufficiente aggiungere solo le classi appropriate.

Sul sito ufficiale del framework sono descritte tutte le possibili per la creazione di bottoni sulla scheda "Buttons". Abbiamo un sacco di opportunità, ma concentriamoci solo su alcuni di loro.

Oggi ti mostrerò come è possibile creare bottoni in bootstrap, che tipi ci sono e come posiamo personalizzarli .

Nozioni base su Boostrat

  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

 Nel nostro esempio  (sto sempre parlando della pagina sito.html, che si può scaricare nella lezione precedente) ci sono  elementi che ci chiedono da soli di trasformarli in botoni. Sto parlando di link "Leggi tutto" nella parte inferiore di ogni paragrafo.
dis8 1
Nel linguaggio html posiamo creare due tipi di bottoni: un bottone semplice e un bottone di collegemento realizzato con il tag <a>. Vediamo la seconda opzione.

Per creare un bottone con Bootstrap, dobiamo solo  aggiungere al tag <a> una classe. Per la prima cosa dobiamo in questa classe indicare che ci rivolgiamo a Bootstrap quindi dobbiamo scrivere "btn"   (che da solo non agiunge niente al nostro link ), e solo dopo indicare il tipo del bottone che vogliamo creare. Diamo un'occhiata al esempio.

Aggiungiamo al primo link "Leggi tutto" la classe di bottone predefinito (di default – class="btn btn-default"):

<a target="_blank" class="btn btn-default" href="#"> Leggi tutto</a>

Come risultato il collegamento diventa un bottone grazie ad un stile incorporato di bootstrap:
dis8 2

Classi di bottoni di Bootstrap

Le classi di bottoni in Bootstrap sono divisi per varie tipi come illustra l'immagine qui sotto e ad ogni tipo corisponde il suo nome  :

dis8 4

Potete notare che bottoni o pulsanti creati con bootstrap cambiano il suo aspetto al passagio del cursore (passando nello stato hover )  il cio li rende ancora una volta  più comprensibili per il visitatore (pulsanti statici non sono cosi informativi per utente  ). Il bottone con lo stilebtn-default non è troppo evidente, quindi, se si desidera di renderlo piu evidente si puo  utilizzare stili alternativi (ad esempio btn-danger o btn-warning ).

La grandezza di bottoni in Bootstrap

Posiamo anche cambiare la grandezza del bottone, basterebbe aggiungere un altra classe come per esempiobtn-lg che creera un bottone grande.

<a target="_blank" class="btn btn-warning btn-lg" href="#">Leggi tutto</a>

dis8 3

Processo della creazioni di bottoni in bootstrap è molto semplice ed intuitivo. Per analogia con il sistema a rete, ci sono quattro misure di pulsanti. Senza prescrivere classi aggiuntive si ottiene la dimensione media del bottone, e quando si aggiunge btn-lg, btn-sm o btn-xs si ottiene bottone grande, piccolo e molto piccolo rispettivamente. In realtà, è abbastanza chiaro da questo screenshot:
 dis8 5

Come allargare un bottone per tutta la larghezza del blocco esso continenete.

Inoltre, la largezza di un bottone in  bootstrap posiamo impostare uguale alla larghezza del blocco in cui si trova. Questa opzione può essere molto utile per la creazione di pulsanti che si adeguano alla  larghezza della colonna. Per questo sarà sufficiente sostituire la  classe che indica la grandezza del bottone btn-lg per esempio con la classe btn-block:

<a target="_blank" class="btn btn-primary btn-block" href="#">Leggi tutto</a>

dis8 6

Come cambiare colore di bottoni aplicando proprio stile?

Un'altra domanda - che cosa fare se i colori di bottoni di bootstrap non si adattano allo stile del tuo sito? Un modo c'e, creare le proprie regole  CSS, ma non nel foglio di stili di  Bootstrap 3, ma creare un proprio fail CSS con dei stili personalizzati e  collegarlo alla tua pagina web. Per esempio creeremo un fail css con il nome manual.css .

Spero che cosa sono i selettori sapete gia o potete scoprire  dai miei corsi dedicati al linguaggio  CSS !? E riguardo varie proprietà CSS  hai letto? Dove si trovano come si scrivono e come browser li interpreta? In caso contrario, ripassa il corso gratuito CSS e altre due “Css pratica” e “Sito web da 0”. Io invece proseguo, non soffermarsi tanto sui dettagli dell'uso degli stili.

Quindi, abbiamo bisogno di modifficare il pulsante creato con la classe bootstrap, cambiare colore per esempio. Inoltre posimo cambiare anche  il colore del bottone allo stato hover quando il nostro puntatore del mouse si trova sopra di esso , ma questo è un  problema secondaria e la vediamo nella lezione sucessiva. Ora invece, proviamo con i bottoni  mostrati nella immagine  precedente. Sarebbe logico di fare tutto nella stessa combinazione di colori, che si usano sul tuo sito.

Come un bottone di bootstrap prende colore.

Vediamo ora come questi bottoni ottengono  colore?  Ad esempio, nella classe che abbiamo aggiunto sopra  btn btn-primary btn-block  per il colore corisponde "btn-primary". Come abbiamo detto in precedenza nel foglio di stili CSS originale non cambieremo niente, quindi avremo bisogno di aggiungere una regola nel nostro foglio di stile che si chima  manual.css il nome del fail css puo essere qualsiasi Se vogliamo cambiare solo il colore del pulsante, la regola CSS sarà simile a questa:

.btn-primary {
background-color: #cdae51;
border-color: #3F2B22;
color: #000000;
}

Così abbiamo impostato il colore di sfondo (background-color), colore del bordo (border-color) e il colore del testo (color). Come risultato, vediamo il cambiamento:
dis8 8

Se non vedi i cambiamenti sul tuo sito controlla il collegamento del foglio di stile manual.css alla tua pagina, il collegamento che creerai dovrai inserire dopo il collegamento al fail di stili di Bootstrap. Vediamo il codice  hmtl :

dis8 9

Sai perché il tuo foglio di stile dovrebbe trovarsi sotto il fail di bootstrap ? Il fatto è che abbiamo prescritto la  regola CSS che duplica la stessa regola nel foglio di stile di bootstrap. Come dovrebbe fare un browser nel caso di tale conflitto? Deve seguire la regola della priorità. Seguendo questa regola in caso della  ugualianza di due seletori  CSS come nel nostro caso, viene presa in considerazione  la regola che si trova piu in basso nel codice  (che si trova nel file di stile che è collegato piu in basso nel nostro caso ). Anche se è possibile aumentare la priorità di un valore nel file manual.css aggiungendo ad esso valore “important!”:

.btn-primary {
background-color: #cdae51;
border-color: #3F2B22;
color: #000000 !important ;

Ma questo solo per le situazioni estremi quando il colore non è stato cambiato per qualche ragione. Comunque  è sempre meglio sapere che esiste tale soluzione, sto parlando della possibilita di  aggiungere "important!" . Diamo per scontato che non hai riscontrato problemi  per modificare il colore del pulsante.

E per rendere tutti i bottoni sul tuo sito web uguali (improbabile, ma vediamo anche questa opzione ) basterebbe creare uno stile per la classe .btn nel tuo foglio di stile. Che in realtà non ha uno stile nel bootstrap ma indicandolo cambieremo aspetto di tutti i botoni sul tuo. Diventeranno uguali. La stessa cosa funziona anche per gli altri  elementi di framework bootstrap . Tutto è pensato.

Letto 2594 volte