Bagaimana cara membuat <button> di Bootstrap terlihat seperti tautan biasa di nav-tab?

110

Saya bekerja di (sebelumnya Twitter) Bootstrap 2 dan saya ingin mengatur gaya tombol seolah-olah itu adalah tautan normal. Bukan sembarang tautan normal; ini akan dimasukkan ke dalam <ul class="nav nav-tabs nav-stacked">wadah. Markup akan berakhir seperti ini:

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

Apakah Bootstrap memiliki cara untuk membuat <button>tampilan ini terlihat seperti aslinya <a>?

html css twitter-bootstrap

— meustrus
sumber

2

Berikut adalah semua kelas yang dapat Anda masukkan ke dalam <button>elemen: getbootstrap.com/2.3.2/base-css.html#buttons

— Rocket Hazmat

6

Mengapa tidak menggunakan <a> sebagai gantinya <button>?

— VVL

5

Karena saya perlu mempertahankan kondisi formulir yang ada di formulir lainnya. Terutama itu berarti ID sesi formulir, dan menjadikannya benar-benar tautan berarti mengalihkan seluruh formulir ke GET dan memasukkan data itu ke dalam href. Jadi pada dasarnya saya harus secara dramatis mengubah cara kerja formulir saya atau mengubah presentasi. Pertanyaan ini adalah upaya saya untuk mencari tahu betapa mudahnya mengubah presentasi.

— meustrus

@VitorVenturin kasus penggunaan saya: tab default memiliki textarea untuk memasukkan penurunan harga. Tab 2 memiliki pratinjau HTML. Jadi saya tidak ingin Tab 2 memiliki URL yang membukanya secara default. Jika saya menggunakan tautan, maka pengguna dapat mengklik tengah dan melihat lokasi alamat yang tidak berarti di hover. Tombol mencegahnya.

— Ciro Santilli 郝海东冠状病六四事件法轮功

198

Seperti disebutkan dalam dokumentasi resmi , cukup terapkan kelasnyabtn 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>

Misalnya, dengan kode yang Anda berikan:

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

Luaskan cuplikan

— SW4
sumber

8

Itu membuatnya tidak lagi terlihat seperti tombol. Namun, itu tidak ditampilkan seperti yang saya inginkan dalam markup yang ditumpuk ul.nav. CSS untuk markup itu tampaknya hanya berfungsi dengan <a>tag ...

— meustrus

20

Menunjukkan secara berbeda dari tautan.

— Ciro Santilli 郝海东冠状病六四事件法轮功

1

di Bootstrap 3, tombol dengan gaya seperti ini terlihat seperti tautan tetapi mereka memiliki terlalu banyak bantalan di sekitarnya yang mengacaukan tata letak. TAPI Anda dapat memperbaikinya dengan menambahkan sedikit CSS (lihat jawaban @mcNux di bawah)

— Martin CR

24

Buat saja tautan biasa terlihat seperti tombol :)

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

"role" di dalam kode href membuatnya tampak seperti tombol, ofc Anda dapat menambahkan lebih banyak variabel seperti kelas.

— pengguna3699060
sumber

22

Ini berguna tetapi tidak menjawab pertanyaan yang diajukan.

— meustrus

18

I wanted to style buttons as though they were normal linksini sebaliknya: S

— SW4

roleatribut bukan atribut yang valid untuk aelemen. ( w3.org/TR/html5/text-level-semantics.html#the-a-element )

— nZeus

1

Ini kebalikan dari apa yang ditanyakan

— Kunal

Masalah dengan jawaban ini adalah bahwa teks tombol dalam kasus ini sebenarnya ditata seperti tautan yang tidak bagus (misalnya jika Anda menggunakan "$ link-decoration: underline! Default;" dalam _variables.scss Anda). Ini mungkin harus diperhatikan oleh pengembang - mungkin ini bukan yang ingin mereka capai. Tautan harus memiliki gaya SEPENUHNYA sebagai tombol.

— Dmitry Somov

11

Cukup tambahkan remove_button_css sebagai kelas ke tag tombol Anda. Anda dapat memverifikasi kode untuk Tautan 1

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

masukkan deskripsi gambar di sini

Edit Gaya Ekstra

Tambahkan color: #337ab7;dan :hoverdan :focusuntuk mencocokkan OOTB (bootstrap3)

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

— Rubyist
sumber

Bekerja dengan sempurna. Ditambahkan :hoverdan :focusuntuk pertandingan yang lebih dekat dengan bootstrap3.

— Freedomn-m

6

Di bootstrap 3, ini berfungsi dengan baik untuk saya:

.btn-link.btn-anchor {
    outline: none !important;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

Digunakan seperti:

<button type="button" class="btn-link btn-anchor">My Button</button>

Demo

— mcNux
sumber

Terima kasih, inilah yang saya butuhkan. Bootstrap 3 .btn-link tidak memotongnya dan Anda hanya perlu menambahkan kelas sendiri.

— Rafał Cieślak

YA ini bekerja dengan sempurna. Secara instan tata letak formulir BS3 saya memiliki jarak vertikal yang benar antara baris. Luar biasa.

— Martin CR

2

Singkirkan saja warna latar belakang, batas dan tambahkan efek hover. Ini biola: 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;
}

— suatu hari
sumber

1

Saya menambahkan beberapa elemen CSS lagi agar terlihat persis seperti tautan dropdown. Secara total: .button-link {display: block; lebar: 100%; padding: 3px 20px; jelas: keduanya; warna: # 333; ruang putih: nowrap; background-color: transparan; batas: tidak ada; teks-rata: kiri; } .button-link: hover {background-color: # f5f5f5; }

— Andy Beverley

1

Saya sudah mencoba semua contoh, yang diposting di sini, tetapi tidak akan berfungsi tanpa CSS tambahan. Coba ini:

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

Bekerja dengan sempurna tanpa CSS tambahan.

— Alexey Mezenin
sumber

Ini bukan HTML yang valid. stackoverflow.com/a/6393863/496046

— gemetar