cari

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
WBOYasal
2016-05-16 15:02:021700semak imbas

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>

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!

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：Pengenalan kepada empat cara untuk mengikat acara dengan jQueryArtikel seterusnya：Pengenalan kepada empat cara untuk mengikat acara dengan jQuery

Artikel berkaitan

Lihat lagi