Componenti · Bootstrap in russo. Componenti Barra di navigazione invertita

In questo articolo esamineremo il set di icone dei caratteri incluse nella build Bootstrap 3.4.1 per impostazione predefinita. Questo set include oltre 250 icone in formato carattere dal pacchetto Glyphicon Halflings.

Icone dei glificoni

Il framework Bootstrap 3 include oltre 250 icone in formato carattere dal set Glyphicons Halflings. La libreria Glyphicons Halflings non è gratuita. Ma gli sviluppatori di queste icone ne hanno rese disponibili alcune per l'uso in Bootstrap 3.

La quarta versione di Bootstrap non include alcun set di icone in formato carattere nella sua distribuzione standard. Se ne hai bisogno, dovrai collegarli tu stesso.

Icone Bootstrap 3 standard (dal set Glyphicon Halflings)

Come collegare le icone Glyphicons Halflings?

Nella build standard di Bootstrap 3, le icone Glyphicons Halflings non necessitano di essere collegate. Sono già inclusi nel file CSS (bootstrap.css o bootstrap.min.css).

Le icone di Glyphicons Halflings si trovano nella directory dei caratteri. Questa directory contiene diversi formati (eot, svg, ttf, woff, woff2) delle stesse icone.

Il formato eot è necessario per visualizzare le icone nei browser Microsoft Internet Explorer meno recenti (fino alla versione 9). Il carattere ttf viene utilizzato per visualizzare le icone nei browser legacy del sistema operativo Android (fino alla versione 4.4). woff e woff2 sono formati utilizzati da tutti i principali browser. La seconda versione del formato del carattere (woff2) differisce dalla prima in quanto ha dimensioni inferiori. Attualmente woff2 è supportato dai browser Chrome 36+, Opera 26+, Firefox 35+. Il carattere in formato SVG è supportato solo dai browser Safari (4.1 e precedenti) che eseguono il sistema operativo iOS.

Per impostazione predefinita, i caratteri Glyphicons Halflings dovrebbero essere posizionati rispetto al file bootstrap.css o bootstrap.min.css come segue: bootstrap.css -> directory principale -> cartella dei caratteri -> caratteri

Se le icone Bootstrap vengono visualizzate sulla tua pagina come quadrati, controlla se i tuoi caratteri sono posizionati correttamente rispetto al file bootstrap.css secondo il diagramma sopra.

Come utilizzare le icone standard in Bootstrap 3?

L'aggiunta di un'icona Bootstrap a una pagina Web viene solitamente eseguita utilizzando un elemento span o i, a cui è necessario aggiungere una classe base glyphicon e una classe per un'icona specifica (ad esempio, glyphicon-earphone).

Icona del telefono dal set Glyphicon Halflings

Icone di stile in Bootstrap 3

Glifi Le icone degli Halfling hanno lo stesso stile del testo normale.

Ad esempio, per cambiare il colore di un'icona, devi solo impostare la proprietà CSS color.

/* CSS */ .glyphicon-green ( colore: verde; )

La modifica della dimensione dell'icona Glyphicon viene eseguita utilizzando la proprietà font-size CSS:

Aggiunta di icone Bootstrap agli elementi HTML

Per posizionare l'icona a forma di stella in un pulsante, procedere come segue:

Preferiti Preferiti

Schermata di esempio:

Assicurati di lasciare spazio tra l'icona e il testo per garantire una spaziatura corretta. Ad esempio, attraverso uno spazio o un carattere speciale.

Utilizzo di un'icona Bootstrap come indicatore dell'elenco UL.

Per fare questo è necessario:

aggiungi l'icona della classe all'elemento ul;

inserisci un pezzo di codice CSS nella pagina.

/* CSS */ ul.icon ( /* elenco senza contrassegno standard */ list-style-type: none; ) ul.icon li ( /* left indent */ text-indent: 0px; ) ul.icon li:before ( /* font */ font-family: "Glyphicons Halflings"; /* codice icona */ contenuto: "\e127"; /* posizione del blocco con l'icona */ float: left; /* larghezza del blocco */ larghezza : 35px; )

Contenuto di 1 articolo
Contenuto 2 articoli
Contenuto 3 articoli

Un esempio di come è possibile posizionare un'icona in un elemento di input:

/* CSS */ .input-icon ( posizione: assoluta; superiore: 0; sinistra: 0; z-index: 2; display: blocco; larghezza: 34px; altezza: 34px; altezza linea: 34px; allineamento testo: center; eventi puntatore: nessuno; top: 25px; .form-icon (posizione: relativa;) .form-icon input (imbottitura-sinistra: 42,5px;) Nome utente:

Come collegare le icone Glyphicons a Bootstrap 4?

Bootstrap 4 non ha icone di caratteri integrate. Se desideri utilizzare le icone dei caratteri Glyphicons in Bootstrap 4 presenti in Bootstrap 3, puoi farlo come segue.

Innanzitutto, scarica la cartella "fonts" da Bootstrap 3 a Bootstrap 4. Puoi scaricare l'archivio Bootstrap 3 utilizzando questo collegamento.

In secondo luogo, crea un file come "font-glyphicons.css" e inserisci il seguente contenuto. Questi stili sono necessari affinché le icone possano essere inserite nella pagina in modo più semplice e conveniente.

Terzo, collega il file “font-glyphicons.css” alla pagina utilizzando il tag link.

Ciao di nuovo, miei lettori curiosi e ospiti del blog. Oggi analizzeremo un argomento molto semplice ma utile: le icone Bootstrap. In questa pubblicazione ti dirò quali icone sono disponibili per l'uso gratuito in Bootstrap 3, come sono collegate, darò un esempio di prova e toccherò anche Font Awesome.

Bene, ora passiamo al debriefing!

Nel framework, le piccole immagini vettoriali che chiamavamo icone si chiamano Glyphicon. Bootstrap fornisce ai suoi utenti un set chiamato Glyphicon Halflings, che include 260 caratteri speciali. Il nome e l'aspetto di ciascuno di essi possono essere visualizzati sul sito ufficiale.

La cosa interessante è che queste icone di solito non sono di dominio pubblico, poiché il loro sviluppatore le fornisce a pagamento sul suo sito web http://glyphicons.com/. Tuttavia, ha fatto un'eccezione specificatamente per il quadro che stai studiando. In cambio, qualsiasi utente che utilizza i suoi set di caratteri deve inserire un collegamento al sito sopra indicato.

Aree di utilizzo dei Glyphicons

Penso che navigando nella pagina web con le icone ne hai riconosciuti molti. Ne consegue che vengono utilizzati per siti web, social network, applicazioni web e servizi di ogni genere.

Un enorme vantaggio di queste icone di composizione è che possono essere inserite in quasi tutti gli elementi del linguaggio di markup HTML: input, pulsanti, barre degli strumenti (varie barre degli strumenti), menu, elementi di navigazione, moduli di registrazione e accesso, ecc.

Come scaricare e collegare un set di icone?

In realtà è molto semplice. Se colleghi il framework stesso tramite CDN, assicurati di includere anche gli stili CSS. Altrimenti senza questo non funziona nulla e quindi i caratteri speciali non vengono visualizzati. I set di icone discussi si trovano qui:

Lo stesso vale se scarichi l'intero pacchetto framework. Quindi la linea di connessione per le regole di stile cambierà leggermente:

Tuttavia, puoi trovare il carattere dell'icona in una directory chiamata fonts. Non esiste un solo file, ma 5. Ciò è necessario affinché tutti i glifi vengano visualizzati correttamente nei diversi browser, ad es. erano compatibili con tutti i browser.

Se preferisci scaricare solo le icone, nella scheda Costomize nei componenti puoi selezionare solo Glyphicon s.

Caso di prova

Per chiarezza, ho deciso di fornire un esempio di prova completo, che mostri al massimo l'uso dei glifi.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

Esempio di bootstrap Esempio di utilizzo dei glifi Email: Password: Invia

Esempio di bootstrap

Esempio di utilizzo dei glifi Email: Password: Invia

Parliamo un po' di Font Awesome

Questo prodotto è stato creato come aggiunta a Bootstrap, che fornisce ai suoi utenti icone vettoriali aggiuntive assolutamente gratuite, anche per i social media. reti. Funziona benissimo anche con altri framework.

Per lavorare con esso, è necessario scaricare il file di installazione dal sito Web ufficiale http://fontawesome.ru/. Successivamente, aggiungi gli stili nell'intestazione della pagina web:

Non dimenticare di incollare il catalogo scaricato nella cartella del progetto.

Icone dei glificoni

La quarta versione di Bootstrap non include alcun set di icone in formato carattere nella sua distribuzione standard. Se ne hai bisogno, dovrai collegarli tu stesso.

Icone Bootstrap 3 standard (dal set Glyphicon Halflings)

Come collegare le icone Glyphicons Halflings?

Nella build standard di Bootstrap 3, le icone Glyphicons Halflings non necessitano di essere collegate. Sono già inclusi nel file CSS (bootstrap.css o bootstrap.min.css).

Le icone di Glyphicons Halflings si trovano nella directory dei caratteri. Questa directory contiene diversi formati (eot, svg, ttf, woff, woff2) delle stesse icone.

Se le icone Bootstrap vengono visualizzate sulla tua pagina come quadrati, controlla se i tuoi caratteri sono posizionati correttamente rispetto al file bootstrap.css secondo il diagramma sopra.

Come utilizzare le icone standard in Bootstrap 3?

Icona del telefono dal set Glyphicon Halflings

Icone di stile in Bootstrap 3

Glifi Le icone degli Halfling hanno lo stesso stile del testo normale.

Ad esempio, per cambiare il colore di un'icona, devi solo impostare la proprietà CSS color.

/* CSS */ .glyphicon-green ( colore: verde; )

La modifica della dimensione dell'icona Glyphicon viene eseguita utilizzando la proprietà font-size CSS:

Aggiunta di icone Bootstrap agli elementi HTML

Per posizionare l'icona a forma di stella in un pulsante, procedere come segue:

Preferiti Preferiti

Schermata di esempio:

Assicurati di lasciare spazio tra l'icona e il testo per garantire una spaziatura corretta. Ad esempio, attraverso uno spazio o un carattere speciale.

Utilizzo di un'icona Bootstrap come indicatore dell'elenco UL.

Per fare questo è necessario:

aggiungi l'icona della classe all'elemento ul;

inserisci un pezzo di codice CSS nella pagina.

Contenuto di 1 articolo
Contenuto 2 articoli
Contenuto 3 articoli

Un esempio di come è possibile posizionare un'icona in un elemento di input:

Come collegare le icone Glyphicons a Bootstrap 4?

Bootstrap 4 non ha icone di caratteri integrate. Se desideri utilizzare le icone dei caratteri Glyphicons in Bootstrap 4 presenti in Bootstrap 3, puoi farlo come segue.

Innanzitutto, scarica la cartella "fonts" da Bootstrap 3 a Bootstrap 4. Puoi scaricare l'archivio Bootstrap 3 utilizzando questo collegamento.

Terzo, collega il file “font-glyphicons.css” alla pagina utilizzando il tag link.

Barra di navigazione predefinita

Le barre di navigazione sono componenti di obiettivi reattivi che fungono da titoli di navigazione per applicazioni o siti Web. Se visualizzati su dispositivi mobili, si comprimono (e possono essere scambiati) e quando la larghezza della finestra di visualizzazione aumenta, assumono una forma orizzontale.

Eccesso di contenuti

Poiché Bootstrap non sa di quanto spazio di contenuto ha bisogno la tua NavBar, potresti riscontrare problemi nel racchiudere il contenuto nella seconda riga. Per risolvere questo problema puoi:

Ridurre il numero o la larghezza degli elementi della NavBar.

Nascondi determinati elementi della NavBar in determinate dimensioni dello schermo utilizzando le classi Responsive Utility.

Modifica il punto in cui la NavBar passa dalla modalità compressa a quella orizzontale. Imposta la variabile @grid-float-breakpoint o aggiungi la tua media query.

Necessità di JavaScript

Se JavaScript è disabilitato e la larghezza della finestra diventa sufficientemente stretta da comprimere la barra di navigazione, non ci sarà modo di espandere la barra di navigazione e visualizzarne il contenuto con la classe .navbar-collapse.

Attiva/disattiva la navigazione Marca

Inviare

Disponibilità delle barre di navigazione dei moduli

Posiziona il contenuto del modulo all'interno di .navbar-form per un corretto allineamento verticale e per fornire funzionalità di compressione su finestre di visualizzazione strette. Utilizza le opzioni di allineamento per decidere dove verrà visualizzato il contenuto all'interno della barra di navigazione.

Come host, la classe .navbar-form condivide la maggior parte del suo codice con .form-inline tramite un mixin. Potrebbe essere necessario correggere alcuni controlli del modulo, come i gruppi di input, per visualizzarli correttamente nella barra di navigazione.

Inviare

Avvertenze mobili

Esistono alcune avvertenze sull'utilizzo dei controlli del modulo negli elementi fissi sui dispositivi mobili. .

Aggiungi sempre scorciatoie

Gli screen reader avranno problemi a leggere i moduli se non aggiungi etichette a ciascun campo di input. Per questi moduli della barra di navigazione incorporati, puoi nascondere le etichette utilizzando la classe .sr-only.

Pulsanti

Aggiungi la classe .navbar-btn agli elementi che non sono presenti per centrarli verticalmente nelle barre di navigazione.

Caratteristica specifica d'uso

Come le classi di pulsanti standard, .navbar-btn può essere utilizzato sugli elementi E . Tuttavia, sugli elementi non dovrebbero essere utilizzate classi di pulsanti .navbar-btn o standard inside.navbar-nav .

Testo

Racchiudi una riga di testo in un elemento con la classe .navbar-text , solitamente con il tag

Per un corretto allineamento e colore.

Collegamenti non contestuali

Componente di allineamento

Allinea collegamenti di navigazione, moduli, pulsanti e testo utilizzando le classi helper .navbar-left o .navbar-right. Entrambe le classi aggiungono il float CSS nella direzione specificata. Ad esempio, per allineare i collegamenti di navigazione, nidificali in un collegamento separato

Queste classi sono una versione ibrida delle classi .pull-left e .pull-right, ma sono progettate per le query multimediali per semplificare la gestione dei componenti della barra di navigazione per dispositivi di diverse dimensioni.

Aggiungi .navbar-fixed-top e includi .container o .container-fluid per centrare e riempire il contenuto della barra di navigazione.

...

La barra di navigazione fissa si sovrapporrà al resto dei tuoi contenuti finché non aggiungerai il riempimento in alto

corpo (imbottitura-parte superiore: 70 px;)

Assicurati che questo sia incluso nel CSS Bootstrap principale.

Aggiungi .navbar-fixed-bottom e collega .container o .container-fluid per centrare e riempire il contenuto della barra di navigazione.

...

La barra di navigazione fissa si sovrapporrà al resto dei tuoi contenuti finché non aggiungerai il riempimento nella parte inferiore. Prova a impostare i tuoi valori o utilizza lo snippet di codice riportato di seguito. Aiuto: per impostazione predefinita, la barra di navigazione ha un'altezza di 50 px.

corpo (imbottitura-fondo: 70 px;)

Assicurati che questo sia incluso nel CSS Bootstrap principale.

Crea una barra di navigazione a larghezza intera che scorre con la pagina aggiungendo .navbar-static-top e includendo .container o .container-fluid per centrare e riempire il contenuto della barra di navigazione.

A differenza delle classi .navbar-fixed-*, non è necessario modificare alcun riempimento e body .

...

Modifica l'aspetto della barra di navigazione aggiungendo .navbar-inverse .

...

In questo tutorial imparerai come utilizzare le icone Glyphicons sul tuo sito web in Bootstrap 3.
Il framework Bootstrap contiene 200 icone nel formato dei caratteri del set Glyphicons Halflings. Le icone vengono visualizzate utilizzando classi CSS speciali. Il colore può essere impostato utilizzando uno stile CSS con la proprietà “color”. Mostrerò tutto questo con esempi, ma ora guarda la tabella di tutte le icone Glyphicons fornita da Bootstrap 3.

○ Come utilizzare le icone Glyphicons su Bootstrap?

Per utilizzare le icone Glyphicons su Bootstrap, devi aggiungere un tag o . Vai al tag o è necessario aggiungere la classe base dell'icona “glyphicon” e poi, separata da uno spazio, aggiungere la classe dell'icona desiderata “glyphicon-*”.
“*” è il nome individuale dell'icona. Puoi prendere il nome dell'icona dalla tabella che hai visto sopra.
Ecco un esempio:

Di conseguenza, se incolli questo codice in Bootstrap:

quindi vedrai questo risultato:

Ora nell'esempio creerò quattro diverse dimensioni di icone:

Risultato:

Ora mostrerò l'icona sul pulsante (vedremo come creare un pulsante Bootstrap 3 in altre lezioni) e dipingerò la prima icona di rosso:
Versione mobile Versione mobile Versione mobile Versione mobile
Risultato:

Questa è la lezione che abbiamo imparato. Se fossi interessato, raccontalo a me e ad altri cliccando sul pulsante dei social media.
Se vuoi conoscere i nuovi articoli sul blog, iscriviti agli aggiornamenti.

Tutto sulla tecnologia mobile

ARTICOLI CORRELATI