Manakah class bawaan bootstrap 4 untuk menghasilkan tombol button yang lebih besar dari ukuran default?

Tombol banyak digunakan situs Web atau aplikasi. Dalam tutorial ini, kita akan membahas bagaimana menggunakan metode bootrap 3 tombol, dan bagaimana untuk menyesuaikan tombol standar dijelaskan melalui contoh, misalnya.

Table of Contents Show

Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?
Kelas apa yang digunakan dalam bootstrap untuk mengelompokkan Button dalam button group?
Apa warna dari tombol dengan class succes pada bootstrap?
Apa itu bootstrap 4?

Contoh berikut akan menunjukkan cara cepat membuat Bootstrap 3 tombol.

contoh

Bootstrap 3 tombol standar </ title><br/> <Meta name = "viewport" content = "width = device-width, awal skala = 1.0"><br/> <! - Bootstrap -><br/> <Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" Media = "screen"><br/> <Gaya><br/> body {<br/> padding: 50px<br/> }<br/> </ Style><br/> <! - HTML5 Shim dan Respond. js dukungan IE8 HTML5 asli dan pertanyaan media. -><br/> <- PERINGATAN :! Respond. Jika melalui berkas: // Lihat halaman js tidak akan bekerja. -><br/> <! - [Jika lt IE 9]><br/> <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script><br/> <Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script><br/> <! [Endif] -><br/> </ Kepala><br/> <Body><br/> <! - Tombol Standard -><br/> <Jenis Tombol = "tombol" class = "btn btn-default"> standar </ button></p><p> <! - Memberikan efek visual tambahan, mengidentifikasi satu set tombol dalam aksi asli -><br/> <Jenis Tombol = "tombol" class = "btn btn-utama"> asli </ button></p><p> <! - Merupakan tindakan berhasil atau positif -><br/> <Jenis Tombol = "tombol" class = "btn btn-sukses"> sukses </ button></p><p> <! - Tombol konteks pesan PERINGATAN -><br/> <Jenis Tombol = "tombol" class = "btn btn-info"> informasi </ button></p><p> <! - Menunjukkan tindakan yang akan diambil dengan hati-hati -><br/> <Jenis Tombol = "tombol" class = "btn btn-warning"> Peringatan </ button></p><p> <! - Mewakili tindakan berbahaya atau berpotensi negatif -><br/> <Jenis Tombol = "tombol" class = "btn btn-bahaya"> bahaya </ button><br/> <! - Apakah tidak menekankan adalah tombol yang terlihat seperti link, tetapi pada saat yang sama menjaga perilaku tombol -><br/> <Jenis Tombol = "tombol" class = "btn btn-link"> di </ button><br/> <! - JQuery (plugin JavaScript untuk Bootstrap perlu ---><br/> <Script src = "https://code.jquery.com/jquery.js"> </ script><br/> <! - Sertakan semua disusun plug-in (lihat di bawah), atau jika perlu, termasuk satu file -><br/> <Script src = "dist / js / bootstrap.min.js"> </ script><br/> </ Body><br/> </ Html> </p><br/></div><p> Output dari kode di atas adalah sebagai berikut. Anda dapat <a href="/try/try.php?filename=bootstrap-button-example">klik di sini untuk melihat contoh online</a> . </p><img src="/bootstrap/default-buttons-screenshot.png" alt="tombol standar Bootstrap 3"></img><h3> CSS </h3><p> Kami menjelajahi masa depan digunakan untuk membuat aturan CSS untuk tombol ini. Kelas utama yang digunakan untuk membuat tombol <em>btn,</em> seperti yang ditunjukkan di bawah ini. </p><pre>.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1,428571429; text-align: center; white-space: nowrap; vertical-align: tengah; kursor: pointer; background-image: none; border: 1px solid transparan; border-radius: 4px; -WebKit-pengguna pilih: none; -moz-user-pilih: none; -MS-user-pilih: none; -o-user-pilih: none; user-pilih: none; } </pre><p> Karena tombol kode CSS di atas (dengan kelas btn) diberikan sebagai inline-block, tombol Allow terkait dengannya telah diberikan dalam unsur-unsur yang berdekatan dasar umum, tetapi Anda dapat memberikan untuk menambah lebar dan atribut tinggi. Mengisinya dengan padding atas dan bawah yang 6 dan 12 piksel. margin bawah diatur ke 0. </p><p></p><p> Ukuran font diatur ke 14 piksel dan mengatur berat badan font yang normal. Deretan tombol dengan kelas btn tinggi 1,428571429, 1 tinggi sedikit lebih tinggi dari default. Teks berpusat. </p><p> atribut white-space diatur untuk nowrap, sehingga garis baru, spasi dan tab akan lipat. elemen terkait akan dipusatkan secara vertikal diposisikan pada ketinggian menengah. Ketika Anda membawa di atas unsur-unsur terkait, kursor akan muncul sebagai bentuk pointer. Berikut tidak menampilkan gambar latar belakang. </p><p> Di sini kita akan menunjukkan 1-pixel perbatasan padat transparan, tebal. Karena <em>border-radius: 4px ;,</em> tombol akan dibulatkan bentuk sudut. Dengan meningkatkan atau menurunkan nilai 4px, Anda dapat memiliki kebulatan bulat menjadi lebih besar atau lebih kecil. Sejak <em>user-pilih: none teks,</em> tombol dan terkait sub-elemen tidak akan opsional. Dalam rangka untuk mendapatkan konsistensi lintas-browser dalam penerapan sifat yang sama beberapa pemasok dengan awalan. </p><p> Setiap tombol yang ditampilkan di atas contoh kecuali <em>btn</em> ada kelas CSS lain, seperti btn-default, btn-primer, dan sebagainya. kelas ini untuk pengaturan <em>tombol <em>warna,</em></em> background-warna dan sifat <em>perbatasan.</em> Mereka digunakan dengan tombol konvensional dan status link (yaitu, hover, aktif, fokus, dll) tombol CSS Rule. </p><p> kode <em>kelas btn-primer</em> adalah sebagai berikut </p><pre>.btn-utama { Warna: #ffffff; background-color: # 428bca; border-color: # 357ebd; } </pre><h3> ukuran yang berbeda dari tombol </h3><p> Ada tiga ukuran dapat diatur. Dalam rangka untuk mengatur setiap ukuran, Anda perlu menambahkan kelas ekstra. </p><p> <em>btn-lg untuk pengaturan tombol besar.</em> </p><pre><Jenis Tombol = "tombol" class = "btn btn-primer btn-lg"> tombol besar </ button> </pre><p> btn-lg kode kelas CSS sebagai berikut </p><pre>.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } </pre><p> Gunakan <em>btn-sm</em> dan tombol Pengaturan <em>btn-xs</em> dengan dimensi yang berbeda. </p><pre><Jenis Tombol = "tombol" class = "btn btn-primer btn-sm"> tombol besar </ button> <Jenis Tombol = "tombol" class = "btn btn-primer btn-xs"> tombol besar </ button> </pre><p> btn-sm dan btn-xs classe kode CSS sebagai berikut </p><pre>.btn-sm, .btn-xs { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-xs { padding: 1px 5px; } </pre><p> Kode berikut menunjukkan tombol dengan ukuran yang berbeda dari berbagai jenis. Anda dapat <a href="/try/try.php?filename=bootstrap-button-of-different-sizes-example">klik di sini untuk melihat demo online</a> . Berikut adalah efek dari screenshot dan kode. </p><img src="/bootstrap/buttons-different-sizes-screenshot.png" alt="Tombol ukuran yang berbeda"></img><div><h2> contoh </h2><p> <! DOCTYPE html><br/> <Html><br/> <Head><br/> <Title> Bootstrap 3 ukuran yang berbeda dari tombol </ title><br/> <Meta name = "viewport" content = "width = device-width, awal skala = 1.0"><br/> <! - Bootstrap -><br/> <Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" Media = "screen"><br/> <Gaya><br/> body {<br/> padding: 50px<br/> }<br/> </ Style><br/> <! - HTML5 Shim dan Respond. js dukungan IE8 HTML5 asli dan pertanyaan media. -><br/> <- PERINGATAN :! Respond. Jika melalui berkas: // Lihat halaman js tidak akan bekerja. -><br/> <! - [Jika lt IE 9]><br/> <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script><br/> <Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script><br/> <! [Endif] -><br/> </ Kepala><br/> <Body><br/> <! - Tombol Standard -><br/> <P><br/> <Jenis Tombol = "tombol" class = "btn btn-default btn-sm"> tombol standar kecil </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-default btn-lg"> default tombol besar </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-default btn-xs"> Default tombol terutama kecil </ button><br/> </ P><br/> <P><br/> <! - Memberikan efek visual tambahan, mengidentifikasi satu set tombol dalam aksi asli -><br/> <Jenis Tombol = "tombol" class = "btn btn-primer btn-sm"> tombol original kecil </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-primer btn-lg"> tombol asli yang besar </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-primer btn-xs"> tombol terutama kecil Asli </ button><br/> </ P><br/> <P><br/> <! - Merupakan tindakan berhasil atau positif -><br/> <Jenis Tombol = "tombol" class = "btn btn-keberhasilan btn-sm"> Tombol kesuksesan kecil </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-keberhasilan btn-lg"> besar keberhasilan Tombol </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-keberhasilan btn-xs"> sukses tombol terutama kecil </ button><br/> </ P><br/> <P><br/> <! - Tombol konteks pesan PERINGATAN -><br/> <Jenis Tombol = "tombol" class = "btn btn-info btn-sm"> sedikit tombol info </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-info btn-lg"> Info tombol besar </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-info btn-xs"> tombol info terutama kecil </ button><br/> </ P><br/> <P><br/> <! - Menunjukkan tindakan yang akan diambil dengan hati-hati -><br/> <Jenis Tombol = "tombol" class = "btn btn-peringatan btn-sm"> sedikit tombol peringatan </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-peringatan btn-lg"> tombol peringatan besar </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-peringatan btn-xs"> tombol peringatan terutama kecil </ button><br/> </ P><br/> <P><br/> <! - Mewakili tindakan berbahaya atau berpotensi negatif -><br/> <Jenis Tombol = "tombol" class = "btn btn-bahaya btn-sm"> sedikit Tombol bahaya </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-bahaya btn-lg"> besar Tombol bahaya </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-bahaya btn-xs"> resiko yang sangat kecil dari tombol </ button><br/> </ P><br/> <P><br/> <! - Apakah tidak menekankan adalah tombol yang terlihat seperti link, tetapi pada saat yang sama menjaga perilaku tombol -><br/> <Jenis Tombol = "tombol" class = "btn btn-link btn-sm"> tombol link kecil </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-link btn-lg"> tombol link besar </ button><br/> </ P></p><p> <! - JQuery (plugin JavaScript untuk Bootstrap perlu ---><br/> <Script src = "https://code.jquery.com/jquery.js"> </ script><br/> <! - Sertakan semua disusun plug-in (lihat di bawah), atau jika perlu, termasuk satu file -><br/> <Script src = "dist / js / bootstrap.min.js"> </ script><br/> </ Body><br/> </ Html> </p><br/></div><h3> tombol blok-tingkat </h3><p> Untuk menggunakan semua tombol di mana lebar kontainer, Bootstrap 3 menyediakan tombol pilihan blok-tingkat. Anda perlu menambahkan <em>kelas btn-blok</em> ke kelas yang dibahas di atas untuk membuat tombol blok-tingkat. </p><pre><Jenis Tombol = "tombol" class = "btn btn-primer btn-lg btn-block"> tombol besar </ button> <Jenis Tombol = "tombol" class = "btn btn-keberhasilan btn-lg btn-block"> tombol besar </ button> </pre><p> Buat blok-tingkat tombol CSS didefinisikan sebagai berikut </p><pre>.btn-block { display: block; width: 100%; padding-right: 0; padding-left: 0; } .btn-blok + .btn-block { margin-top: 5px; } </pre><p> Berikut ini menunjukkan screen shot dan tingkat blok kode tombol. Anda dapat <a href="/try/try.php?filename=bootstrap-block-level-buttons-example">klik di sini untuk melihat contoh online</a> . </p><div><h2> contoh </h2><p> <! DOCTYPE html><br/> <Html><br/> <Head><br/> <Title> Bootstrap 3 tombol blok-tingkat </ title><br/> <Meta name = "viewport" content = "width = device-width, awal skala = 1.0"><br/> <! - Bootstrap -><br/> <Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" Media = "screen"><br/> <Gaya><br/> body {<br/> padding: 50px<br/> }<br/> </ Style><br/> <! - HTML5 Shim dan Respond. js dukungan IE8 HTML5 asli dan pertanyaan media. -><br/> <- PERINGATAN :! Respond. Jika melalui berkas: // Lihat halaman js tidak akan bekerja. -><br/> <! - [Jika lt IE 9]><br/> <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script><br/> <Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script><br/> <! [Endif] -><br/> </ Kepala><br/> <Body><br/> <Class Div = "container"><br/> <Class Div = "row"><br/> <Class Div = "col-lg-12"><br/> <! - Tombol Standard -><br/> <P><br/> <Jenis Tombol = "tombol" class = "btn btn-primer btn-sm btn-block"> tombol standar blok-tingkat kecil </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-default btn-lg btn-block"> tombol standar blok-tingkat besar </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-primer btn-xs btn-block"> standar tombol blok-tingkat yang sangat kecil </ button><br/> </ P><br/> <P><br/> <! - Memberikan efek visual tambahan, mengidentifikasi satu set tombol dalam aksi asli -><br/> <Jenis Tombol = "tombol" class = "btn btn-primer btn-sm btn-block"> Tombol blok-tingkat asli kecil </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-primer btn-lg btn-block"> tombol blok-tingkat baku yang besar </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-primer btn-xs btn-block"> tombol khusus blok-tingkat kecil asli </ button><br/> </ P><br/> <P><br/> <! - Merupakan tindakan berhasil atau positif -><br/> <Jenis Tombol = "tombol" class = "btn btn-keberhasilan btn-sm btn-block"> tombol sukses blok-tingkat kecil </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-keberhasilan btn-lg btn-block"> tombol sukses blok-tingkat besar </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-keberhasilan btn-xs btn-block"> sukses tombol blok-tingkat sangat kecil </ button><br/> </ P><br/> <P><br/> <! - Tombol konteks pesan PERINGATAN -><br/> <Jenis Tombol = "tombol" class = "btn btn-info btn-sm btn-block"> blok-tingkat kecil tombol informasi </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-info btn-lg btn-block"> tombol informasi blok-tingkat besar </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-info btn-xs btn-block"> terutama blok-tingkat kecil tombol informasi </ button><br/> </ P><br/> <P><br/> <! - Menunjukkan tindakan yang akan diambil dengan hati-hati -><br/> <Jenis Tombol = "tombol" class = "btn btn-peringatan btn-sm btn-block"> tombol peringatan blok-tingkat kecil </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-peringatan btn-lg btn-block"> tombol peringatan blok-tingkat besar </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-peringatan btn-xs btn-block"> tombol peringatan blok-tingkat sangat kecil </ button><br/> </ P><br/> <P><br/> <! - Mewakili tindakan berbahaya atau berpotensi negatif -><br/> <Jenis Tombol = "tombol" class = "btn btn-bahaya btn-sm btn-block"> risiko kecil Tombol blok-tingkat </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-bahaya btn-lg btn-block"> tombol bahaya blok-tingkat yang besar </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-bahaya btn-xs btn-block"> resiko yang sangat kecil dari Tombol blok-tingkat </ button><br/> </ P><br/> <P><br/> <! - Apakah tidak menekankan adalah tombol yang terlihat seperti link, tetapi pada saat yang sama menjaga perilaku tombol -><br/> <Jenis Tombol = "tombol" class = "btn btn-link btn-sm btn-block"> blok-tingkat kecil Link Tombol </ button><br/> <Jenis Tombol = "tombol" class = "btn btn-link btn-lg btn-block"> blok-tingkat besar Link Tombol </ button><br/> </ P><br/> </ Div><br/> </ Div><br/> </ Div><br/> <! - JQuery (diperlukan untuk plugin JavaScript Bootstrap ini) -><br/> <Script src = "https://code.jquery.com/jquery.js"> </ script><br/> <! - Sertakan semua plugin dikompilasi (bawah), atau menyertakan file individual yang diperlukan -><br/> <Script src = "dist / js / bootstrap.min.js"> </ script><br/> </ Body><br/> </ Html> </p><br/></div><img src="/bootstrap/buttons-block-level-screenshot.png" alt="Tombol tingkat blok"></img><h3> kegiatan tombol </h3><p> Anda dapat menggunakan <em>kelas CSS aktif</em> untuk menambahkan link ke tombol atau tampilan yang berbeda untuk menunjukkan itu adalah aktif. Berikut adalah <a href="/try/try.php?filename=bootstrap-active-buttons-example">contoh dari demo</a> , screenshot dan kode. </p><img src="/bootstrap/buttons-active-screenshot.png" alt="tombol aktif"></img><div><h2> contoh </h2><p> <! DOCTYPE html><br/> <Html><br/> <Head><br/> <Title> Bootstrap 3 tombol aktivitas </ title><br/> <Meta name = "viewport" content = "width = device-width, awal skala = 1.0"><br/> <! - Bootstrap -><br/> <Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" Media = "screen"><br/> <Gaya><br/> body {<br/> padding: 50px<br/> }<br/> </ Style><br/> <! - HTML5 Shim dan Respond. js dukungan IE8 HTML5 asli dan pertanyaan media. -><br/> <- PERINGATAN :! Respond. Jika melalui berkas: // Lihat halaman js tidak akan bekerja. -><br/> <! - [Jika lt IE 9]><br/> <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script><br/> <Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script><br/> <! [Endif] -><br/> </ Kepala><br/> <Body><br/> <! - Tombol Standard -><br/> <Jenis Tombol = "tombol" class = "btn btn-default aktif"> standar </ button></p><p> <! - Memberikan efek visual tambahan, mengidentifikasi satu set tombol dalam aksi asli -><br/> <Jenis Tombol = "tombol" class = "btn btn-primer aktif"> asli </ button></p><p> <! - Merupakan tindakan berhasil atau positif -><br/> <Jenis Tombol = "tombol" class = "btn btn-keberhasilan aktif"> sukses </ button></p><p> <! - Tombol konteks pesan PERINGATAN -><br/> <Jenis Tombol = "tombol" class = "btn btn-info aktif"> informasi </ button></p><p> <! - Menunjukkan tindakan yang akan diambil dengan hati-hati -><br/> <Jenis Tombol = "tombol" class = "btn btn-peringatan aktif"> Peringatan </ button></p><p> <! - Mewakili tindakan berbahaya atau berpotensi negatif -><br/> <Jenis Tombol = "tombol" class = "btn btn-bahaya aktif"> bahaya </ button></p><p> <! - Apakah tidak menekankan adalah tombol yang terlihat seperti link, tetapi pada saat yang sama menjaga perilaku tombol -><br/> <Jenis Tombol = "tombol" class = "btn btn-link aktif"> di </ button><br/> <! - JQuery (plugin JavaScript untuk Bootstrap perlu ---><br/> <Script src = "https://code.jquery.com/jquery.js"> </ script><br/> <! - Sertakan semua disusun plug-in (lihat di bawah), atau jika perlu, termasuk satu file -><br/> <Script src = "dist / js / bootstrap.min.js"> </ script><br/> </ Body><br/> </ Html> </p><br/></div><p> Bila menggunakan alat pengembang Chrome, kami menemukan bahwa ketika tombol ditambahkan ke <em>kelas yang aktif,</em> aturan <em>CSS</em> yang berlaku. </p><p> tombol aktivitas bawaan </p><pre>.btn-default: hover, .btn-default: fokus, .btn-default: aktif, .btn-default.active, .Open .dropdown-toggle.btn-default { color: # 333; background-color: #ebebeb; border-color: #adadad; } </pre><p> tombol kegiatan utama </p><pre>.btn-utama: hover, .btn-utama: fokus, .btn-utama: aktif, .btn-primary.active, .Open .dropdown-toggle.btn-utama { Warna: # fff; background-color: # 3276b1; border-color: # 285e8e; } </pre><p> Sukses tombol Acara </p><pre>.btn-sukses: hover, .btn-sukses: fokus, .btn-sukses: aktif, .btn-success.active, .Open .dropdown-toggle.btn-keberhasilan { Warna: # fff; background-color: # 47a447; border-color: # 398439; } </pre><p> Info tombol Acara </p><pre>.btn-info: hover, .btn-info: fokus, .btn-info: aktif, .btn-info.active, .Open .dropdown-toggle.btn-info { Warna: # fff; background-color: # 39b3d7; border-color: # 269abc; } </pre><p> Peringatan tombol aktif </p><pre>.btn-peringatan: hover, .btn-peringatan: fokus, .btn-peringatan: aktif, .btn-warning.active, .Open .dropdown-toggle.btn-peringatan { Warna: # fff; background-color: # ed9c28; border-color: # d58512; } </pre><p> tombol aktif bahaya </p><pre>.btn-bahaya: hover, .btn-bahaya: fokus, .btn-bahaya: aktif, .btn-danger.active, .Open .dropdown-toggle.btn-bahaya { Warna: # fff; background-color: # d2322d; border-color: # ac2925; } </pre><p> tombol link aktivitas </p><pre>.btn-link, .btn-link: hover, .btn-link: fokus, .btn-link: aktif { border-color: transparent; } </pre><p> Jadi, Anda dapat melihat mereka dengan mengubah warna, backgound warna dan border-color atribut untuk mencapai. </p><h3> tombol dinonaktifkan </h3><p> Anda dapat menggunakan <em>kelas CSS cacat</em> untuk menambahkan link ke tombol atau tampilan yang berbeda untuk menunjukkan bahwa itu dinonaktifkan. Berikut adalah <a href="/try/try.php?filename=bootstrap-disabled-buttons-example">contoh dari demo</a> , screenshot dan kode. </p><p> Dalam rangka untuk membuat tombol agak kabur, menggunakan aturan CSS berikut (mencari melalui Chrome Developer Tools) </p><pre>.btn [cacat], fieldset [cacat] .btn { pointer-acara: none; kursor: tidak-diperbolehkan; opacity: 0,65; filter: alpha (opacity = 65); -webkit-box-shadow: none; box-shadow: none; } </pre><img src="/bootstrap/buttons-disabled-screenshot.png" alt="Tombol dinonaktifkan"></img><div><h2> contoh </h2><p> <! DOCTYPE html><br/> <Html><br/> <Head><br/> <Title> Bootstrap 3 tombol Nonaktifkan </ title><br/> <Meta name = "viewport" content = "width = device-width, awal skala = 1.0"><br/> <! - Bootstrap -><br/> <Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" Media = "screen"><br/> <Gaya><br/> body {<br/> padding: 50px<br/> }<br/> </ Style><br/> <! - HTML5 Shim dan Respond. js dukungan IE8 HTML5 asli dan pertanyaan media. -><br/> <- PERINGATAN :! Respond. Jika melalui berkas: // Lihat halaman js tidak akan bekerja. -><br/> <! - [Jika lt IE 9]><br/> <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script><br/> <Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script><br/> <! [Endif] -><br/> </ Kepala><br/> <Body><br/> <! - Tombol Standard -><br/> <Jenis Tombol = "tombol" class = "btn btn-default" disabled = "cacat"> standar </ button></p><p> <! - Memberikan efek visual tambahan, mengidentifikasi satu set tombol dalam aksi asli -><br/> <Jenis Tombol = "tombol" class = "btn btn-utama" disabled = "cacat"> asli </ button></p><p> <! - Merupakan tindakan berhasil atau positif -><br/> <Jenis Tombol = "tombol" class = "btn btn-sukses" disabled = "cacat"> sukses </ button></p><p> <! - Tombol konteks pesan PERINGATAN -><br/> <Jenis Tombol = "tombol" class = "btn btn-info" disabled = "cacat"> informasi </ button></p><p> <! - Menunjukkan tindakan yang akan diambil dengan hati-hati -><br/> <Jenis Tombol = "tombol" class = "btn btn-peringatan" disabled = "cacat"> Peringatan </ button></p><p> <! - Mewakili tindakan berbahaya atau berpotensi negatif -><br/> <Jenis Tombol = "tombol" class = "btn btn-bahaya" disabled = "cacat"> bahaya </ button><br/> <! - JQuery (plugin JavaScript untuk Bootstrap perlu ---><br/> <Script src = "https://code.jquery.com/jquery.js"> </ script><br/> <! - Sertakan semua disusun plug-in (lihat di bawah), atau jika perlu, termasuk satu file -><br/> <Script src = "dist / js / bootstrap.min.js"> </ script><br/> </ Body><br/> </ Html> </p><br/></div><h3> Dinonaktifkan anchor elemen </h3><p> Ketika elemen jangkar dengan btn dan presentasi kelas terkait lainnya dinonaktifkan, itu adalah sedikit berbeda dari yang biasa. Pertama, link anchor elemen masih ada hanya tampilan dan nuansa telah berubah. Selain itu, Anda tidak dapat menggunakan mereka di bar navigasi. </p><p> <a href="/try/try.php?filename=bootstrap-disabled-anchor-buttons-example">Klik di sini untuk melihat demo online</a> . Kode adalah sebagai berikut: </p><div><h2> contoh </h2><p> <! DOCTYPE html><br/> <Html><br/> <Head><br/> <Title> Bootstrap 3 tombol anchor cacat </ title><br/> <Meta name = "viewport" content = "width = device-width, awal skala = 1.0"><br/> <! - Bootstrap -><br/> <Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" Media = "screen"><br/> <Gaya><br/> body {<br/> padding: 50px<br/> }<br/> </ Style><br/> <! - HTML5 Shim dan Respond. js dukungan IE8 HTML5 asli dan pertanyaan media. -><br/> <- PERINGATAN :! Respond. Jika melalui berkas: // Lihat halaman js tidak akan bekerja. -><br/> <! - [Jika lt IE 9]><br/> <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script><br/> <Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script><br/> <! [Endif] -><br/> </ Kepala><br/> <Body><br/> <! - Tombol Standard -><br/> <a href="http://www.example.com" class="btn btn-default disabled" role="button"> bawaan </a></p><p> <! - Memberikan efek visual tambahan, mengidentifikasi satu set tombol dalam aksi asli -><br/> <a href="http://www.example.com" class="btn btn-primary disabled" role="button"> </a> asli</p><p> <! - Merupakan tindakan berhasil atau positif -><br/> <a href="http://www.example.com" class="btn btn-success disabled" role="button"> sukses </a></p><p> <! - Tombol konteks pesan PERINGATAN -><br/> <a informasi href="http://www.example.com" class="btn btn-info disabled" role="button"> </a></p><p> <! - Menunjukkan tindakan yang akan diambil dengan hati-hati -><br/> <a href="http://www.example.com" class="btn btn-warning disabled" role="button"> peringatan </a></p><p> <! - Mewakili tindakan berbahaya atau berpotensi negatif -><br/> <a href="http://www.example.com" class="btn btn-danger disabled" role="button"> berbahaya </a><br/> <! - JQuery (plugin JavaScript untuk Bootstrap perlu ---><br/> <Script src = "https://code.jquery.com/jquery.js"> </ script><br/> <! - Sertakan semua disusun plug-in (lihat di bawah), atau jika perlu, termasuk satu file -><br/> <Script src = "dist / js / bootstrap.min.js"> </ script><br/> </ Body><br/> </ Html> </p><br/></div><p> Harap <em>dicatat,</em> peran = "tombol" untuk kemudahan penggunaan dan tujuan penggunaan. </p><h3> label tombol </h3><p> Anda dapat tombol, tombol dan elemen input menggunakan kelas, menggunakan tombol sebagai label. Namun disarankan bahwa Anda biasanya melalui tombol elemen untuk digunakan, selain itu akan menyebabkan inkonsistensi lintas-browser. </p><p> Contoh berikut menunjukkan bagaimana menggunakan label tombol </p><img src="/bootstrap/buttons-tags-screenshot.png" alt="tombol tag contoh screenshot"></img><div><h2> contoh </h2><p> <! DOCTYPE html><br/> <Html><br/> <Head><br/> <Title> Bootstrap 3 tombol label contoh </ title><br/> <Meta name = "viewport" content = "width = device-width, awal skala = 1.0"><br/> <! - Bootstrap -><br/> <Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" Media = "screen"><br/> <Gaya><br/> body {<br/> padding: 50px<br/> }<br/> </ Style><br/> <! - HTML5 Shim dan Respond. js dukungan IE8 HTML5 asli dan pertanyaan media. -><br/> <- PERINGATAN :! Respond. Jika melalui berkas: // Lihat halaman js tidak akan bekerja. -><br/> <! - [Jika lt IE 9]><br/> <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script><br/> <Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script><br/> <! [Endif] -><br/> </ Kepala><br/> <Body><br/> <P><br/> <a class="btn btn-default" href="#" role="button"> Link </a><br/> <Tombol class = "btn btn-default" type = "submit"> tombol </ button><br/> <Input class = "btn btn-default" type = "button" value = "masukan"><br/> <Class Masukan = "btn btn-default" type = "submit" value = "Submit"><br/> </ P><br/> <P><br/> <a class="btn btn-primary" href="#" role="button"> Link </a><br/> <Tombol class = "btn btn-utama" type = "submit"> tombol </ button><br/> <Input class = "btn btn-utama" type = "button" value = "masukan"><br/> <Class Masukan = "btn btn-utama" type = "submit" value = "Submit"><br/> </ P><br/> <P><br/> <a class="btn btn-success" href="#" role="button"> Link </a><br/> <Tombol class = "btn btn-sukses" type = "submit"> tombol </ button><br/> <Input class = "btn btn-sukses" type = "button" value = "masukan"><br/> <Class Masukan = "btn btn-sukses" type = "submit" value = "Submit"><br/> </ P><br/> <P><br/> <a class="btn btn-info" href="#" role="button"> Link </a><br/> <Tombol class = "btn btn-info" type = "submit"> tombol </ button><br/> <Input class = "btn btn-info" type = "button" value = "masukan"><br/> <Class Masukan = "btn btn-info" type = "submit" value = "Submit"><br/> </ P><br/> <P><br/> <a class="btn btn-warning" href="#" role="button"> Link </a><br/> <Tombol class = "btn btn-peringatan" type = "submit"> tombol </ button><br/> <Input class = "btn btn-peringatan" type = "button" value = "masukan"><br/> <Class Masukan = "btn btn-peringatan" type = "submit" value = "Submit"><br/> </ P><br/> <P><br/> <a class="btn btn-danger" href="#" role="button"> Link </a><br/> <Tombol class = "btn btn-bahaya" type = "submit"> tombol </ button><br/> <Input class = "btn btn-bahaya" type = "button" value = "masukan"><br/> <Class Masukan = "btn btn-bahaya" type = "submit" value = "Submit"><br/> </ P><br/> <! - JQuery (plugin JavaScript untuk Bootstrap perlu ---><br/> <Script src = "https://code.jquery.com/jquery.js"> </ script><br/> <! - Sertakan semua disusun plug-in (lihat di bawah), atau jika perlu, termasuk satu file -><br/> <Script src = "dist / js / bootstrap.min.js"> </ script><br/> </ Body><br/> </ Html> </p><br/></div><p> <a href="/try/try.php?filename=bootstrap-button-tags-example">Klik di sini untuk melihat demo online.</a> </p><p> Sekarang kita akan mulai menyesuaikan tombol default, memiliki tampilan yang sama sekali berbeda dan nuansa. </p><p> kode tombol Kami akan mulai berikut </p><pre><Jenis Tombol = "tombol" class = "btn btn-default"> Default </ button> </pre><p> Sekarang kita harus membuat kelas <em>CSS</em> btn-w3r, dan menggantinya dengan btn-default. Oleh karena itu, kita akan menulis kode berikut untuk mengganti kode di atas </p><pre><Jenis Tombol = "tombol" class = "btn btn-w3r"> Default </ button> </pre><p> Pertama kita akan mengubah warna latar belakang, tambahkan CSS berikut </p><pre>.btn-w3r { background: # cb60b3; / * browser Old * / background: -moz-linear-gradient (top, # cb60b3 0%, # ad1283 50%, # de47ac 100%); / * FF3.6 + * / background: -webkit-gradien (linier, kiri atas, kiri bawah, warna-stop (0%, # cb60b3), warna-stop (50%, # ad1283), warna-stop (100%, # de47ac)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, # cb60b3 0%, # ad1283 50%, # de47ac 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (top, # cb60b3 0%, # ad1283 50%, # de47ac 100%); / * Opera 11.10+ * / background: -MS-linear-gradient (top, # cb60b3 0%, # ad1283 50%, # de47ac 100%); / * IE10 + * / background: linear-gradient (ke bawah, # cb60b3 0%, # ad1283 50%, # de47ac 100%); / * W3C * / filter: PROGID: DXImageTransform.Microsoft.gradient (startColorstr = '# cb60b3', endColorstr = '# de47ac', GradientType = 0); / * IE6-9 * / } </pre><p> Sekarang tombol adalah sebagai berikut </p><img src="/bootstrap/customized-button-step-one-screenshot.png" alt="tombol disesuaikan langkah satu screenshot"></img><p> Untuk mengubah warna font, kita akan menambahkan CSS berikut dalam kode <em>kelas</em> CSS <em>btn-w3r</em> ada </p><pre>Warna: # fff; </pre><img src="/bootstrap/customized-button-step-two-screenshot.png" alt="tombol disesuaikan langkah dua screenshot"></img><p> Sekarang, dalam rangka untuk tombol yang terlihat seperti bentuk melingkar, kita akan menambahkan CSS berikut di depan kode <em>kelas</em> CSS <em>btn-w3r</em> ada </p><pre>width: 200px; height: 200px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; </pre><img src="/bootstrap/customized-button-step-three-screenshot.png" alt="tombol disesuaikan langkah ketiga screenshot"></img><p> Untuk menambahkan efek hover, kita akan menambahkan kode CSS berikut </p><pre>.btn-w3r: hover { background: # 333; color: # e75616; } </pre><p> Berikut adalah kode CSS setelah menambahkan efek tombol melayang </p><img src="/bootstrap/customized-button-step-four-screenshot.png" alt="tombol disesuaikan langkah empat screenshot"></img><p> Anda dapat <a href="/try/try.php?filename=bootstrap-button-customized-example">klik di sini untuk melihat tombol demo kustom online kami buat</a> . </p>

Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?

untuk mengubah ukuran tombol, bootstrap telah menyediakan class khusus. Untuk membuat tombol yang berukuran kecil, gunakan class .btn-sm. Untuk membuat tombol yang berukuran besar dengan bootstrap, gunakan class .btn-lg.

Kelas apa yang digunakan dalam bootstrap untuk mengelompokkan Button dalam button group?

Untuk membuat button group kita bisa menggunakan class .btn-group.

Apa warna dari tombol dengan class succes pada bootstrap?

btn-primary merupakan class bootstrap untuk membuat tombol berwarna biru. btn-danger merupakan class bootstrap untuk membuat tombol berwarna biru langit. btn-success merupakan class bootstrap untuk membuat tombol berwarna hijau.

Apa itu bootstrap 4?

Apa itu Bootstrap 4? Bootstrap adalah framework CSS untuk membuat tampilan web. Bootstrap menyediakan class dan komponen yang siap dipakai, sehingga kita tidak perlu menulis kode CSS dari nol.