如何使Bootstrap中的看起来像导航标签中的普通链接?

I'm working in (formerly Twitter) Bootstrap 2 and I wanted to style buttons as though they were normal links. Not just any normal links, though; these are going in a <ul class="nav nav-tabs nav-stacked"> container. The markup will end up like this:

我在(以前的Twitter) Bootstrap 2工作，我想让按钮看起来像正常的链接。不只是普通的链接;这些是在

容器中。最后的标记是这样的:

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

Does Bootstrap have any way to make these <button>s look like they were actually <a>s?

Bootstrap有办法让这些s看起来像< >s吗?

5 个解决方案

#1

As noted in the official documentation, simply apply the class(es) btn btn-link:

如官方文件所述，只需应用类btn 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>

#2

Just make regular link look like button :)

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

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

"role" inside a href code makes it look like button, ofc you can add more variables such as class.

href代码中的“role”使它看起来像按钮，ofc可以添加更多的变量，比如类。

#3

Just add remove_button_css as class to your button tag. You can verify the code for Link 1

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

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

Extra Styles Edit

额外的样式编辑

Add color: #337ab7; and :hover and :focus to match OOTB (bootstrap3)

添加颜色:# 337 ab7;并且:悬浮和:焦点以匹配OOTB (bootstrap3)

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

#4

Just get rid of the background color, borders and add hover effects. Here's a fiddle: http://jsfiddle.net/yPU29/

去掉背景色、边框和鼠标悬停效果。这是一个小提琴: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:

CSS:

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

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

#5

I've tried all examples, posted here, but they do not work without extra CSS. Try this:

我已经尝试了所有的例子，贴在这里，但是如果没有额外的CSS，它们就不能工作。试试这个:

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

Works perfectly without any extra CSS.

完美的工作，没有任何额外的CSS。