Bootstrap Tutorial

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

青灯夜游

Nov 23, 2021 pm 06:48 PM

bootstrapTab component

This article will take you to learn about the navigation and tab components in bootstrap, and introduce how to use the navigation component and tab component. I hope it will be helpful to everyone!

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

The navigation bar is a necessary function of the website system. In the past, it took a lot of effort to make a good navigation bar, but now it is available Bootstrap5 navigation, from now on, you can create a beautiful navigation bar with just a few moments of copy and paste. [Related recommendations: "bootstrap tutorial"]

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <ul>
                <li>
                <a class="nav-link href="#">首页</a>
                </li>
                <li>
                <a href="#">文章</a>
                </li>
                <li>
                <a href="#">图片</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
                </li>
                </ul>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

You can also make your code more concise

<nav class="nav">
  <a class="nav-link" href="#">首页</a>
  <a class="nav-link" href="#">文章</a>
  <a class="nav-link" href="#">图片</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>

This code The display is the same as above. As for the unavailable buttons inside, there is no need to put them in the menu unless it is for some special purpose (for example, it is available to members but not available to ordinary people).

Both writing methods have their own advantages;

The first one is more organized, and it is clearer when there are other decorative elements in the navigation, such as icons, etc., and it is also You can change the link display method by writing the li style class. In some companies, employees' work performance will be evaluated based on the amount of code (I heard that many companies do this).
The second one is more concise. What the second one can achieve can be achieved by the first one, but the reverse is not true. After all, the lite version has castrated some functions.
I will use the second type for the following demonstrations. It will be no problem to switch to the first type for all demonstrations.

2 Common styles

2.1 Horizontal alignment

You can easily change the horizontal alignment of navigation using the flexible box general class. Navigation is aligned to the left by default, and you can easily change it to center or right.

Use .justify-content-center to align in the center:
Use .justify-content-end to align to the right:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <nav class="nav justify-content-center">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav justify-content-end">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

You may also see that multiple navigations can be placed on a page.

Change the navigation to vertical navigation by using the .flex-column generic class. If you only want stacking under specific viewports, use the responsive version (e.g. .flex-sm-column).

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <nav class="nav flex-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav flex-sm-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script  ></script>
  </body>
</html>

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

ps: This response is vertical when it is greater than the breakpoint, because vertical navigation is generally used for secondary navigation or in-page navigation. If the screen is too small, vertical navigation It takes up reading space, so the play is not needed. If you want to hide the horizontal navigation function when the screen is made smaller, the navigation toolbar in the next chapter will be introduced in detail.

2.3 Tab style

Use basic navigation and add .nav-tabs to generate an interface with paging tabs. Use the paging JavaScript plug-in in the "Tab Usage" section below to create switchable blocks. The tab style is very simple. If you want to implement specific functions, we will introduce it in detail later, and there is also detailed code later.

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

2.4 Capsules

Capsules are used the same as tabs, but use .nav-pills instead of nav-tabs:

<ul class="nav nav-pills">

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

2.5 Fill and align

.nav content has two classes for width expansion. Using .nav-fill will allocate space to the .nav-item content in proportion. Note that this takes up all the horizontal space, but not every navigation item will be the same width.

Please use .nav-justified to create equal-width elements. All horizontal space will be taken up by the navigation links, but unlike the .nav-fill above, each navigation item will be the same width.

 <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

            <br><br>

            <ul class="nav nav-pills nav-justified">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

You can compare the differences between the two alignments.

3.1 Using flexible box utility classes

If you need responsive navigation changes, please use a series of flexible box common classes. These general classes provide more customization between breakpoints. In the example below, our navigation will be stacked below the small breakpoint and layout horizontally from the small breakpoint to fill all available width.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="nav nav-pills flex-column flex-sm-row">
                <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
                <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </nav>
        </div>
   
     <script  ></script>
  </body>
</html>

Display under different browser widths.

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

3.2 使用下拉列表

加入额外的HTML和下拉菜单JavaScript插件

带下拉列表的选项卡

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <br><br><br>
            <ul class="nav nav-tabs">
                <li>
                <a class="nav-link active" aria-current="page" href="#">Active</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                <ul>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><hr></li>
                <li><a href="#">Separated link</a></li>
                </ul>
                </li>
                <li>
                <a href="#">Link</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
                </ul>
     <script  ></script>
  </body>
</html>

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

带下拉列表的胶囊只需要将nav-tabs换成nav-pills

<ul class="nav nav-pills">

How to add navigation components and tab components in Bootstrap? A brief analysis of usage

4 使用选项卡

4.1 普通选项卡

前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
                </li>
                <li role="presentation">
                <button id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">资料</button>
                </li>
                <li role="presentation">
                <button id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">联系方式</button>
                </li>
                </ul>

                <div id="myTabContent">

                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <h1 id="首页内容">首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <h1 id="个人资料">个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <h1 id="联系方式">联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                </div>
        </div>
   
     <script  ></script>
  </body>
</html>

1How to add navigation components and tab components in Bootstrap? A brief analysis of usage

4.2 胶囊选项卡

跟前面胶囊一样，只是换一个标签这么简单。

<ul class="nav nav-pills" id="myTab" role="tablist">

1How to add navigation components and tab components in Bootstrap? A brief analysis of usage

4.3 垂直胶囊选项卡

这个段代码把普通链接改成了按钮，其实也是一样的，看着貌似很复杂，其实只需要复制进去，修改一下你要的地方就好了。

需要注意的是，垂直标签的内容显示在右侧（当然也可以菜单在右边，内容在左边），所以在布局的时候跟前面不太一样。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <div class="d-flex align-items-start">
                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</button>
                <button id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">资料</button>
                <button id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">信息</button>
                </div>

                <div id="v-pills-tabContent">

                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <h1 id="首页内容">首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <h1 id="个人资料">个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                        <h1 id="联系方式">联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
               
            </div>
            </div>

        </div>
   
     <script  ></script>
  </body>
</html>

1How to add navigation components and tab components in Bootstrap? A brief analysis of usage

4.4 淡入淡出效果

要使选项卡或菜单淡入淡出，请将.fade加到每个.tab-pane分页中。第一个分页内容还必须具有.show以使初始内容可见。事实上上面已经用了淡入淡出效果，试着去掉tab-pane中的fade，看一下效果。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

The above is the detailed content of How to add navigation components and tab components in Bootstrap? A brief analysis of usage. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete

What is Bootstrap? An Introduction for BeginnersApr 22, 2025 am 12:07 AM

BootstrapisafreeCSSframeworkthatsimplifieswebdevelopmentbyprovidingpre-styledcomponentsandJavaScriptplugins.It'sidealforcreatingresponsive,mobile-firstwebsites,offeringaflexiblegridsystemforlayoutsandasupportivecommunityforlearningandcustomization.

Bootstrap Demystified: A Simple ExplanationApr 21, 2025 am 12:13 AM

Bootstrapisafree,open-sourceCSSframeworkthathelpscreateresponsive,mobile-firstwebsites.1)Itoffersagridsystemforlayoutflexibility,2)includespre-styledcomponentsforquickdesign,and3)ishighlycustomizabletoavoidgenericlooks,butrequiresunderstandingCSStoop

Bootstrap vs. React: Choosing the Right ApproachApr 20, 2025 am 12:09 AM

Bootstrap is suitable for quick construction and small projects, while React is suitable for complex and interactive applications. 1) Bootstrap provides predefined CSS and JavaScript components to simplify responsive interface development. 2) React improves performance and interactivity through component development and virtual DOM.

Bootstrap's Purpose: Building Consistent and Attractive WebsitesApr 19, 2025 am 12:07 AM

The main purpose of Bootstrap is to help developers quickly build responsive, mobile-first websites. Its core functions include: 1. Responsive design, which realizes layout adjustments of different devices through a grid system; 2. Predefined components, such as navigation bars and modal boxes, ensure aesthetics and cross-browser compatibility; 3. Support customization and extensions, and use Sass variables and mixins to adjust styles.

Bootstrap vs. Other Frameworks: A Comparative OverviewApr 18, 2025 am 12:06 AM

Bootstrap is better than TailwindCSS, Foundation, and Bulma because it is easy to use and quickly develop responsive websites. 1.Bootstrap provides a rich library of predefined styles and components. 2. Its CSS and JavaScript libraries support responsive design and interactive functions. 3. Suitable for rapid development, but custom styles may be more complicated.

Integrating Bootstrap Styles in React: Methods and TechniquesApr 17, 2025 am 12:04 AM

Integrating Bootstrap in React projects can be done in two ways: 1) introduced using CDN, suitable for small projects or rapid prototyping; 2) installation using npm package manager, suitable for scenarios that require deep customization. With these methods, you can quickly build beautiful and responsive user interfaces in React.

Bootstrap in React: Advantages and Best PracticesApr 16, 2025 am 12:17 AM

Advantages of integrating Bootstrap into React projects include: 1) rapid development, 2) consistency and maintainability, and 3) responsive design. By directly introducing CSS files or using the React-Bootstrap library, you can use Bootstrap's components and styles efficiently in your React project.

Bootstrap: A Quick Guide to Web FrameworksApr 15, 2025 am 12:10 AM

Bootstrap is a framework developed by Twitter to help quickly build responsive, mobile-first websites and applications. 1. Ease of use and rich component libraries make development faster. 2. The huge community provides support and solutions. 3. Introduce and use class names to control styles through CDN, such as creating responsive grids. 4. Customizable styles and extension components. 5. Advantages include rapid development and responsive design, while disadvantages are style consistency and learning curve.

See all articles