만드는 방법
저는 (이전의 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 처럼 보이게 할 수있는 방법이 있습니까?
공식 문서에 명시된대로 클래스를 적용하기 만하면됩니다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>
예를 들어, 제공 한 코드를 사용하면 다음과 같습니다.
<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>
일반 링크를 버튼처럼 보이게 만드십시오 :)
<a href="#" role="button" class="btn btn-success btn-large">Click here!</a>
href 코드 내부의 "역할"은 버튼처럼 보이게하고, 클래스와 같은 변수를 더 추가 할 수 있습니다.
버튼 태그에 remove_button_css를 클래스로 추가하기 만하면됩니다. Link 1의 코드를 확인할 수 있습니다.
.remove_button_css {
outline: none;
padding: 5px;
border: 0px;
box-sizing: none;
background-color: transparent;
}
추가 스타일 편집
Add color: #337ab7;
and :hover
and :focus
to match OOTB (bootstrap3)
.remove_button_css:focus,
.remove_button_css:hover {
color: #23527c;
text-decoration: underline;
}
Just get rid of the background color, borders and add hover effects. Here's a fiddle: 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;
}
In bootstrap 3, this works well for me:
.btn-link.btn-anchor {
outline: none !important;
padding: 0;
border: 0;
vertical-align: baseline;
}
Used like:
<button type="button" class="btn-link btn-anchor">My Button</button>
I've tried all examples, posted here, but they do not work without extra CSS. Try this:
<a href="http://www.google.com"><button type="button" class="btn btn-success">Google</button></a>
Works perfectly without any extra CSS.
'developer tip' 카테고리의 다른 글
PHP-두 배열을 하나의 배열로 병합 (중복 제거) (0) | 2020.08.23 |
---|---|
Eclipse / Android :“프로젝트에서 'Android Pre Compiler'빌더 실행 오류…” (0) | 2020.08.23 |
rails content_tag 도우미와 함께 html5 데이터 속성을 사용하는 가장 좋은 방법은 무엇입니까? (0) | 2020.08.23 |
Devise Secret Key가 설정되지 않았습니다. (0) | 2020.08.23 |
.NET Core 2.0에서 ConfigurationManager.AppSettings를 사용할 수 있나요? (0) | 2020.08.23 |