Dua artikel sebelumnya hanya berbicara tentang cara menggunakan komponen, pada dasarnya bukan tentang JS. Blog ini harus dibahas dalam kombinasi dengan JS.
Izinkan saya menjelaskan beberapa komponen
1. Kotak Modal
2. Pemantauan gulir
3. Halaman tag
4. Tooltips
5. Kotak Pop-up
6. tombol
7. Menumpuk
8. Halaman berputar
9. Sidebar
Impor CSS dan JS terlebih dahulu
<tautan rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css"> <tautan rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.5/csss/boottrap.min.sssssssss src = "js/jQuery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. Kotak Modal
Kami biasanya menggunakan kotak modal ini saat masuk atau membaca peraturan tertentu, jadi kotak modal sangat umum
Pertama tulis tombol untuk membuka kotak modal
<!-Data-target adalah ID dari kotak modal kami, dan data-apa pun = "@ime" adalah tag dan nilai kotak modal yang kami lewati-> <tape type = "tombol" data-kilat = "modal" data-target = "#mymodal" data-whatever = "@@ime"> Buka kotak modal </tombol> mymodal "-whatever ="@@@@@@buka kotak modal </tombol> mymodal "
Kemudian tulis kotak modal
<Div id = "mymodal" role = "dialog" aria-label = "mymodallabel" aria-hidden = "true"> <!-ini adalah kotak modal kecil. Ubah Modal-SM ke Modal-LG adalah kotak modal besar-> <v> <!-Modal Box head-> <verv> <!-Tutup tombol di sudut kanan atas-> <typute type = "tombol" data-dismiss = "modal" aria-label = "tutup"> <span aria-hidden = "true"> × </span> </button> <! Konten-> <v> <!-Konten bingkai modal dapat berupa teks atau tabel-> <!-<p> halo </p>-> <sorm> <div> <label> Nama pengguna </label> <input type = "text"> </Div> <ver> </Div Tipe </label> <Input Type = "Kata Sandi"> </Div> </Form> </Div> <! Data-Dismiss = "Modal"> Tutup </button> <tombol type = "Tombol"> Simpan </button> </div> </div> </div> </div> </div> </div>
Jika Anda mengklik tombol dan kemudian meneruskan parameter ke tabel di kotak modal
Tambahkan Label Data ke atribut tombol: Nilai
Data di atas-apa pun = ”@ime” ditambahkan sebagai contoh. Parameter dengan label apa pun dan nilai @IME ditambahkan.
Berikut ini adalah operasi JS
// metode $ ("#mymodal"). On ("show.bs.modal", function (e) {// Dapatkan tombol yang Anda klik untuk membuka tombol var = $ (E.RelatedTarget) // Dapatkan parameter yang diteruskan oleh tombol var penerima = tombol.data ("apapun") // Dapatkan kotak modal itu sendiri var modal = $ (ini)/ modal.find (". Modal-title"). Teks ("Hello"+penerima); // Ubah nilai input di body modal.find (". Modal-body input"). Val (penerima)})2. Pemantauan gulir
Geser ke konten yang berbeda, halaman tab akan berubah
Pertama tulis atribut tubuh
<!-Offset diatur ke 70, nilai ini adalah nilai terbaik yang diuji->
<body data-spy = "gulir" data-target = ". navbar" data-offset = "70">
Kemudian tulis tab
<!-Bagian atas konten yang ditampilkan ditetapkan di bilah tab-> <nav role = "navigasi"> <v> <div id = "myscrollspy"> <ul> <!-Koneksi dalam tag adalah id judul di bawah ini-> <li> <a href = "#iwen"> iwen </a> </li> <a href = "#iwen"> iWen </a> </li> <a Li> <a href = "#iMe"> IWen </a> </li> <a li> <!-Menu drop-down sarang di tag-> <li> <a href = "#" data-koggle = "dropdown"> menu drop-down <span> </span> </a> <uL role = "menu"> <li> <a href = "#satu" Tabindex = "-1"> satu </a> </a> </a> </a href = "-1"> satu </a> </a> </a> </a href = "-Dua"#1 " </li> <li> <a href = "#tiga" tabIndex = "-1"> tiga </a> </li> </ul> </li> </li> </ul> </div> </div> </av>
Kemudian tulis kontennya
<h2 id = "iwen">@iwen </h2> <p> Ini adalah orang ini adalah orang </p> <h2 id = "ime">@ime </h2> <p> Ini adalah orang ini adalah orang </p> <h2 id = "satu">@satu </h2> <p> Ini adalah orang ini adalah orang ini adalah orang ini adalah orang. id = "dua">@dua </h2> <p> Ini adalah orang ini adalah orang </p> <h2 id = "tiga">@tiga </h2> <p> Ini adalah orang ini adalah orang </p> <h2 id = "tiga">@tiga </h2> <p> Ini adalah orang, ini adalah orang </p>
Disarankan untuk menulis konten lebih lama sehingga efeknya akan lebih jelas. Tidak nyaman untuk menulis terlalu banyak kata yang tidak berguna di sini.
Anda juga dapat menulis beberapa metode JS
// metode $ ("#myscrollspy"). On ("Activate.bs.scrollspy", function (e) {alert ("hello");})3. Halaman tag
Klik pada tag yang berbeda untuk menampilkan konten yang berbeda
Tulis tag bar dulu
<ul id="myTab"> <!--a tag link corresponds to the id of the tab-pane below--> <li ><a href="#home" data-toggle="tab">Home</a> </li> <li><a href="#profile" data-toggle="tab">Profile</a> </li> <li> <a href="#" id="myTabdrop1" Data-koggle = "dropdown"> Menu dropdown <span> </span> </a> <ul role = "menu"> <!-Tidak seperti menu drop-down biasa, tambahkan data-koggle = "tab"-> <li> <a href = "#satu" Tabindex = "-1" Data-koggle = "tab"> satu </a> </Li> "Lix =" dua "Tablex =" Tablex = "1" data-kilat = "tab"> dua </a> </li> </ul> </li> </li> </ul>
Kemudian tulis isi tag yang berbeda
<Div id = "mytabcontent"> <div id = "home"> <p> home </p> <div id = "profile"> <p> profil </p> <v id = "satu"> <p> satu </p> <div id = "dua"> <p> dua </p>
Anda dapat menginisialisasi halaman tab yang ditampilkan dengan JS
Ada beberapa cara untuk memilih halaman tab
$ ('#mytab a [href = "#profile"]'). tab ('show') // pilih $ ('#mytab a: first'). tab ('show') // pilih tab tab pertama $ ('#mytab a: last'). Tab ('show') // Page Tab terakhir $ ('#mytab a: page liqs') ('show') / page last tab page $ ('#mytabs' liqs '). (karena 0 adalah yang pertama). Jika itu adalah halaman tab di menu tarik-turun, nomor harus ditambahkan oleh 1.4. Tooltips
<p> <!-Jika konten judul kosong, konten judul data-original ditampilkan. Penempatan adalah posisi tampilan, yang dapat diatur ke atas | bawah | kiri | kanan-> <!-Parameter dapat diatur dalam data-**** ---> Selamat datang di <a data-animation = "false" id = "mytooltip" href = "#" data-original = "ww." w.w.pomplacement "w.w.pomplacement =" wow-origin-original = "wo" w.pomplacement = "wow-origin-originon =" w.pomple "w.pomplacement" </p>
Maka Anda perlu menginisialisasi dengan JS, jika tidak itu tidak akan berpengaruh
// inisialisasi tooltip, arahkan ke tampilan
$ ('[data-kilat = "tooltip"]'). tooltip ();
5. Kotak Pop-up
Kotak pop-up mirip dengan tooltip, tetapi menampilkan lebih kaya daripada tooltip dan juga lebih umum digunakan.
<!-Data-Trigger = "Foucus" Klik blank untuk menghilang. Jika Anda tidak menambahkannya, klik tombol untuk menghilang. Jika Anda mengaturnya untuk melayang, tombol yang Anda pindahkan ditampilkan. Hapus dan menghilang-> <!-Kotak pop-up ini berjudul, dan kontennya adalah konten-> <Tombol type = "Tombol"-Trigger = "Foucus" Data-Placement = "Bottom"-Data-flacgle = "Popover" Data-Content = "Content"> Kotak Pop-up </buton>
Kemudian inisialisasi dengan JS
// inisialisasi popover
$ (". JS-Popover"). Popover ();
6. tombol
Dua artikel pertama berbicara tentang gaya dasar tombol. Kali ini canggih, memungkinkan tombol untuk menampilkan teks yang berbeda saat memuat.
<!-Anda dapat mengatur teks tombol saat memuat-> <tombol type = "tombol" data-loading-text = "loding for 3s"> memuat status </button>
Kemudian gunakan JS untuk mengikat acara klik
// Acara klik tombol pengikat $ (". JS-Loading-BTN"). ON ("Klik", fungsi (e) {// Setelah mengklik, diatur ke status memuat, menampilkan teks pemuatan var btn = $ (ini) .button ("memuat"); // restore setTimeout (function (e) {btn.7. Menumpuk
Efek penumpukan dapat menyimpan banyak kontrol layar, yang sangat praktis
Ini untuk mengklik tombol untuk membuka tumpukan
<!-HREF adalah ID konten-> <a data-koggle = "collapse" href = "#collapseexample"> klik untuk melihat </a> <div id = "collapseexample"> <div> hello </div> </div>
Ini adalah tumpukan grup panel
<div id="accordion" role="tablist"> <div> <div role="tab" id="headingOne"> <!--Title displayed--> <h4> <!--Data-parent If the id of the panel-group--> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a> </h4> </div> <!--Add in to open, without hiding--> <div id="collapseOne" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> <div> <div role="tab" id="headingTwo"> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a> </h4> </div> <div id = "collapsetwo" role = "TabPanel"> <div> halo <br> halo <br> halo <br> </div> </div> </div> <viv> <div role = "tab" id = "headingthe"> <h4> <a data-toggle = "collapse" data-pay = "headingthe"> <h4> <a data-toggle = "bollapse" data-pay = "parkir" </h4> </div> <div id = "collapsethree" role = "TabPanel"> <div> halo <br> halo <br> halo <br> </div> </div> </div> </div> </div> </div> </div>
8. Halaman berputar
Kita sering dapat melihatnya di beranda situs web
<Div id = "carousel-example-generic"> <!-Ini adalah tiga lingkaran putih di bawah indikator-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "#carousel-example-generic" data-slide-to = "1"> <Li Liousel-Li </LiTel-Generic "Data-Slide-to =" 1 "> <Li LiOousel-Generic" Data-Slide-to = "1"> Data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </l> <!-Konten halaman rotasi-> <dv> <mmg src = "gambar/4.jpg"> <!-Tambahkan teks-> <h3> U3D </H3> <p> <p> <p> <p> div <p> div </div> </div </div </div </div </div </div </div </div> div </div </div> div </div </div </div </div </div </div </div </div </div </div> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <h3> <h3> <p> src="images/2.jpg"> <div> <h3>U3D</h3> <p>New product launch</p> </div> </div> <div> <img src="images/3.jpg"> <div> <h3>Apple</h3> <p>Apple</p> </div> </div> <!--The arrows on the left and right of the rotation page--> <a href = "#carousel-example-generic" data-slide = "prew"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> <span> </span> </a> </div>
Anda dapat menetapkan interval dan mulai secara otomatis dengan JS
// Atur interval ke 2s dan secara otomatis carousel $ (". Carousel"). Carousel ({Interval: 2000})9. Sidebar
Konten utama dari sidebar adalah daftar
<!-Untuk mengatur lebar, sembunyikan di layar telepon-> <viv> <ul> <a href = "#"> halo </a> <a href = "#"> halo </a> <a href = "#"> hello </a> <a href = "#"> hello </a> <a href = "#" hello> <a href = "#"> hello> </a> <a href = "#"> hello> <a href = "#"> Hello </a> <a href = "#"> hello> <a href = "#" hello </a> <a href = "#"> hello> href = "#"> halo </a> <a href = "#"> halo </a> <a href = "#"> halo </a> <a href = "#"> halo </a> </ul> </div>
Tulis gaya lagi
<tyle> .Affixed-element-top.affix { /*Jika Anda ingin berada di bagian bawah, Anda dapat mengubahnya ke bawah: 10px;* / atas: 10px; } .Affixed-element-top.affix-bottom {position: relatif; } </style>Tambahkan beberapa JS
$ (". Js-affixed-element-top"). Affix ({offset: {}})Ini adalah penggunaan dasar boostrap. Setelah menguasainya, Anda dapat membuat halaman web yang bagus.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.