Come fare bricioli di pane con Bootstrap3

Creare cosi detti bricioli di pane per indicare la posizione in sito è diventatta una cosa indispensabile in un sito web. Framework Bootstrap propone le sua visone di questo elemento .

1. Bricioli di pane in Bootstrap come fare

Anche in questo caso vorrei concentrare la vostra attenzione sul fatto che questo framework dal inizio da un certo look al vostro sito che nella sua volta permette di dare ad utente una pagina ben strutturata e decorata rendere il contenuto del sito web più semplice e più naturale per i visitatori. Anche in questo esempio ti propongo di creare una semplice pagina html al quale colegare tutti i fai necesarie per coretto funzionamento del Bootstrap per poter fare dei esercizi e testrae le tue briccoli di pane.

Di solito bricioli di pane si trovano nella parte superiore delle pagine Web, e servono per facilitare comprensione di dove l'utente è al momento (relativo alla gerarchia globale del sito). In altre parole, aggiungono interattività al vostro progetto.

navigazione bootstrap1

Cioè da esso si sa esattamente in quale sezione si trova l'articolo (beni o servizi), e in oltre potrei facilmente risalire le categorie per come vedimo nel disegno sopra. E sempre un menu in base di un elenco. Vediamo di simularlo. Nel codice HTML per questo scopo creeremo un semplice elenco, in cui l'ordine è importante.

Per capire meglio vediamo di creare come avevo gia detto una pagina HTML,  una pagina web reale con una bozza per i nostri bricioli di pane. Dopo di che con aiuto di varie classi Bootstrap vediamo di renderli piacevoli a noi. La scema sarà la stessa che abbiamo usato nelle lezioni precedenti vediamo di creare una pagina col nome index3.html.

menu bootstrap2

E vediamo di inserire al interno una lista numerata. index3.html

La nostra bozza  al momento non sembra abbastanza presentabile abbiamo il solito elenco numerato che per niente somiglia le bricoli di pane di una pagina web:

menu bootstrap3

Ma non preoccupatevi, adesso sistemiamo. Hai solo bisogno di aggiungere certi classi per gli elementi della lista  e la trasformazione sara fatta . Avete trovato tutti i tag nel nostro fail di prova index3.html? Ok, quindi aggiungere la classe breadcrumb al tag <ol>, e indicare con la classe  active  il tag finale  del elenco <li> (ultimo), che indica la posizione corrente del all'utente nel sito.

Di conseguenza, il codice dovrebbe essere simile a questo:

<!-- 2 riga  -->
    
    <ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Lezioni</a></li>
    <li><a href="#">jQuery</a></li>
    <li class="active"><a href="#">Come rendere immagini flessibili</a></li>
    </ol>
  

E se adesso ricarichiamo la pagina vediamo che la nostra lista numerata  si è trasformata in un bel classico esempio di bricioli di pane alla  Bootstrap:
menu bootstrap4

Dovrebbe essere chiaro, se vogliamo attaccare  bootstrap ad una sistema CMS fatta da se o quella gia esistente   dobbiamo questi classi prescrivere nel fail del template dove  vengono proprio inseriti questi bricioli di pane. Nel nostro caso, abbiamo una semplice pagina html  in cui tutte le regole si prescrivono manualmente (e la sequenza di navigazione inclusa) per ogni pagina. In sostanza, quando si tratta di un piccolo progetto, si può fare proprio cosi, utilizzo di una CMS non è sempre appropriato.

Come modificare  separatori in bricioli di pane?

Tuttavia, torniamo alle nostre pecore. Per impostazione predefinita,  separatore è uno slash (è prescritto nei stili CSS di Bootstrap). Non posso dire che è male (Mi piace), ma se avete un  desiderio di sperimentare, quindi vi descrivo brevemente i passi che devono essere fatte per riportare delle modifiche in questo senso. Per esempio, a posto di slash metiamo una icona dal arsenale di bootstrap una di cosi detti  glif-icone (la freccia o altro), di questo ne abbiamo gia parlato. Hai letto?

In generale, nel CSS bootstrap (bootstrap.css o bootstrap.min.css), questo  separatore viene aggiunto tramite pseudo-classe :before e content, che consentono di creare il contenuto della pagina al volo ( aggiungere qualcosa nel codice HTML non è piu  necesraio).

Avremo solo  bisogno di trovare questo posto nel file  bootstrap.css , cercate tramite ricerca nel vostro editore Html parola breadcrumb. Quello che troverete sarà simile a questo:

.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}

Codice strano, ma abbiamo solo bisogno di disabilitare aggiunta della barra. Tuttavia, vi consiglio di non apportare modifiche direttamente in fail bootstrap.css. Per aggiungere gli stili, meglio utilizzare il proprio fail di stile  (importante sapere come funzionano la sistema di priorità  nei stili  CSS , ne abbiamo gia parlato), vediamo di creare style.css  e collegarlo alla nostra pagina.  E dopo vediamo di inserire in esso il codice sotto :

.breadcrumb > li + li:before {
  content: none;
}

Dopo aver salvato le modifiche aggiornare la pagina corrente e vediamo che nelle bricioli di pane il separatore è scomparso:
menu bootstrap5
La metà del'opera è fatta. Resta solo aggiungere le icone  glyphi. E molto facile,  dove era un separatore, mettiamo  tag <span> con la classe delle icone glifi desiderati. Ad esempio:

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <span class="glyphicon glyphicon-circle-arrow-right"></span>
    <li><a href="#">Lezioni</a></li>
    <span class="glyphicon glyphicon-circle-arrow-right"></span>
    <li><a href="#">jQuery</a></li>
    <span class="glyphicon glyphicon-circle-arrow-right"></span>
    <li class="active"><a href="#">Come rendere immagini flessibili</a></li>
    </ol>

E dopo aver agiornato di nuovo la nostra pagina avremo questo:
menu bootstrap6

Potrai sempre cambiare la grandezza e il colore come di solito fai con il testo perché le icone fanno parte del capitolo fon nei CSS e quindi le regole che applichi al testo poi applicare anche alle icone, come color, font-size padding e altre. 

 
Letto 1000 volte