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

news2024/11/16 3:15:01

在这里插入图片描述

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

什么是 Bootstrap 表格?

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

Bootstrap 表格的基本结构

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

<table class="table">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </tbody>
</table>
  • <table> 元素:这是 HTML 中的表格元素,用于创建一个表格。
  • class="table":这是 Bootstrap 的表格类,它定义了表格的基本样式。
  • <thead> 元素:这是表格的表头部分,通常包含列名。
  • <tr> 元素:这是表格的行,位于表头部分。
  • <th> 元素:这是表格的表头单元格,用于定义列名。
  • <tbody> 元素:这是表格的主体部分,包含实际数据。
  • <td> 元素:这是表格的数据单元格,用于包含具体数据。

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

不同样式的表格

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

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

示例代码:

<table class="table table-striped">
    <!-- 表格内容 -->
</table>

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

表格的排列和尺寸

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

  • table-dark:创建深色背景的表格。
  • table-sm:创建小尺寸的表格。
  • table-lg:创建大尺寸的表格。

示例代码:

<table class="table table-dark table-sm">
    <!-- 表格内容 -->
</table>

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

什么是 Bootstrap 菜单?

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

Bootstrap 导航栏的基本结构

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">网站名称</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">关于我们</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">服务</a>
            </li>
        </ul>
    </div>
</nav>
  • <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-primarybg-secondary:不同颜色的背景导航栏。
  • navbar-expand-lgnavbar-expand-md:根据屏幕尺寸展开或折叠导航栏。

示例代码:

<nav class="navbar navbar-dark bg-primary">
    <!-- 导航栏内容 -->
</nav>

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

下拉菜单

下拉菜单是导航栏中常见的交互元素,它们允许用户访问更多选项。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样式来改变表格的外观。例如,您可以更改表格的背景颜色、字体样式和边框。

<style>
    .custom-table {
        background-color: #f3f3f3;
        font-family: Arial, sans-serif;
        border: 1px solid #ccc;
    }
</style>

然后,您可以将自定义类应用于表格:

<table class="table custom-table">
    <!-- 表格内容 -->
</table>

自定义菜单样式

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

<style>
    .custom-menu-item {
        color: #ff6600;
        font-size: 16px;
    }
</style>

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

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

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

结语

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

作者信息

作者 : 繁依Fanyi
CSDN: https://techfanyi.blog.csdn.net
掘金:https://juejin.cn/user/4154386571867191

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1119364.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

火热的“出海潮”背后,你还应该知道些什么?

点击文末“阅读原文”即可报名参会 剪辑、音频 / 卷圈 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 姝琦Midjourney 产品统筹 / bobo 场地支持 / 声湃轩北京录音间 联合制作 / RTE开发者社区 过去几十年&#xff0c;入华的科技企业“走进来”&#xff0c;加速了国内企业的数…

VM虚拟机创建centos7 64位系统提示此主机不支持64位客户机操作系统,此系统无法运行

VM虚拟机创建centos7 64位系统提示此主机不支持64位客户机操作系统,此系统无法运行 背景解决方案 背景 本身系统是window10 64位专业版系统&#xff0c;理论上不应该不支持64位的。 解决方案 最近安装docker开启了虚拟化hyper-v&#xff0c;关闭即可。 打开cmd&#xff08;…

Vue中的v-if和v-show指令有什么区别?

在Vue中,v-if和v-show是两个常用的指令,用于根据条件控制元素的显示和隐藏。虽然它们都可以根据条件来切换元素的可见性,但它们的实现和行为有一些区别。 1:编译时机: v-if是在编译阶段进行条件判断,如果条件为false,则在DOM中不会渲染该元素及其子元素;v-show则是在运…

MongoDB深度学习

MongoDB的简介 什么是MongoDB? MongoDB是一个基于分布式文件存储的数据库&#xff0c;由C语言编写。MongoDB是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的&#xff0c;它支持的数据结构非常松散&…

解码eBPF可观测性:eBPF如何改变我们所知的观测性

让我们来看看eBPF——这项技术到底是什么&#xff0c;它如何影响观测性&#xff0c;它与现有的观测性实践有什么区别&#xff0c;未来可能会发生什么变化&#xff1f; 在过去的两年里&#xff0c;云原生社区一直在热烈讨论eBPF。eBPF曾是KubeCon、eBPF Days和eBPF Summit的主题…

SystemVerilog Assertions应用指南 Chapter 1.17使用参数的SVA检验器

1.17使用参数的SVA检验器 SVA允许像 Verilog那样在检验器中使用参数( parameter)&#xff0c;这为创建可重用的属性提供了很大的灵活性。比如,两个信号间的延迟信息可以在检验器中用参数表示,那么这种检验器就可以在设计只有时序关系不同的情况中重用。例子1.2显示了个带延迟默…

【C++】一些C++11特性

C特性 1. 列表初始化1.1 {}初始化1.2 initializer_list 2. 声明2.1 auto2.2 typeid2.3 decltype2.4 nullptr 3. STL3.1 新容器3.2 新接口 4. 右值引用5. 移动构造与移动赋值6. lambda表达式7. 可变参数模板8. 包装器9. bind 1. 列表初始化 1.1 {}初始化 C11支持所有内置类型和…

Spring中自定义类型转换器

目录 一、什么是类型转换器 二、自定义类型转化器 2.1 实现Converter接口 2.2 在Spring中注册 三、自定义类型转换器中的细节 3.1 解决代码的耦合 3.2 注册标签id值必须唯一 ​3.3 Spring提供的日期转换器 一、什么是类型转换器 在Spring中类型转换器就是将配置文件中的字符串…

力扣一.链表的运用

一.合并生序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: 输入:l1 = [1,2,4], l2 = [1,3,4] 输出:[1,1,2,3,4,4] 输入:l1 = [], l2 = [] 输出:[] 输入:l1 = [], l2 = [0] 输出:[0]提示: 两个链表的…

【【萌新的FPGA学习之管脚设定xdc文件】】

萌新的FPGA学习之管脚设定xdc文件 xdc文件可以自己设置 也可以匹配 我们根据正点原子的流水灯管脚设定 主要讲述一下 各个英文设计是什么意思 Name&#xff1a;工程中顶层端口的名称。 Direction&#xff1a;说明管脚是输入还是输出。 Neg Diff Pair&#xff1a;负差分对&…

YOLOv5/v7/v8改进实验(三)之训练技巧篇

&#x1f680;&#x1f680; 前言 &#x1f680;&#x1f680; YOLO系列是一种目标检测算法&#xff0c;具有高效的实时性能和较高的准确性。一些常用的YOLO训练技巧往往可以帮助提高模型的性能和收敛速度。而这些技巧在YOLOv5、YOLOv7和YOLOv8几乎通用。 &#x1f525;&#…

CUDA编程入门系列(十一)CUDA程序优化技巧

优化原则&#xff1a;最大化并行执行 探索并行化&#xff1a; 优化线程块的规模 我们在设计CUDA程序的时候&#xff0c;要对线程块的个数进行考虑。因为GPU中流处理器SM的数量是相对固定的&#xff0c;所以我们应该尽量的将多个block放到同一个SM当中&#xff08;至少保证每个…

三、信号与槽

1. 信号槽的定义 信号函数和槽函数是Qt在C的基础上新增的功能&#xff0c;功能是实现对象之间的通信。 实现信号槽需要有两个先决条件&#xff1a; 通信的对象必须是从QObject派生出来的 QObject是Qt所有类的基类。 类中要有Q_OBJECT宏 2. 信号槽的使用 2.1 函数原型 最常…

免费SSL证书:JoySSL让您的网站更安全

在今天的数字化时代&#xff0c;保护网站和用户信息的安全至关重要。SSL&#xff08;Secure Sockets Layer&#xff09;证书通过加密网站与用户之间的通信&#xff0c;确保数据传输的安全性。让您拥有一个SSL加密的网站是至关重要的&#xff0c;但您可能会担心高昂的费用。不过…

秦丝科技“羽”深大计软学院同行,共庆深圳大学成立40周年

2023年10月21日&#xff0c; 由深圳大学工会主办 &#xff0c; 深圳大学体育学院 、深圳大学后勤部、丽湖校区管委会等单位协办的深圳大学2023年教职工羽毛球联赛-第一场正式举办&#xff1b; 由深圳市秦丝科技有限公司联合头部商户共同赞助的计算机与软件学院取得首场胜利&…

花生好车基于 KubeSphere 的微服务架构实践

公司简介 花生好车成立于 2015 年 6 月&#xff0c;致力于打造下沉市场汽车出行解决方案第一品牌。通过自建直营渠道&#xff0c;瞄准下沉市场&#xff0c;现形成以直租、批售、回租、新能源汽车零售&#xff0c;四大业务为核心驱动力的汽车新零售平台&#xff0c;目前拥有门店…

java基础--transient关键字减少序列化

前置内容 1.序列化 今天在看ArrayList源码的时候看到了这个&#xff0c;我之前应该是看过的&#xff0c;但是忘记了。现在在总结一下。 transient 用在类的属性上&#xff0c;不能修饰其他的。 作用&#xff1a;在序列化的时候transient修饰的属性不能被序列化 用途 在一些…

力扣:盛最多水的容器

题目 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾斜容器。 …

【公众号开发】图像文字识别 · 模板消息推送 · 素材管理 · 带参数二维码的生成与事件的处理

【公众号开发】&#xff08;4&#xff09; 文章目录 【公众号开发】&#xff08;4&#xff09;1. 图像文字识别功能1.1 百度AI图像文字识别接口申请1.2 查看文档学习如何调用百度AI1.3 程序开发1.3.1 导入依赖&#xff1a;1.3.2 公众号发来post请求格式1.3.3 对image类型的消息…