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

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

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

Второй показывает кнопку, которую я хочу, но какой код заставляет кнопку ссылаться на другую страницу при нажатии?

Ура

html twitter-bootstrap button hyperlink Филайы
источник
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>
Иш
источник