Il miglior tutorial gruppi di elenchi Bootstrap Nel 2024, in questo tutorial puoi imparare
Esempi,Aggiungere un badge per l'elenco dei gruppi,Esempi,Aggiungere un link alla lista dei gruppi,Esempi,Aggiungere contenuto personalizzato alla lista dei gruppi,Esempi,
gruppi di elenchi Bootstrap
In questo capitolo spiegheremo l'elenco dei gruppi. Elenco dei componenti utilizzati nella lista presentata sotto forma di contenuti complessi e personalizzati. Creare un elenco di base dei gruppi come segue:
- L'elemento <ul> Aggiungiclasse .list-gruppo.
- Per il <li> Aggiungiclasse .list-gruppo-item.
L'esempio che segue illustra questo punto:
Esempi
<ul class = "lista-gruppo">
<Li class = "lista-group-item "> libero registrazione del nome di dominio </ li>
<Li class = "lista-group-item "> libero spazio di hosting Finestra </ li>
<Li class = "lista-group-item "> Il numero di immagini </ li>
<Li class = "lista-group-item "> 24 * 7 supporto </ li>
<Li class = "lista-group-item "> Aggiornamento costo annuale </ li>
</ Ul>
Prova » I risultati sono i seguenti:
Aggiungere un badge per l'elenco dei gruppi
Siamo in grado di aggiungere componenti distintivo a qualsiasi elemento della lista, si posiziona automaticamente sulla destra. Solo è necessario aggiungere un<span class = "badge"> per l'elemento <li>.L'esempio che segue illustra questo punto:
Esempi
<ul class = "lista-gruppo">
<Li class = "lista-group-item "> libero registrazione del nome di dominio </ li>
<Li class = "lista-group-item "> libero spazio di hosting Finestra </ li>
<Li class = "lista-group-item "> Il numero di immagini </ li>
<Li class = "lista-group-item ">
<span class = "badge"> nuovo </ span> 24 * 7 supporto </ li>
<Li class = "lista-group-item "> Aggiornamento costo annuale </ li>
<Li class = "lista-group-item ">
<span class = "badge"> nuovo </ span> sconto </ li>
</ Ul>
Prova » I risultati sono i seguenti:
Aggiungere un link alla lista dei gruppi
Usando il tag di ancoraggio al posto di un elenco di elementi, possiamo aggiungere un link alla lista dei gruppi. Dobbiamo usare <div> al posto di <ul> elemento. L'esempio che segue illustra questo punto:
Esempi
<A href = "#" class = "lista-group-elemento attivo"> di dominio gratuito registrazione del nome </ a>
<A href = "#" class = "lista-group-item "> 24 * 7 supporto </ a>
<A href = "#" class = "lista-group-item "> hosting gratuito spazio Finestra </ a>
<A href = "#" class = "lista-group-item "> Il numero di immagini </ a>
<A href = "#" class = "lista-group-item "> Aggiornamento costo annuale </ a>
Prova » I risultati sono i seguenti:
Aggiungere contenuto personalizzato alla lista dei gruppi
Abbiamo aggiunto link nella parte superiore della lista dei gruppi di aggiungere contenuti HTML arbitrario. L'esempio che segue illustra questo punto:
Esempi
<div class = "lista-gruppo">
<A href = "#" class = "lista-group-elemento attivo">
<H4 class = "lista-gruppi-item -heading"> pacchetto Portal </ h4>
</ A>
<A href = "#" class = "lista-group-item ">
<H4 class = "lista-gruppi-item -heading"> la registrazione gratuita nome di dominio </ h4>
<P class = "lista-gruppi-item -text"> Si sarà libero di registrazione del nome di dominio attraverso il sito web. </ P>
</ A>
<A href = "#" class = "lista-group-item ">
<H4 class = "lista-gruppi-item -heading"> 24 * 7 supporto </ h4>
<P class = "lista-gruppi-item -text"> Offriamo 24 * 7 supporto. </ P>
</ A>
</ Div>
<div class = "lista-gruppo">
<A href = "#" class = "lista-group-elemento attivo">
<H4 class = "lista-gruppi-item -heading"> sito web aziendale pacchetto </ h4>
</ A>
<A href = "#" class = "lista-group-item ">
<H4 class = "lista-gruppi-item -heading"> la registrazione gratuita nome di dominio </ h4>
<P class = "lista-gruppi-item -text"> Si sarà libero di registrazione del nome di dominio attraverso il sito web. </ P>
</ A>
<A href = "#" class = "lista-group-item ">
<H4 class = "lista-gruppi-item -heading"> 24 * 7 supporto </ h4>
<P class = "lista-gruppi-item -text"> Offriamo 24 * 7 supporto. </ P>
</ A>
</ Div>
Prova » I risultati sono i seguenti: