Ich arbeite in (früher Twitter) Bootstrap 2 und wollte Schaltflächen so gestalten, als wären sie normale Links. Aber nicht irgendwelche normalen Links; Diese gehen in einen <ul class="nav nav-tabs nav-stacked">
Container. Das Markup endet folgendermaßen:
<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>
Hat Bootstrap eine Möglichkeit, diese <button>
s so aussehen zu lassen, als wären sie tatsächlich <a>
s?
html
css
twitter-bootstrap
Meustrus
quelle
quelle
<button>
Elemente setzen können: getbootstrap.com/2.3.2/base-css.html#buttonshref
. Grundsätzlich muss ich entweder die Funktionsweise meines Formulars dramatisch ändern oder die Präsentation ändern. Diese Frage ist mein Versuch herauszufinden, wie einfach es ist, die Präsentation zu ändern.Antworten:
Wie in der offiziellen Dokumentation angegeben , wenden Sie einfach die Klasse (n) an
btn btn-link
:Zum Beispiel mit dem von Ihnen angegebenen Code:
quelle
<a>
Tags zu funktionieren ...Lass einfach einen normalen Link wie einen Button aussehen :)
"role" in einem href-Code lässt ihn wie eine Schaltfläche aussehen. Sie können weitere Variablen wie class hinzufügen.
quelle
I wanted to style buttons as though they were normal links
Dies ist das Gegenteil: Srole
Attribut ist kein gültiges Attribut für dasa
Element. ( w3.org/TR/html5/text-level-semantics.html#the-a-element )Fügen Sie einfach remove_button_css als Klasse zu Ihrem Button-Tag hinzu. Sie können den Code für Link 1 überprüfen
Zusätzliche Stile Bearbeiten
Addiere
color: #337ab7;
und:hover
und:focus
passe zu OOTB (bootstrap3)quelle
:hover
und:focus
für eine engere Übereinstimmung mit bootstrap3.In Bootstrap 3 funktioniert dies gut für mich:
Verwendet wie:
Demo
quelle
Entfernen Sie einfach die Hintergrundfarbe und die Ränder und fügen Sie Hover-Effekte hinzu. Hier ist eine Geige: http://jsfiddle.net/yPU29/
CSS:
quelle
Ich habe alle hier veröffentlichten Beispiele ausprobiert, aber sie funktionieren nicht ohne zusätzliches CSS. Versuche dies:
Funktioniert perfekt ohne zusätzliches CSS.
quelle