Как поставить ссылку на кнопку с бутстрапом?

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

В чем разница между кнопками и ссылками?

— Heretic Monkey

68

Вы можете вызвать функцию при нажатии кнопки.

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

8

Это совершенно не нужно и очень плохо для SEO. Взгляните на мое решение ниже ( stackoverflow.com/a/44130105/1202214 ).

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

1

Хороший мне ответ.

— Пн,

135

Если вам действительно не нужен элемент кнопки, просто переместите классы на обычную ссылку:

<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

Помните о семантике и доступности, когда вам следует использовать кнопку, а когда - ссылку. Как правило, кнопка для действий на странице и ссылки для содержимого на странице или для перехода со страницы.

— Джеймс Вестгейт

Второй вариант лучше;)

— Пафрос

132

Самое простое решение - это первый из ваших примеров:

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

Причина, по которой он у вас не работает, скорее всего, как вы говорите, связана с используемой вами темой. Нет причин прибегать к раздутой дополнительной разметке или встроенному Javascript для этого.

— Андреас Бергстрём
источник

6

Этот самый простой для всех.

— Нана Партикар

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, например, btn-primary-outlineизменено наbtn-outline-primary

— Сильван
источник

btn-outline-primaryи btn-outline-primaryто же самое. Есть опечатка?

— ismailarilik

Это сработало для меня, так как стиль привязки

— перекрывался

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>

— Иш
источник