cari

Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang kemahiran Bootstrap button_javascript

Penjelasan terperinci tentang kemahiran Bootstrap button_javascript

WBOY
WBOYasal
2016-05-16 15:22:141078semak imbas

Penerangan

Pemalam JavaScript Butang Bootstrap membolehkan anda mempertingkatkan kefungsian butang anda. Anda boleh mengawal keadaan butang dan membuat kumpulan butang untuk komponen, seperti bar alat.

Apa yang diperlukan

Anda mesti merujuk jquery.js dan bootstrap-button.js - kedua-dua fail JavaScript ini. Kesemuanya terletak di dalam folder docs/assets/js.

Cara menggunakannya

Anda boleh menggunakan pemalam hanya melalui markup tanpa menulis sebarang JavaScript, atau anda boleh mendayakan butang melalui JavaScript.

Bootstrap menyediakan beberapa pilihan untuk menentukan gaya butang, seperti yang ditunjukkan dalam jadual berikut:

Gaya berikut boleh digunakan pada 3499910bf9dac5ae3c52d5ede7383485, 07cb10094d7fc1aeafbde86dbf86ce42, atau d5fd7aea971a85678ba271703566ebfd elemen:

Kelas Penerangan
.btn Tambah gaya asas pada butang
.btn-default Butang Lalai/Standard
.btn-utama Gaya butang asal (tidak dimanipulasi)
.btn-kejayaan Tindakan yang menunjukkan kejayaan
.btn-info Gaya ini boleh digunakan untuk butang yang ingin memaparkan maklumat
.btn-warning Butang yang memerlukan operasi berhati-hati
.btn-bahaya Operasi butang yang menunjukkan tindakan berbahaya
.btn-link Jadikan butang kelihatan seperti pautan (masih mengekalkan tingkah laku butang)
.btn-lg Buat butang besar
.btn-sm Buat butang kecil
.btn-xs Buat butang yang sangat kecil
.btn-block Butang peringkat sekat (diregangkan hingga 100% daripada lebar elemen induk)
.aktif Butang diklik
.kurang upaya Lumpuhkan butang

Pertama lihat butang warna yang berbeza: 

<html lang="en"> 
<head> 
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="关键词一，关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> 
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 
  <body style="padding: 20px;"> 
    <!-- 标准的按钮 --> 
    <button type="button" class="btn btn-default">默认按钮</button> 
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
    <button type="button" class="btn btn-primary">原始按钮</button> 
    <!-- 表示一个成功的或积极的动作 --> 
    <button type="button" class="btn btn-success">成功按钮</button> 
    <!-- 用于要弹出信息的按钮 --> 
    <button type="button" class="btn btn-info">信息按钮</button> 
    <!-- 表示应谨慎操作的动作 --> 
    <button type="button" class="btn btn-warning">警告按钮</button> 
    <!-- 表示一个危险动作的按钮 --> 
    <button type="button" class="btn btn-danger">危险按钮</button> 
    <!-- 让按钮看起来像一个链接，但同时保持按钮的行为 --> 
    <button type="button" class="btn btn-link">链接按钮</button> 
  </body> 
</html>

Kesan:

btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-bahaya/ btn-link menambah gaya berbeza pada butang.

Saiz butang

Oleh kerana bahagian kepala semuanya sama, hanya kandungan Badan sahaja yang disenaraikan. 

<body style="padding: 20px;width:500px;"> 
  <!-- 标准的按钮 --> 
  <button type="button" class="btn btn-default">默认按钮</button> 
  <button type="button" class="btn btn-lg btn-default">大的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
  <button type="button" class="btn btn-primary">原始按钮</button> 
  <button type="button" class="btn btn-sm btn-primary">小的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type="button" class="btn btn-success">成功按钮</button> 
  <button type="button" class="btn btn-xs btn-success">特别小的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type="button" class="btn btn-info">信息按钮</button><br/><br/> 
  <button type="button" class="btn btn-block btn-info">块级信息按钮</button> 
</body>

Kesannya adalah seperti berikut:

Status butang

Butang dibahagikan kepada dua keadaan: aktif dan dilumpuhkan,
Keadaan aktif: Butang kelihatan seperti ditekan, dengan latar belakang yang lebih gelap, sempadan gelap dan bayang-bayang.
Keadaan dilumpuhkan: Warna butang menjadi 50% lebih terang dan kehilangan kecerunan

Lihat contoh khusus: 

<body style="padding: 20px;width:500px;"> 
  <!-- 标准的按钮 --> 
  <button type="button" class="btn btn-default">默认按钮</button> 
  <button type="button" class="btn btn-default active">激活的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
  <button type="button" class="btn btn-primary">原始按钮</button> 
  <button type="button" class="btn btn-primary active">激活的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type="button" class="btn btn-success">成功按钮</button> 
  <button type="button" class="btn btn-success active">激活的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type="button" class="btn btn-info">信息按钮</button> 
  <button type="button" class="btn btn-info active">激活的信息按钮</button> 
  <br/><br/> 
 
  <button type="button" class="btn btn-default">默认按钮</button> 
  <button type="button" class="btn btn-default disabled">禁用的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
  <button type="button" class="btn btn-primary">原始按钮</button> 
  <button type="button" class="btn btn-primary disabled">禁用的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type="button" class="btn btn-success">成功按钮</button> 
  <button type="button" class="btn btn-success disabled">禁用的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type="button" class="btn btn-info">信息按钮</button> 
  <button type="button" class="btn btn-info disabled">禁用的信息按钮</button> 
</body>

Label butang

a, input boleh berkelakuan seperti butang, tetapi untuk mengelakkan ketidakkonsistenan merentas penyemak imbas, sebaiknya gunakan teg Butang. 

<body style="padding: 20px;"> 
  <a class="btn btn-default" href="#" role="button">超链接按钮</a> 
  <button class="btn btn-default btn-primary" type="submit">button按钮</button> 
  <input class="btn btn-default btn-success" type="button" value="input按钮"> 
  <input class="btn btn-default btn-info" type="submit" value="submit按钮"> 
</body>

Kandungan di atas memperkenalkan anda kepada pengetahuan tentang butang Bootstrap saya harap anda menyukainya.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Contoh kod penjelasan terperinci tentang pelaksanaan javascript bagi window jitter dan qq window jitter_javascript kemahiranArtikel seterusnya：Contoh kod penjelasan terperinci tentang pelaksanaan javascript bagi window jitter dan qq window jitter_javascript kemahiran

Artikel berkaitan

Lihat lagi