Rumah >hujung hadapan web >tutorial css >Buat pil tab dan menu navigasi pil menegak dalam Bootstrap
Buat pil tab dan menu navigasi pil menegak dalam Bootstrap
- WBOYke hadapan
- 2023-08-27 23:05:09819semak imbas
Bootstrap menyediakan beberapa pilihan untuk mencipta menu navigasi, seperti pil bertab dan menegak Untuk mencipta menu navigasi jenis ini dalam Bootstrap, kami boleh menggunakan kelas dan komponen terbina dalam yang ditawarkan oleh rangka kerja ini dan menu navigasi berfungsi yang berfungsi dengan baik pada semua peranti.
Kaedah - 1: Navigasi Bertab
Dalam menu jenis ini setiap tab mewakili bahagian tapak web yang berbeza Pil disusun secara mendatar Setiap kali tab diklik, bahagian yang sepadan dipaparkan.
Algoritma
Muat fail CSS dan JavaScript Bootstrap.
Tambahkan elemen bekas dengan tajuk "Tutorialspoint".
Buat menu navigasi dengan 3 tab.
Isytihar setiap tab.
Tambahkan beberapa kandungan pada setiap tab.
Muat fail JavaScript dan jQuery Bootstrap.
Contoh
<!DOCTYPE html> <html> <head> <title>Tabbed Pill Navigation Menu Example</title> <!-- Add Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <!-- Container for the navigation menu and content --> <div class="container mt-4"> <!-- Page title --> <h1>Tutorialspoint</h1> <!-- Navigation menu with tabs as pills --> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <!-- Home tab --> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <!-- Profile tab --> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <!-- Contact tab --> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <!-- Content for each tab --> <div class="tab-content" id="pills-tabContent"> <!-- Home tab content --> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <h1>Home</h1> <p>Lorem ipsum dolor sit amet.</p> </div> <!-- Profile tab content --> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <h1>Profile</h1> <p>Lorem ipsum dolor sit amet.</p> </div> <!-- Contact tab content --> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <h1>Contact</h1> <p>Lorem ipsum dolor sit amet.</p> </div> </div> </div> <!-- Add Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
Kaedah – 2: Navigasi Pil Menegak
Tab menegak, sebaliknya, ialah sejenis menu navigasi di mana pautan disusun secara menegak dan bukannya mendatar. Ini membantu mencipta pengalaman pengguna yang lancar.
Algoritma
Buat bekas dengan tajuk "Tutorialspoint".
Bekas hendaklah mempunyai satu baris dan dua lajur.
Lajur pertama mengandungi menu navigasi menegak, manakala lajur kedua memaparkan kandungan item menu yang dipilih.
Menu dicipta menggunakan kelas "nav" dan "nav-pill", yang menyebabkan item menu dipaparkan dalam gaya menegak seperti pil.
Setiap item ialah tag anchor dengan "href" unik yang memaut ke "panel tab" yang memaparkan kandungan yang sepadan.
Kandungan setiap menu dipaparkan dalam "anak tetingkap tab" yang dibalut dalam kelas "kandungan tab".
Kod JavaScript termasuk perpustakaan jQuery dan beberapa pemalam JavaScript Bootstrap untuk membuat menu berfungsi.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Vertical Pill Navigation Menu</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Add jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Add Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Add Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
background-color: #f8f9fa;
}
/* Style for nav links */
.nav-pills .nav-link {
color: #fff;
background-color: #61a4f0;
border-radius: 0;
margin: 5px 0;
font-weight: bold;
padding: 10px;
border: none;
transition: all 0.2s ease-in-out;
}
/* Style for active and hover nav links */
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
background-color: #007bff;
color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Remove focus outline from nav links */
.nav-pills .nav-link:focus {
box-shadow: none;
outline: none;
}
/* Style for tab content */
.tab-content {
background-color: #fff;
padding: 20px;
border-radius: 0 4px 4px 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container">
<h1>Tutorialspoint</h1>
<div class="row">
<div class="col-md-3">
<!-- Vertical navigation pills -->
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-md-9">
<!-- Tab content -->
<div class="tab-content" id="v-pills-tabContent">
<!-- Home tab -->
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<h3>Home</h3>
<p>Welcome to the home page!</p>
</div>
<!-- Profile tab -->
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<h3>Profile</h3>
<p>Lorem ipsum dolor.</p>
</div>
<!-- Messages tab -->
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<h3>Messages</h3>
<p>Lorem ipsum dolor.</p>
</div>
<!-- Settings tab -->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<h3>Settings</h3>
<p>Lorem ipsum dolor.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Add Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Kesimpulan
Jenis menu ini boleh meningkatkan antara muka pengguna dan pengalaman pengguna tapak web anda.
Beberapa cara alternatif pelaksanaan termasuk,
Buat menu tersuai menggunakan fungsi CSS dan javascript tersuai.
Selain Bootstrap, rangka kerja CSS seperti Materialize dan Bulma menyediakan fungsi yang serupa.
Kami juga boleh menggunakan beberapa perpustakaan pihak ketiga seperti UI jQuery, UIkit dan UI Semantik untuk mencipta menu navigasi jenis ini.
Atas ialah kandungan terperinci Buat pil tab dan menu navigasi pil menegak dalam Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!