masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Contoh kod untuk membuat bar navigasi dengan kemahiran BootStrap_javascript

Contoh kod untuk membuat bar navigasi dengan kemahiran BootStrap_javascript

WBOY
Lepaskan： 2016-05-16 15:02:02
asal
1684 orang telah melayarinya

Apakah Bootstrap?

Bootstrap ialah rangka kerja bahagian hadapan untuk pembangunan pesat aplikasi web dan tapak web. Bootstrap adalah berdasarkan HTML, CSS dan JAVASCRIPT.

Saya telah lama cuba memikirkan bar navigasi bootstrap sama ada bahagian kiri dan kanan tidak dijajarkan secara mendatar, atau warnanya berbeza, saya akhirnya tahu dan hanya meletakkan kod di sini dan menggunakannya secara langsung pada masa hadapan

Kodnya adalah seperti berikut: 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role = "navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">KKK</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">首页 <span class="sr-only"></span></a></li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li><a href="#">haha<span class="sr-only"></span></a></li>
<li><a href="#">haha<span class="sr-only"></span></a></li>
</ul>
</div>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Salin selepas log masuk

Lihat hasilnya

Contoh kod untuk membuat bar navigasi dengan kemahiran BootStrap_javascript

Di atas ialah contoh kod untuk mencipta bar navigasi dengan BootStrap yang diperkenalkan oleh editor saya harap ia akan membantu anda!

Label berkaitan：
bootstrap导航条
sumber：php.cn
Artikel sebelumnya：Pengenalan kepada empat cara untuk mengikat acara dengan jQuery Artikel seterusnya：Perbandingan jQuery Mobile dan Kendo UI_Basics
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Dalam paparan mudah alih, bagaimana saya boleh menutup bar navigasi ini apabila pengguna mengklik pada pautan? Apabila pengguna mengklik pautan untuk menyemak imbas tapak web, bar navigasi tidak ditutu...
daripada 2024-04-06 19:23:03
0
1
411
Tunjukkan panel sisi tersembunyi: ditandai Saya ingin mempunyai menu navigasi dalam panel sisi dengan keupayaan untuk beralih kepada ...
daripada 2024-04-06 15:49:33
0
1
319
Sempadan bawah CSS pada bar navigasi Saya mempunyai bar navigasi dan saya telah menambah garis merah di bahagian bawah apabila ...
daripada 2024-04-06 15:04:41
0
2
347
Adakah terdapat cara untuk menetapkan prop laluan dalam vue? Saya mahu menavigasi ke tab tertentu dalam halaman ini.$router.push({name:"AdminNotif...
daripada 2024-04-06 11:35:59
0
1
456
Penghala React Penghala bersarang dan penggunaan parameter carian Apabila menggunakan parameter carian dalam laluan React bersarang, apabila saya menggunaka...
daripada 2024-04-05 13:48:33
0
1
1475
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan