【Java 进阶篇】深入了解 Bootstrap 表格和菜单

Myth丶恋晨 2024-02-21 10:23 22阅读 0赞

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png]

表格和菜单是网页设计中的重要组成部分，它们用于展示数据、导航和用户交互。Bootstrap 是一个强大的前端框架，提供了丰富的表格样式和菜单组件，使开发者能够轻松创建功能丰富的网页。在本文中，我们将深入探讨 Bootstrap 中表格和菜单的使用，适合初学者，帮助他们更好地理解和应用这些元素。

### 什么是 Bootstrap 表格？ ###

表格是用于展示和组织数据的常见元素，它们通常由行和列组成，每个单元格中包含信息。Bootstrap 提供了一系列表格样式，使表格看起来漂亮、一致且易于阅读。

#### Bootstrap 表格的基本结构 ####

一个基本的 Bootstrap 表格由以下元素构成：

*  `<table>` 元素：这是 HTML 中的表格元素，用于创建一个表格。
 *  `class="table"`：这是 Bootstrap 的表格类，它定义了表格的基本样式。
 *  `<thead>` 元素：这是表格的表头部分，通常包含列名。
 *  `<tr>` 元素：这是表格的行，位于表头部分。
 *  `<th>` 元素：这是表格的表头单元格，用于定义列名。
 *  `<tbody>` 元素：这是表格的主体部分，包含实际数据。
 *  `<td>` 元素：这是表格的数据单元格，用于包含具体数据。

这个基本的表格结构可以根据需要进行扩展和自定义。您可以添加更多的列、行和数据以展示各种信息。

#### 不同样式的表格 ####

Bootstrap 提供了多种不同样式的表格，以满足不同设计需求。以下是一些常见的表格样式：

*  `table-striped`：斑马线表格，交替着色以提高可读性。
 *  `table-bordered`：带边框的表格，每个单元格都有边框。
 *  `table-hover`：鼠标悬停时高亮显示表格行。
 *  `table-responsive`：创建响应式表格，以适应小屏幕设备。

示例代码：

这些样式可以根据需要组合使用，以满足网页设计的不同需求。

#### 表格的排列和尺寸 ####

Bootstrap 还允许您轻松地更改表格的排列和尺寸。您可以使用以下类来实现这一目标：

*  `table-dark`：创建深色背景的表格。
 *  `table-sm`：创建小尺寸的表格。
 *  `table-lg`：创建大尺寸的表格。

示例代码：

这些类可以帮助您根据设计需求更改表格的外观。

### 什么是 Bootstrap 菜单？ ###

菜单是网页上的导航元素，用于帮助用户浏览和导航到不同的页面或功能。Bootstrap 提供了多种菜单组件，如导航栏、下拉菜单和标签页，以满足不同导航需求。

#### Bootstrap 导航栏的基本结构 ####

导航栏是网页顶部的常见导航元素，通常包含网站的标志、链接和其他导航项。一个基本的 Bootstrap 导航栏由以下元素构成：

*  `<nav>` 元素：这是 HTML 中的导航元素，用于创建一个导航栏。
 *  `class="navbar navbar-expand-lg navbar-light bg-light"`：这是 Bootstrap 的导航栏类，它定义了导航栏的样式和行为。
 *  `<a>` 元素：这是链接元素，用于创建网站的标志。
 *  `<button>` 元素：这是按钮元素，用于切换导航栏的折叠状态。
 *  `class="navbar-toggler-icon"`：这是 Bootstrap 提供的按钮图标，用于切换导航栏的展开和折叠状态。
 *  `class="navbar-nav"`：这是导航栏的导航项容器。
 *  `class="nav-item"`：这是导航栏的导航项，通常包含链接。
 *  `class="nav-link"`：这是导航栏链接的样式类。

这个基本的导航栏结构包含了网站的标志和几个导航链接。当浏览器窗口缩小到一定尺寸时，导航栏会自动折叠，以适应小屏幕设备。

#### 不同样式的导航栏 ####

Bootstrap 提供了多种不同样式的导航栏，以适应不同设计风格。以下是一些常见的导航栏样式：

*  `navbar-light`：亮色背景的导航栏。
 *  `navbar-dark`：深色背景的导航栏。
 *  `bg-primary`、`bg-secondary`：不同颜色的背景导航栏。
 *  `navbar-expand-lg`、`navbar-expand-md`：根据屏幕尺寸展开或折叠导航栏。

示例代码：

这些样式可以根据您的设计需求来选择，以使导航栏与您的网站或应用程序一致。

#### 下拉菜单 ####

下拉菜单是导航栏中常见的交互元素，它们允许用户访问更多选项。Bootstrap 提供了易于创建的下拉菜单组件。

以下是一个示例，展示如何在导航栏中创建下拉菜单：

<ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                下拉菜单
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">选项1</a>
                <a class="dropdown-item" href="#">选项2</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">分隔线后的选项</a>
            </div>
        </li>
    </ul>

在这个示例中，我们创建了一个带有下拉菜单的导航栏项。用户可以点击 “下拉菜单” 链接以显示下拉选项。

#### 标签页 ####

标签页是一种常见的导航元素，用于切换不同页面或内容。Bootstrap 提供了标签页组件，使您可以轻松创建标签页导航。

以下是一个示例，展示如何创建标签页导航：

<ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">首页</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">个人资料</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">联系方式</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">这是首页内容。</div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">这是个人资料内容。</div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">这是联系方式内容。</div>
    </div>

在这个示例中，我们创建了一个标签页导航，用户可以点击标签切换不同内容。

### 自定义表格和菜单 ###

尽管 Bootstrap 提供了丰富的表格和菜单组件，但您也可以根据需要进行自定义。您可以使用自己的CSS样式或JavaScript来增强这些元素。

以下是一些示例，展示如何自定义表格和菜单：

#### 自定义表格样式 ####

您可以通过添加自定义CSS样式来改变表格的外观。例如，您可以更改表格的背景颜色、字体样式和边框。

然后，您可以将自定义类应用于表格：

#### 自定义菜单样式 ####

同样，您可以通过自定义CSS样式来改变菜单的外观。例如，您可以更改菜单项的颜色和字体大小。

然后，您可以将自定义类应用于菜单项：

<ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link custom-menu-item" href="#">自定义菜单项</a>
        </li>
    </ul>

这样，您可以根据设计需求轻松自定义表格和菜单的外观。

### 结语 ###

表格和菜单是网页设计中的核心元素，Bootstrap 提供了丰富的表格样式和菜单组件，以满足不同设计需求。不论您是新手还是有一定经验的开发者，掌握 Bootstrap 中表格和菜单的使用都将有助于提升您的网页设计和用户体验。愿本文的内容能够帮助初学者更好地理解和应用表格和菜单，使他们能够创建功能丰富且吸引人的网页。希望您在网页设计的道路上取得成功！

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[ee6246a97e76456ea2a96231b3fde401.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/c7fe3bb926924059a20dc4f7a29f497a.png