html - 如何制作一个在 Bootstrap 中看起来像导航选项卡中的普通链接？

Question

我在（以前的 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>s 看起来像它们实际上是<a>s 吗？

Answer 1

As noted in the official documentation, simply apply the class(es) 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>

For example, with the code you have provided:

<link href="//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>

Answer 2

只需让常规链接看起来像按钮 :)

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

href 代码中的“角色”使其看起来像按钮，您可以添加更多变量，例如类。

Answer 3

只需将 remove_button_css 作为类添加到您的按钮标签。您可以验证链接 1 的代码

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

额外样式编辑

添加color: #337ab7;和匹配 OOTB (bootstrap3 :hover):focus

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

Answer 4

在引导程序 3 中，这对我很有效：

.btn-link.btn-anchor {
    outline: none !important;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

像这样使用：

<button type="button" class="btn-link btn-anchor">My Button</button>

演示

Answer 5

只需摆脱背景颜色、边框并添加悬停效果。这是一个小提琴：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;
}

Answer 6

我已经尝试了所有示例，在此处发布，但如果没有额外的 CSS，它们将无法工作。尝试这个：

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

无需任何额外的 CSS 即可完美运行。

Answer 7

这是例子，

要显示字体真棒图标或带有文本作为链接的普通按钮，只需将“linkish”类添加到您的按钮，这是一个示例：

<form method="POST" > 
  <button type="submit" class=" linkish  my-1 far fa-thumbs-down fa-2x">  </button>

  <button type="submit" class=" linkish  btn btn-primary">click me</button>

</form>

和 CSS 样式：

.linkish {
    background-color: transparent!important;
    border: 0!important;
    color: blue!important;
    cursor: pointer!important;
    display: inline!important;
    margin: 0!important;
    outline: none!important;
    padding: 0!important;
    text-decoration: none!important;
}



.linkish:hover {
 text-decoration: underline!important;
}

这只是示例，并根据您的案例/要求进行更改。

我希望这有帮助。