Как сделать <button> в Bootstrap похожей на обычную ссылку в навигационных вкладках?

Question

Как сделать <button> в Bootstrap похожей на обычную ссылку в навигационных вкладках?

81

Я работаю (ранее Twitter) Bootstrap 2, и мне хотелось стилизовать кнопки, как если бы они были обычными ссылками. Однако не только обычные ссылки; они идут в контейнер <ul class="nav nav-tabs nav-stacked">. Разметка закончится следующим образом:

<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li><button type="submit" name="op" value="Link 1">Link 1</button></li>
        <li><button type="submit" name="op" value="Link 2">Link 2</button></li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

Есть ли у Bootstrap какой-нибудь способ сделать эти <button> похожими на то, что они были на самом деле <a> s?

meustrus 14 нояб. 2013, в 16:00

Источник

1

Вот все классы, которые вы можете поместить в элементы <button> : getbootstrap.com/2.3.2/base-css.html#buttons
Rocket Hazmat 14 нояб. 2013, в 15:43
6

Почему бы не использовать <a> вместо <button>?
VVL 14 нояб. 2013, в 15:43
4

Потому что мне нужно поддерживать состояние формы, которое находится в остальной части формы. Главным образом это означает идентификатор сеанса формы, а превращение его в ссылку в действительности означает переключение всей формы на GET и помещение этих данных в href . Таким образом, в основном я должен либо кардинально изменить работу своей формы, либо изменить представление. Этот вопрос - моя попытка выяснить, насколько легко изменить презентацию.
meustrus 14 нояб. 2013, в 16:00
0

@VitorVentur в моем случае использования: вкладка по умолчанию имеет текстовую область для ввода уценки. Вкладка 2 имеет предварительный просмотр HTML. Поэтому я не хочу, чтобы на вкладке 2 был URL, который открывает ее по умолчанию. Если я использую ссылки, то пользователи могут щелкнуть средней кнопкой мыши и увидеть бессмысленное расположение адреса при наведении курсора. Кнопка предотвращает это.
Ciro Santilli 新疆改造中心六四事件法轮功 05 окт. 2014, в 09:32

Показать ещё 2 комментария

Теги:

twitter-bootstrap

html

css

5 ответов

Ещё вопросы

Вот все классы, которые вы можете поместить в элементы <button> : getbootstrap.com/2.3.2/base-css.html#buttons
Почему бы не использовать <a> вместо <button>?
Потому что мне нужно поддерживать состояние формы, которое находится в остальной части формы. Главным образом это означает идентификатор сеанса формы, а превращение его в ссылку в действительности означает переключение всей формы на GET и помещение этих данных в href . Таким образом, в основном я должен либо кардинально изменить работу своей формы, либо изменить представление. Этот вопрос - моя попытка выяснить, насколько легко изменить презентацию.
@VitorVentur в моем случае использования: вкладка по умолчанию имеет текстовую область для ввода уценки. Вкладка 2 имеет предварительный просмотр HTML. Поэтому я не хочу, чтобы на вкладке 2 был URL, который открывает ее по умолчанию. Если я использую ссылки, то пользователи могут щелкнуть средней кнопкой мыши и увидеть бессмысленное расположение адреса при наведении курсора. Кнопка предотвращает это.

SW4 · Answer 1 · 2013-11-14T17-32-00.000Z

Как указано в официальной документации, просто примените класс btn btn-link:

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Например... с кодом, который вы предоставили:

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />


<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 1">Link 1</button>
        </li>
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 2">Link 2</button>
        </li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

Это делает его больше не похожим на кнопку. Однако он не отображается так, как я хочу, в разметке ul.nav. CSS для этой разметки работает только с тегами <a> ...

user3699060 · Answer 2 · 2014-06-02T12-20-00.000Z

Просто сделайте регулярную ссылку похожим на кнопку:)

<a href="#" role="button" class="btn btn-success btn-large">Click here!</a>

"роль" внутри кода href делает его похожим на кнопку, из которого вы можете добавить больше переменных, таких как класс.

Это полезно, но не отвечает на заданный вопрос.
I wanted to style buttons as though they were normal links это наоборот: S
Атрибут role не является допустимым атрибутом для элемента a . ( w3.org/TR/html5/text-level-semantics.html#the-a-element )
Это противоположность того, что просят

Rubyist · Answer 3 · 2013-11-14T17-49-00.000Z

Просто добавьте remove_button_css как класс в свой тег кнопки. Вы можете проверить код для Link 1

.remove_button_css { 
  outline: none;
  padding: 5px; 
  border: 0px; 
  box-sizing: none; 
  background-color: transparent; 
}

Редактирование дополнительных стилей

Добавьте color: #337ab7; и :hover и :focus в соответствие с OOTB (bootstrap3)

.remove_button_css:focus,
.remove_button_css:hover {
    color: #23527c;
    text-decoration: underline;
}

Работает отлично. Добавлено :hover и :focus для более близкого совпадения с bootstrap3.

Alexey Mezenin · Answer 4 · 2016-02-14T12-38-00.000Z

Я пробовал все примеры, размещенные здесь, но они не работают без дополнительного CSS. Попробуйте следующее:

<a href="http://www.google.com"><button type="button" class="btn btn-success">Google</button></a>

Работает отлично, без каких-либо дополнительных CSS.

Пожалуйста, объясните отрицательный голос.

oneday · Answer 5 · 2014-06-02T11-15-00.000Z

Просто избавьтесь от цвета фона, границ и добавьте эффекты зависания. Здесь скрипка: http://jsfiddle.net/yPU29/

<form action="..." method="post">
<div class="row-fluid">
<!-- Navigation for the form -->
<div class="span3">
  <ul class="nav nav-tabs nav-stacked">
    <li><button type="submit" name="op" value="Link 1" class="button-link">Link 1</button></li>
    <li><button type="submit" name="op" value="Link 2" class="button-link">Link 2</button></li>
    <!-- ... -->
  </ul>
</div>
<!-- The actual form -->
<div class="span9">
  <!-- ... -->
</div>
</div>
</form>

CSS

.button-link {
background-color: transparent;
border: none;
}

.button-link:hover {
color: blue;
text-decoration: underline;
}

Я добавил еще несколько элементов CSS, чтобы он выглядел точно как выпадающая ссылка. Всего: .button-link {display: block; ширина: 100%; обивка: 3px 20px; ясно: оба; цвет: # 333; пустое пространство: nowrap; цвет фона: прозрачный; граница: нет; выравнивание текста: слева; } .button-link: hover {background-color: # f5f5f5; }