Come mettere un collegamento su un pulsante con bootstrap?

92

ci sono 4 metodi nella documentazione bootstrap:

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Il primo non funziona per me, nessun pulsante mostra, solo il testo con il link, ho la sensazione che sia il tema che sto usando.

Il secondo mostra il pulsante che è quello che voglio, ma qual è il codice che fa collegare il pulsante a un'altra pagina quando viene cliccato?

Saluti

— Philayyy
fonte

2

jsfiddle.net/Lstcymqo il problema potrebbe essere con il tema che stai utilizzando

— linktoahref

Quali sono le differenze tra pulsanti e link?

— Scimmia eretica

68

È possibile chiamare una funzione all'evento clic del pulsante.

<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

<script>
function relocate_home()
{
     location.href = "www.yoursite.com";
} 
</script>

OPPURE Usa questo codice

<a href="#link" class="btn btn-info" role="button">Link Button</a>

— sviluppareersaumya
fonte

22

Una risposta accettata abbastanza male: come vengono analizzati i tuoi link dai web crawler? Nessun titolo, nessun obiettivo, non è un collegamento, è un reindirizzamento ...

— hugsbrugs

8

Questo è totalmente inutile e davvero dannoso per la SEO. Dai un'occhiata alla mia soluzione di seguito ( stackoverflow.com/a/44130105/1202214 ).

— Andreas Bergström

1

Buona risposta per me.

— Lunedì 1

135

Se non hai davvero bisogno dell'elemento button, sposta le classi su un collegamento normale:

<div class="btn-group">
    <a href="/save/1" class="btn btn-primary active">
        <i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
    </a>
    <a href="/cancel/1" class="btn btn-default">Cancel</a>
</div>

Al contrario, puoi anche modificare un pulsante in modo che appaia come un collegamento:

<button type="button" class="btn btn-link">Link</button>

— Domenico D.
fonte

11

una risposta molto migliore di quella accettata - non c'è bisogno di javascript .. grazie

— Balaji Krishnan

3

Siate consapevoli semanticamente e per l'accessibilità quando dovreste usare un pulsante e quando dovreste usare un collegamento. In genere, pulsante per le azioni sulla pagina e collegamenti per il contenuto nella pagina o per uscire dalla pagina.

— James Westgate

La seconda opzione è la migliore;)

— Pathros

132

La soluzione più semplice è il primo dei tuoi esempi:

<a href="#link" class="btn btn-info" role="button">Link Button</a>

Il motivo per cui non funziona per te è molto probabilmente, come dici tu, un problema nel tema che stai utilizzando. Non c'è motivo di ricorrere a markup extra gonfio o Javascript inline per questo.

— Andreas Bergström
fonte

6

Questo è il più facile per tutti.

— Nana Partykar

2

Le battute sono le migliori;)

— Ivan

12

Un altro trucco per far funzionare correttamente il colore del collegamento all'interno del <button>markup

<button type="button" class="btn btn-outline-success and-all-other-classes"> 
  <a href="#" style="color:inherit"> Button text with correct colors </a>
</button>

Tieni presente che in bs4 beta, ad esempio, è btn-primary-outlinecambiato inbtn-outline-primary

— silvan
fonte

btn-outline-primarye btn-outline-primarysono le stesse cose. C'è un errore di battitura?

— ismailarilik

Questo ha funzionato per me poiché lo stile dell'ancora veniva sovrastato dagli elementi del tema

— dell'interfaccia utente

9

È così che ho risolto

   <a href="#" >
      <button type="button" class="btn btn-info">Button Text</button>
   </a>

— ecg
fonte

3

Combinando le risposte di cui sopra trovo una soluzione semplice che probabilmente aiuterà anche te:

<button type="submit" onclick="location.href = 'your_link';">Login</button>

semplicemente aggiungendo codice JS inline è possibile trasformare un pulsante in un collegamento e mantenere il suo design.

— HA
fonte

2

Puoi semplicemente aggiungere il seguente codice;

<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>

— Ish
fonte