Як поставити посилання на кнопку за допомогою bootstrap?

92

Як можна покласти посилання на кнопку із завантажувальним ремінцем?

У документації до бутстрапа є 4 методи:

<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">

Перший не працює для мене, жодна кнопка не відображається, лише текст із посиланням має відчуття, що тема використовується.

Другий показує кнопку, що я хочу, але який код робить посилання кнопки на іншу сторінку при натисканні?

Ура

— Філаїй
джерело

2

jsfiddle.net/Lstcymqo проблема може бути в темі, яку ви використовуєте

— linktoahref

У чому різниця між кнопками та посиланнями?

— Єретична мавпа

67

Ви можете викликати функцію при натисканні на кнопку.

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

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

АБО Використовуйте цей Кодекс

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

— розробники
джерело

22

Досить погано прийнята відповідь: як аналізують ваші посилання веб-сканери? Без заголовка, без цілі, це не посилання, це перенаправлення ...

— hugsbrugs

8

Це абсолютно непотрібно і дуже погано для SEO. Погляньте на моє рішення нижче ( stackoverflow.com/a/44130105/1202214 ).

— Андреас Бергстрем,

1

Хороша відповідь мені.

— Пн1

135

Якщо вам дійсно не потрібен елемент button, просто перемістіть класи за звичайним посиланням:

<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>

І навпаки, ви також можете змінити кнопку, яка відображатиметься як посилання:

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

— Доменік Д.
джерело

11

набагато краща відповідь, ніж прийнята - не потрібно javascript .. дякую

— Баладжі Крішнан

3

Будьте в курсі семантики та доступності, коли вам слід використовувати кнопку, а коли потрібно використовувати посилання. Як правило, кнопка для дій на сторінці та посилань для вмісту на сторінці або для відходу від сторінки.

— James Westgate

Другий варіант - кращий;)

— Патрос

131

Найпростішим рішенням є перший із ваших прикладів:

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

Причиною того, що у вас це не працює, є, швидше за все, проблема в темі, яку ви використовуєте. Немає жодних причин вдаватися до цього здутою додатковою розміткою або вбудованим Javascript.

— Андреас Бергстрем
джерело

6

Цей найлегший для всіх.

— Nana Partykar

2

Однокласні - найкращі;)

— Іван

12

Ще одна хитрість, щоб колір посилання працював коректно всередині <button>розмітки

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

Будь ласка, майте на увазі, що в bs4 beta, наприклад, btn-primary-outlineзмінено наbtn-outline-primary

— Сільван
джерело

btn-outline-primaryі btn-outline-primaryце однакові речі. Чи є помилка?

— ismailarilik

Це спрацювало для мене, оскільки якірний стиль був переповнений елементами теми jquery ui

— Avagut

Акуратний фокус, який успадковує колір

— Шон Маккарті

9

Це я вирішив

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

— екг
джерело

3

Поєднуючи наведені вище відповіді, я знаходжу просте рішення, яке, ймовірно, допоможе і вам:

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

просто додавши вбудований код JS, ви можете перетворити кнопку у посилання та зберегти його дизайн.

— HA
джерело

2

Ви можете просто додати наступний код;

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

— Іш
джерело