เพิ่มไอคอนเพื่อส่งปุ่มใน twitter bootstrap 2


227

ฉันต้องการใช้ไอคอน bootstrap twitter บนปุ่มส่งแบบฟอร์มของฉัน

ตัวอย่างใน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>

2
ฉันพยายามทำสิ่งนี้มาระยะหนึ่งแล้วโดยไม่ประสบความสำเร็จ โดยพื้นฐานแล้วคุณไม่สามารถเพิ่มองค์ประกอบ html ภายในค่าของปุ่ม
John Goodman

@JohnGoodman นั่นควรเป็นคำตอบไม่ใช่ความคิดเห็น คำตอบที่ได้รับการยอมรับเป็นวิธีการแก้ปัญหาไม่ใช่เพื่อตอบคำถามโดยตรง
cartbeforehorse

คำตอบ:


394

คุณสามารถใช้แท็กปุ่มแทนการป้อนข้อมูล

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

12
วิธีนี้ใช้งานได้ แต่โปรดดูw3schools.com/tags/tag_button.aspสำหรับข้อมูลเพิ่มเติมเกี่ยวกับความหมายของแท็กปุ่มและผลเบราว์เซอร์ข้าม ใช้สิ่งนี้ด้วยความระมัดระวังโดยเฉพาะอย่างยิ่งกับแบบฟอร์ม
Matenia Rossides

10
ฉันได้ทดสอบสิ่งนี้ใน Chrome, Firefox, Safari (บน win7) และ IE8 ภายในแท็ก <form> เป็นปุ่มส่งสำเร็จ
Mr Bell

4
ปัญหาเดียวที่ฉันมีกับวิธีนี้คือถ้ามีปุ่มอื่น ๆ ในแบบฟอร์มจากนั้นแบบฟอร์มของคุณจะไม่ส่งเมื่อกดปุ่ม Enter บนแป้นพิมพ์เนื่องจากปุ่มอื่นปุ่มใดปุ่มหนึ่งจะมีความสำคัญกว่า การแก้ไขปัญหาใด ๆ ที่รู้จักกัน?
Jeshurun

2
นี่คือสิ่งที่ฉันกำลังทำอยู่ อย่างไรก็ตามไอคอนไม่ปรากฏหลังจากฉันเพิ่มใน<i>แท็ก มันน่าคลั่งมากจนกระทั่งฉันพบว่าฉันต้องล้างแคช หากคุณพบปัญหาเดียวกันผู้คนกดปุ่มCtrl+F5เพื่อล้างแคชและรีเฟรชและดูไอคอนอันรุ่งโรจน์!
Aditya MP

2
ฉันต้องการเพิ่มonClick="submit();"
TimP

67

ฉันคิดว่าคุณสามารถใช้แท็กป้ายกำกับเพื่อจุดประสงค์นี้ นี่คือตัวอย่างของตัวนำทาง HTML bootstrap twitter:

<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) จากนั้นคุณซ่อนการส่งอินพุตจริง ผู้ใช้สามารถคลิกที่องค์ประกอบป้ายกำกับและยังคงผ่านการส่งแบบฟอร์ม


9
สำหรับฉันนี่เป็นสิ่งที่ดีที่สุดของทั้งสองโลก คุณได้รับสไตล์ที่คุณต้องการและไม่ได้ใช้ลิงค์หรือจาวาสคริปต์
AaronLS

1
ขณะนี้ใช้การจัดแต่งทรงผมและดูดี แต่มันก็จะหยุดการส่งแบบฟอร์มเมื่อผู้ใช้กด Enter ในช่องใส่ (ทดสอบเฉพาะ FF17 เท่านั้น)
Richard

1
เห็นได้ชัดว่าทางออกที่ดีที่สุดสำหรับฉัน ไชโย!
Armel Larcier

14

ฉันคิดว่าคุณควรลองFontAwesomeนี้ออกแบบมาเพื่อใช้กับ Twitter Bootstrap

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

11

คุณสามารถเพิ่ม <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 () จะช่วยให้มั่นใจว่าการเข้าสู่ระบบยังคงทำงานโดยไม่มี JavaScript และ jQuery ตามปุ่มส่งปกติ (มีผู้ใช้ลิงค์ w3m และเบราว์เซอร์ที่คล้ายกัน) แต่ให้ปุ่มแฟนซีพร้อมไอคอนหากเป็นไปได้


ฉันขอให้คุณตอบคำถามของฉันถ้าคุณมีความคิดเกี่ยวกับมัน stackoverflow.com/questions/11295378/…
Krishnaprasad Varma


7

ฉันต้องการไอคอน 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


2
ดังนั้นจะเกิดอะไรขึ้นเมื่อเครื่องมือค้นหารวบรวมข้อมูลเว็บไซต์ของคุณเห็นลิงก์ที่เรียกว่า 'ลบ' ตัดสินใจ "โอ้ฉันคิดว่าฉันจะติดตามลิงก์นั้น" และเริ่มยุ่งกับฐานข้อมูลของคุณ ฉันถูกบอกเสมอว่าควรทำการเปลี่ยนแปลงด้วยการดำเนินการที่ไม่ใช่ GET เสมอด้วยเหตุผลนั้น
Asfand Qazi

เขาอาจใช้การอนุญาตสำหรับลิงก์ลบคนส่วนใหญ่ทำ
Noz

2
หัวข้อปิดเนื่องจาก OP ไม่ได้ถามเกี่ยวกับทางรถไฟ แต่ ... Rails ใช้วิธีการลบอย่างแท้จริงเมื่อรวมการเชื่อมโยงหลายมิติประเภทนี้ผ่านทางจาวาสคริปต์ที่ไม่สร้างความรำคาญ หากมีคนขอลิงค์นั้นโดยตรงค่าเริ่มต้นจะแสดงระเบียนนั้นไม่ใช่ลบทิ้ง ดูคำตอบนี้เพื่อดูรายละเอียดเพิ่มเติมได้ที่: stackoverflow.com/a/2809412/252290
levous

นี่เป็นเรื่องเกี่ยวกับปุ่มส่งโดยเฉพาะไม่ใช่แท็กจุดยึด
pixelearth

6

มีวิธีหนึ่งวิธีที่จะได้รับ (บูตของ) glyphicons 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คือความกว้างของ glyphicon เดียว) ที่ระดับล่างสุดคือทั้งหมดglyphicons-halflings.pngและที่ระดับล่าง (ครอบคลุมองค์ประกอบทั้งหมด) จึงมีการไล่ระดับพื้นหลังแบบเดียวกันที่ระดับบนสุด

-48px 0pxเป็นตัวเลือกไอคอนค้นหา ( icon-search) แต่มันง่ายที่จะแสดงไอคอนอื่น ๆ

หากมีคนต้องการเอ:hoverฟเฟกต์พื้นหลังจะต้องพิมพ์อีกครั้งในแบบฟอร์มเดียวกัน


แม้ว่าวิธีนี้อาจใช้งานได้ แต่ก็ไม่ได้สวยงามเท่าการใช้ <button type = "submit"> และยากที่จะรักษา
Richard

4

ฉันได้สิ่งนี้เพื่อการทำงาน แต่มีข้อควรระวังเล็กน้อยที่ฉันยังไม่ได้รับการแก้ไข

อย่างไรก็ตามนี่เป็นวิธีที่ทำได้:

ใช้ปุ่มอินพุตเฉลี่ยของคุณ:

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

ตัดไอคอนที่คุณต้องการสำหรับปุ่มส่งของคุณออกจากไฟล์ sprite glyphicons ตรวจสอบให้แน่ใจว่าเป็นภาพขนาด 14x14 พิกเซล ใช่ในสถานการณ์ที่เหมาะสมคุณสามารถนำสไปรต์กลับมาใช้ใหม่ได้และหากใครก็ตามที่คิดว่าออกมาฉันยินดีที่จะได้ยินว่ามันเสร็จสิ้นแล้ว :-)

เมื่อคุณทำเช่นนั้นคุณสามารถเขียน 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


1

ฉันคิดว่ามันเป็นทางออกสำหรับปัญหาของคุณ

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

1

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


1
คำถามเกี่ยวกับการส่ง
กริกอ Kislin

นี่คือ bootstrap 3 - คำถามเกี่ยวกับรูปแบบ bootstrap 2 ซึ่งใช้รูปแบบอื่นสำหรับการแสดงไอคอน
Calaelen


-1

ฉันเดาวิธีที่ดีกว่านี้ใช้งานได้ดีสำหรับฉัน

<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>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.