Programing

트위터 부트 스트랩 2에 버튼을 제출하기 위해 아이콘 추가

lottogame 2020. 4. 21. 08:18
반응형

트위터 부트 스트랩 2에 버튼을 제출하기 위해 아이콘 추가

양식 입력 제출 버튼에서 트위터 부트 스트랩 아이콘을 사용하고 싶습니다.

http://twitter.github.com/bootstrap/base-css.html#icons 의 예제는 주로 스타일 하이퍼 링크를 보여줍니다.

가장 가까운 것은 버튼 옆에 아이콘이 표시되지만 내부에는 표시되지 않는 것입니다.

<div class="input-prepend">
   <span class="add-on"><i class="icon-user icon-white"></i></span>
   <input type="submit" class="btn-primary" value="Login" >
</div>

입력 대신 버튼 태그를 사용할 수 있습니다

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

이 목적으로 레이블 태그를 사용할 수 있다고 생각합니다. 다음은 트위터 부트 스트랩 HTML 탐색 모음의 샘플입니다.

<form class="navbar-search">
    <input type="text" class="search-query" placeholder="Search here" />        
    <label for="mySubmit" class="btn"><i class="icon-search icon-white"></i> Search me</label>
    <input id="mySubmit" type="submit" value="Go" class="hidden" />
</form>

기본적으로 입력에 대한 레이블 요소 (type = submit)를 얻은 다음 실제 입력 제출을 숨 깁니다. 사용자는 레이블 요소를 클릭하고 양식 제출을 계속 진행할 수 있습니다.

Twitter Bootstrap과 함께 사용하도록 설계된 FontAwesome을 사용해보십시오 .

<button class="btn btn-primary icon-save">Button With Icon</button>

아이콘이있는 <a/>를 추가하고 양식을 제출하는 JavaScrit 조치를 바인딩 할 수 있습니다. 필요한 경우 원래 제출 단추의 이름 + 값의 이름과 값이 숨겨진 속성에있을 수 있습니다. jQuery를 사용하면 간단합니다. 순수한 JavaScript 버전을 피할 수있게 해주세요.

이것이 원래 형식이라고 가정하십시오.

<form method="post" id="myFavoriteForm>
   ...other fields...
   <input class="btn btn-primary" type="submit" name="login" value="Let me in" />
</form>

다음과 같이 변경하십시오.

<form method="post" id="myFavoriteForm">
   ...other fields...
   <a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton">
      <i class="icon-user icon-white"></i>&nbsp;Let me in
   </a>
</form>

... 그리고 마법의 jQuery :

$("#myFavoriteFormSubmitButton").bind('click', function(event) {
   $("#myFavoriteForm").submit();
});

또는 사용자가 항상 양식을 제출할 수 있는지 확인하려면 (신발에서 할 것입니다) 일반 제출 버튼을 양식에 그대로두고 jQuery .hide ()로 숨길 수 있습니다. 일반적인 제출 버튼 (링크, w3m 및 유사한 브라우저를 사용하는 사람들이 있음)에 따라 JavaScript 및 jQuery없이 로그인이 계속 작동하지만 가능한 경우 아이콘이있는 멋진 버튼을 제공합니다.

부트 스트랩 3 으로이 작업을 수행하는 새로운 방법이 있습니다.

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

그것은에서의 부트 스트랩 glyphicons의 "사용 방법"에서 페이지 :

Twitter Bootstrap 아이콘을 기본 Rails 양식으로 만들고 싶었고이 게시물을 보았습니다. 조금 검색 한 후, 나는 그것을하는 쉬운 방법을 알아 냈습니다. Rails를 사용하고 있는지 확실하지 않지만 여기에 코드가 있습니다. 핵심은 블록을 link_to view helper에 전달하는 것입니다.

<tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.id %></td>
        <td><%= link_to product.name, product_path(product) %></td>
        <td><%= product.created_at %></td>
        <td>
          <%= link_to(edit_product_path(product), :class => 'btn btn-mini') do %>
          Edit <i class="icon-pencil"></i>
          <% end %>

          <%= link_to(product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-mini btn-danger') do %>
          Delete <i class="icon-trash icon-white"></i>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to(new_product_path, :class => 'btn btn-primary') do %>
    New <i class="icon-plus icon-white"></i>
<% end %>

Rails를 사용하지 않는 경우 아이콘이있는 링크의 출력 HTML은 다음과 같습니다 (편집, 삭제 및 새 제출 버튼 용).

# Edit
<a href="/products/1/edit" class="btn btn-mini">Edit <i class="icon-pencil"></i></a>

# Delete
<a href="/products/1" class="btn btn-mini btn-danger" data-confirm="Are you sure?" data-method="delete" rel="nofollow"> Delete <i class="icon-trash icon-white"></i></a>

# New
<a href="/products/new" class="btn btn-primary">New <i class="icon-plus icon-white"></i></a>

완성 된 결과의 스크린 샷 링크는 다음과 같습니다. http://grab.by/cVXm

(부트 스트랩의) 글리프 콘을로 가져 오는 방법이 있습니다 input type="submit". CSS3 다중 배경 사용.

HTML :

<form class="form-search">
   …
   <input type="submit" value="Search">
</form>

CSS :

.form-search input[type="submit"] {
    padding-left:16px; /* space for only one glyphicon */
    background:-moz-linear-gradient(top,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        -moz-linear-gradient(top,#fff 0%,#eee 100%); /* FF hack */
    /* another hacks here  */
    background:linear-gradient(to bottom,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */
}

여러 배경이 겹치는 경우 맨 위에있는 background:표기법의 첫 번째 배경이 됩니다. 따라서 상단에는 16px왼쪽에서 들여 16px쓴 배경 ( 단일 글리프 콘의 너비)이 있고 하단에는 전체가 glyphicons-halflings.png있고 맨 아래에는 (모든 요소를 ​​덮음) 상단과 동일한 배경 그라데이션이 있습니다.

-48px 0px검색 컷 아이콘 ( icon-search)이지만 다른 아이콘을 쉽게 표시 할 수 있습니다.

누군가 :hover효과 가 필요하면 , 같은 형식으로 배경 을 다시 입력해야합니다.

나는 이것을 작동 시키지만, 아직 해결하지 않은 몇 가지주의 사항이 있습니다.

어쨌든, 이것이 완료된 방법입니다.

평균 입력 버튼을 사용하십시오.

<input type="submit" class="btn btn-success" value="Save">

글리프 콘 스프라이트 파일에서 제출 버튼에 사용할 아이콘을 잘라 내고 14x14 px 이미지인지 확인하십시오. 그렇습니다. 이상적인 상황에서 스프라이트를 재사용 할 수 있습니다. 누군가 알아 낸 경우 어떻게되는지 알게되어 기쁩니다. :-)

일단 그렇게하면 다음과 같이 입력 버튼에 CSS를 작성할 수 있습니다.

input[type='submit'] {
    background-image: url('../images/submit-icon.png'), #62C462; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #62C462, #51A351); /* Standard syntax; must be the last statement */
    background-repeat: no-repeat;
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

input[type='submit']:hover {
    background-image: url('../images/submit-icon.png'), #51A351; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
}

Firefox 14, Chrome 21에서 작동

IE 9에서 작동하지 않습니다

tl; dr : 약간의 CSS를 사용하면 자동으로 제출 버튼에 아이콘을 넣을 수 있지만 아이콘을 별도의 파일에 넣어야하며 Internet Explorer에서 작동하지 않습니다.

귀하의 문제에 대한 해결책이라고 생각합니다.

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
 
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 
    </a>
  </p> 
</div>

</body>
</html>

추가 클래스와 함께 입력 추가 기능 사용 

<div class="input-append">
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

나는이 더 좋은 방법을 추측, 나에게 잘 작동합니다.

<form name="myform">
<!-- form fields -->
   <a href="#" class="btn btn-success" onclick="document.myform.submit();">
     Submit <i class="icon-plus"></i>&nbsp; Icon
   </a>
</form>

참고 URL : https://stackoverflow.com/questions/9376192/add-icon-to-submit-button-in-twitter-bootstrap-2

반응형

'Programing' 카테고리의 다른 글

Rails에서 상대 시간은 어떻게합니까?  (0) 2020.04.21
SSL 핸드 셰이크 경고 : Java 1.7.0으로 업그레이드 한 후 unrecognized_name 오류  (0) 2020.04.21
사용자가 로그인했는지 확인하는 방법 (user.is_authenticated를 올바르게 사용하는 방법)?  (0) 2020.04.21
N 분마다 오프셋을 더한 Cron 작업 실행  (0) 2020.04.21
무료 XML 형식 도구  (0) 2020.04.21

'Programing'의 다른글

  • 현재글트위터 부트 스트랩 2에 버튼을 제출하기 위해 아이콘 추가

관련글

댓글

티스토리툴바