Python百日进阶-WEB开发】Day160 - 前端基础 之 BootStrap(五)

最新推荐文章于 2024-10-18 12:02:24 发布
原创 最新推荐文章于 2024-10-18 12:02:24 发布 · 640 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#前端 #bootstrap #javascript
本文详细介绍了Bootstrap中的导航组件，包括标签型、胶囊形、堆叠和自适应样式，以及如何创建分页导航和下拉菜单。此外，还展示了如何使用模态框进行弹窗交互，提供了代码实例以便读者实践。

文章目录

四、BootStrap插件

4.1 导航

使用下拉与按钮组合可以制作导航，要点:

  1. 基本样式:.nav与“nav-tabs、“nav-pills"组合制作导航
  2. 分类:
  • 标签型(nav-tabs)导航
  • 胶囊形(nav-pills)导航
  • 堆(nav-stacked)导航
  • 自适应(nav-justified)导航
  • 面包屑式(breadcrumb)导航,单独使用样式,不与nav一起使用,直接加入到ol、ul中即可,一般用于导航,主要是起的作用是告诉用户现在所处页面的位置(当前位置)
  1. 状态:
  • 选中状态 active样式
  • 禁用状态: disable
  1. 二级菜单

4.1.1 标签型(nav-tabs)导航

<!-- 标签式导航 -->
<div class="col-md-12" ">
	<div class="nav nav-tabs">
		<h4 class="col-md-offset-1">标签式导航</h4>
		<li class="active"><a href="#">主页</a></li>
		<li><a href="#">手机数码</a></li>
		<li><a href="#">大型家电</a></li>
		<li><a href="#">小型家电</a></li>
		<li><a href="#">日用洗化</a></li>
		<li><a href="#">联系我们</a></li>
	</div>
</div>

在这里插入图片描述

4.1.2 胶囊形(nav-pills)导航

<!-- 胶囊式导航 -->
<div class="col-md-12" ">
	<div class="nav nav-pills">
		<h4 class="col-md-offset-1">胶囊式导航</h4>
		<li class="active"><a href="#">主页</a></li>
		<li><a href="#">手机数码</a></li>
		<li><a href="#">大型家电</a></li>
		<li><a href="#">小型家电</a></li>
		<li><a href="#">日用洗化</a></li>
		<li><a href="#">联系我们</a></li>
	</div>
</div>

在这里插入图片描述

4.1.3 堆(nav-stacked)导航

<!-- 堆式导航 -->
<div class="col-md-12">
	<div class="nav nav-stacked">
		<h4 class="col-md-offset-1">堆式导航</h4>
		<li class="active"><a href="#">主页</a></li>
		<li><a href="#">手机数码</a></li>
		<li><a href="#">大型家电</a></li>
		<li><a href="#">小型家电</a></li>
		<li><a href="#">日用洗化</a></li>
		<li><a href="#">联系我们</a></li>
	</div>
</div>

在这里插入图片描述

4.1.4 自适应(nav-justified)导航

<!-- 自适应式导航 -->
<div class="col-md-12" ">
	<div class="nav nav-justified">
		<h4 class="col-md-offset-1">自适应式导航</h4>
		<li class="active"><a href="#">主页</a></li>
		<li><a href="#">手机数码</a></li>
		<li><a href="#">大型家电</a></li>
		<li><a href="#">小型家电</a></li>
		<li><a href="#">日用洗化</a></li>
		<li><a href="#">联系我们</a></li>
	</div>
</div>

在这里插入图片描述

4.1.5 面包屑式(breadcrumb)导航

<!-- 面包屑式导航 -->
<div class="col-md-12" ">
	<div class="breadcrumb">
		<h4 class="col-md-offset-1">面包屑式导航</h4>
		<li class="active"><a href="#">主页</a></li>
		<li><a href="#">手机数码</a></li>
		<li><a href="#">大型家电</a></li>
		<li><a href="#">小型家电</a></li>
		<li><a href="#">日用洗化</a></li>
		<li><a href="#">联系我们</a></li>
	</div>
</div>

在这里插入图片描述

4.2 分页导航

分页随处可见,分为页码导航和翻页导航

  • 页码导航:ul标签上加 pagination[pagination-Ig | pagination–sm]
  • 翻页导航:ul标签上加 pager
<!-- 分页导航-页码导航 -->
<div class="col-md-12">
	<div class=" text-center">
		<h4 class="">分页导航-页码导航</h4>
		<ul class="pagination">
			<li><a href="#">&laquo;</a></li>
			<li class="active"><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">&raquo;</a></li>
		</ul>
	</div>
</div>
<!-- 分页导航-翻页导航 -->
<div class="col-md-12">
	<div class="text-center">
		<h4 class="">分页导航-翻页导航</h4>
		<ul class="pager">
			<li><a href="#">上一页</a></li>
			<li><a href="#">下一页</a></li>
		</ul>
	</div>
</div>

在这里插入图片描述

4.3 下拉菜单

在使用 Bootstrap框架的下拉菜单时,必须使用两个js

<!-- 如果要使用Bootstrap的js插件,必须先调入 jQuery-->
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<!--包括所有bootstrap的js插件或者可以根据需要使用的js插件调用-->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

要点:

  1. 使用一个类名为 dropdown或btn-group的div包裹整个下拉框:
2. 默认向下 dropdown,向上弹起加入 .dropup即可 3. 使用 button作为父菜单,使用类名: dropdown-toggle和自定义data-toggle属性 4. 在 button中使用font制作下拉箭头 5. 下拉菜单项使用一个ul列表,并且定义一个类名为"dropdown-menu" 6. 分组分割线:< li>添加类名"divider"来实现添加下拉分隔线的功能 7. 分组标题:li 添加类名"dropdown-header"来实现分组的功能 8. 对齐方式: - dropdown--menu-left左对齐默认样式 - dropdown-right-menu-右对齐 9. 激活状态( .active)和禁用状态(. disabled) 
<!-- 下拉菜单（需要先引入bootstrap的css和jquery以及bootstrap的js） -->
<div class="col-md-12 col-md-offset-2" style="height: 50rem;">
	<!-- 使用一个类名为 dropdown或btn-group的div包裹整个下拉框 -->
	<div class="dropdown">
		<!-- 使用 button作为父菜单,使用类名: dropdown-toggle和自定义data-toggle属性指向dropdown -->
		<button type="button" class="dropdown-toggle" data-toggle="dropdown">
			我的频道
			<!-- 在 button中使用font制作下拉箭头 -->
			<span class="caret"></span>
		</button>
		<!-- 下拉菜单项使用一个ul列表,并且定义一个类名为"dropdown-menu" -->
		<ul class="dropdown-menu">
			<!-- 分组标题:li 添加类名"dropdown-header"来实现分组的功能 -->
			<li class="dropdown-header">--科普--</li>
			<!--  target="_blank" 代表新开窗口 -->
			<li><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">人与自然</a></li>
			<li><a href="#">电脑</a></li>
			<li><a href="#">平板</a></li>
			<!-- 分组分割线:< li>添加类名"divider"来实现添加下拉分隔线的功能 -->
			<li class="divider"></li>
			<li class="dropdown-header">--生活--</li>
			<li><a href="https://baike.baidu.com/item/%E5%BF%AB%E4%B9%90%E5%A4%A7%E6%9C%AC%E8%90%A5/68542?fr=aladdin" target="_blank">快乐大本营</a></li>
			<li class="active"><a href="https://www.baidu.com/" target="_blank">百度</a></li>
			<li><a href="#">水产</a></li>
			<li class="divider"></li>
			<li class="disabled"><a href="#">禁用菜单</a></li>
		</ul>
	</div>
</div>

在这里插入图片描述

4.4 模态框

模态框(Modal)是覆盖在父窗体上的子窗体(弹窗)。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

4.4.1 用法

  1. 通过data属性:在控制器元素(比如按钮或者链接)上设置属性data-toggle=“modal”,同时设置data-target=“#identifier"或href=”#identifier"来指定要切换的特定的模态框(带有id=“identifier”)。
  2. 通过 JavaScript:使用这种技术,可以通过 JavaScript来调用带有id="identifier"的模态框:
  • 打开模态框：$(‘#identifier’) .modal (‘show’);
  • 关闭模态框：$(‘#identifier’) .modal (‘hide’);
    在这里插入图片描述

4.4.2 实例

<!-- 模态框（需要先引入bootstrap的css和jquery以及bootstrap的js） -->
<div class="col-md-12" style="height: 80rem;">
	<h3>创建模态框(Modal)</h3>
	<!-- 通过data属性:在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal",同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框(带有id="identifier")。 -->
	<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
		设置data属性打开模态框
	</button>
	<!-- 通过JS打开模态框 -->
	<button type="button" id="btn" class="btn btn-primary btn-lg" onclick="$('#myModal') .modal ('show')">
		通过JS打开模态框
	</button>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题:添加用户</h4>
				</div>
				<div class="modal-body">
					模态框(Modal)是覆盖在父窗体上的子窗体(弹窗)。<br>
					<form action="" method="post" class="form-horizontal" role="form">
						<div class="form-group">
							<label for="uname" class="col-md-2 control-label">姓名</label>
							<div class="col-md-8">
								<input type="text" name="" id="uname" value="" class="form-control" placeholder="请输入姓名"/>
							</div>
						</div>
						<div class="form-group">
							<label for="pwd" class="col-md-2 control-label">密码</label>
							<div class="col-md-8">
								<input type="password" name="" id="pwd" value="" class="form-control" placeholder="请输入密码"/>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<!-- 通过JS关闭模态框 -->
					<button type="button" class="btn btn-default" onclick="$('#myModal') .modal ('hide')">js关闭模态框</button>
					<button type="button" class="btn btn-primary">提交</button>
				</div>
			</div>
		</div>
	</div>
</div>

在这里插入图片描述

bootstrap-4.1.1.zip
06-16
最新bootstrap-4.1.1.zip+popper+jquery-3.3.1.min.js
bootstrap-4.1.2
08-15
bootstrap的最新版本，解压直接导入即可。bootstrap的最新版本，解压直接导入即可。
BootStrap学习笔记
m0_59686606的博客
10-04 379
TITLE：BootStrap学习笔记 BootStrap入门 1.主要内容 BootStrap模板 <!DOCTYPE html> <html lang="en"> <head> <!--设置当前HTML文件的字符编码--> <!--compatible兼容的，设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）--> <!--声明当前网页在移动端浏览器展示的相关设置--> <!--
python web开发 Bootstrap框架基础
Michael是个半路程序员
11-30 1556
文章目录1. 安装2. Bootstrap 5 基本应用 learning from 《python web开发从入门到精通》 Bootstrap 是最受欢迎的 前端组件库，用于 HTML，CSS，JavaScript 开发的 开源工具集 1. 安装 使用 CDN 引用 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="
前端技术（Bootstrap)
哈哈哈哈哈哈哈哈的博客
09-10 1658
1、什么是Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 2、为什么使用Bootstrap? 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支.
使用python，flask+bootstrap5，打造浏览器版的学生信息管理系统
qyh_it的博客
11-17 1129
{‘studentid’: ‘2023’,‘name’:‘张一’,‘chinese’:‘60’,‘math’:‘60’,‘english’:‘60’},{‘studentid’: ‘2022’,‘name’:‘张二’,‘chinese’:‘60’,‘math’:‘60’,‘english’:‘60’},{‘studentid’: ‘2021’,‘name’:‘张三’,‘chinese’:‘60’,‘math’:‘60’,‘english’:‘60’},#先显示学员的数据，在浏览器修改，提交到服务器保存。
【亲测免费】 Django-Bootstrap5：为Django项目提供Bootstrap 5支持
最新发布
gitblog_01222的博客
10-18 518
Django-Bootstrap5：为Django项目提供Bootstrap 5支持 1、项目的基础介绍和主要的编程语言 Django-Bootstrap5是一个开源项目，旨在为Django框架提供对Bootstrap 5的支持。该项目的主要编程语言是Python，适用于那些希望在其Django项目中集成Bootstrap 5的用户。通过这个项目，开发者可以轻松地将现代化的前端设计与强大的后端逻辑...
Python百日进阶-WEB开发】Day156 - 前端基础 之 BootStrap(一)
专注于医院数据分析技术与系统开发的创作与分享。
10-10 961
文章目录一、BootStrap的安装和使用1.1 BootStrap介绍1.2 BootStrap特点1.3 下载使用1.3.1 下载BootStrap:1.3.2 下载 jquery.js1.4 创建项目1.5 bootstrap和vue对比1.5.1 Bootstrap和vue不是一个层级的东西，Vue是框架，bootstrap是基于jQuery的组建库。1.5.2 Bootstrap特点1.5.2.1 Bootstrap优点1.5.2.1 Bootstrap缺点1.5.3 Vue特点1.5.3.1 V
Python百日进阶-WEB开发】Day158 - 前端基础 之 BootStrap(三)
专注于医院数据分析技术与系统开发的创作与分享。
10-13 550
文章目录三、常用样式3.1 排版3.1.1 标题3.1.2 段落3.1.3 强调3.1.4 对齐效果3.1.5 列表3.1.5.1 去点列表 class="list-unstyled"3.1.5.2 内联列表 class="list-inline"3.1.5.3 定义列表3.1.6 代码3.1.6.1.单行内联代码3.1.6.2.快捷键3.1.7 表格3.1.7.1 表格样式3.1.7.2 tr、th、td样式3.2 表单3.2.1 表单控件3.2.1.1 输入框 input text：.form-con
Python百日进阶-WEB开发】Day157 - 前端基础 之 BootStrap(二)
专注于医院数据分析技术与系统开发的创作与分享。
10-11 665
文章目录二、布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统2.3 列组合2.4 列偏移2.5 列排序2.6 列嵌套2.7 栅格网格系统布局示例 二、布局容器和栅格网格系统 2.1 布局容器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>布局容器</title> <link rel="stylesheet" href="bootst
Python百日进阶-WEB开发】Day159 - 前端基础 之 BootStrap(四)
专注于医院数据分析技术与系统开发的创作与分享。
10-14 414
文章目录3.4 表单3.4.1 表单控件3.4.1.1 输入框 input text：.form-control3.4.1.2 下拉选择框 select3.4.1.3 文本域 textarea3.4.1.4 复选框 checkbox3.4.1.5 单选框 radio3.4.1.6 按钮3.4.1.6.1 使用button实现3.4.1.6.2 多标签支持：使用 a div 等制作按钮3.4.1.6.3 按钮大小3.4.1.6.4 按钮禁用3.4.2 表单布局3.4.2.1 水平表单3.4.2.2 内联表单
【Python百日进阶-Web开发-Feffery】Day306 - Flask网页中嵌入多个dash应用
专注于医院数据分析技术与系统开发的创作与分享。
03-17 1045
文章目录一、Flask网页中嵌入多个dash应用1.1 页面效果1.2 完整代码1.2.1 flask_app.py1.2.2 dash_app1.py1.2.3 dash_app2.py1.2.4 wsgi.py1.2.5 index.html 一、Flask网页中嵌入多个dash应用 Dash 有一个小秘密：它是在 Flask 的帮助下实现的。 事实上，Dash 实际上扩展了 Flask：每次我们制作 Dash 应用程序时，我们实际上都是在创建一个带有额外花里胡哨的 Flask 应用程序。 这听起来很合
bootstrap-4.1.1
07-25
前端bootstrap框架，官网下载bootstrap-4.1.1源码版本。
python django+bootstrap实现用户管理系统
06-28
python+django+bootstrap实现的管理系统，注释全，功能强大，又文档说明，导入即可查看源码，初学者必备
【Python百日基础系列】Day21 - Dash安装与布局实例(一)
专注于医院数据分析技术与系统开发的创作与分享。
11-14 6340
文章目录一、Dash简介二、Dash及主题框架安装2.1 Dash安装2.2 Dash Bootstrap Components安装三、Dash布局实例（一）3.1 实例1：柱状图 视频讲解： 【Python百日基础系列】21 Dash安装与布局实例1 一、Dash简介 Dash是一个用于构建Web应用程序的高效Python框架。 Dash写在Flask，Plotly.js和React.
【Python百日进阶-Web开发-Feffery】Day305 - fac开发交互应用：高级回调特性2
专注于医院数据分析技术与系统开发的创作与分享。
03-16 645
文章目录1.4 多输入情况下获取部件触发情况1.4.1 页面效果1.4.2 完整代码 09_app.py1.5 在浏览器端执行回调过程1.5.1 页面效果1.5.2 完整代码 10_app.py1.6 复杂js：根据不同输入值切换渲染出的图表类型1.6.1 页面效果1.6.2 完整代码1.6.2.1 11_复杂JS.py1.6.2.2 browser_callbacks.js 1.4 多输入情况下获取部件触发情况 在很多应用场景下，我们的某个回调可能拥有多个Input输入，但学过前面的内容我们已经清楚，不管
【Python百日基础系列】Day55 - DBC 下拉列表框、单选、复选
专注于医院数据分析技术与系统开发的创作与分享。
12-06 483
文章目录十六、选择组件 dbc.Select()16.1 示例16. Select 的关键字参数十七、单选和复选17.1 基本单选复选列表17.2 水平选项17.3 选中的项目样式17.4 RadioItems 的关键字参数17.5 Checklist的关键字参数十八、独立复选框、切换开关和单选按钮18.1 示例18.2 颜色选择器18.3 Checkbox 的关键字参数18.4 RadioButton 的关键字参数 视频讲解： 十六、选择组件 dbc.Select() 该Select组件可用于呈现 Boo
Bootstrap、Python、Flask 做简单的前端
谢彦的技术博客
01-12 3220
1. 说明  无论做什么类型的程序，都难免需要给别人展示一下。Web展示是个很好的方案，做起来省事，效果好，可交互，无需安装，跨平台，等等等等，算是个必备技能，与做PPT比肩。 前一阵用pyecharts做网页统计图，发现自己做的界面实在太丑，同时又想引用一些现成的风格和控件，于是学习了一下Web前端框架，顺带熟悉一下JS。菜鸟入门，记录如下，仅供参考。 2. 前端流行框架  先看看几种流行...
Python学习笔记：5.3.4 bootstrap框架
元文的博客
02-10 2258
本文主要讲解了bootstrap框架简介、响应式设计、bootstrap响应式布局、bootstrap组件等相关内容。
python-Bootstrap框架
淋巴cell学习py之路
02-28 5600
文章目录1.什么是Bootstrap框架?2.学习网站3.新闻网站注册登陆界面1)实现登陆界面2)实现注册界面 1.什么是Bootstrap框架? Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、 CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

岳涛@泰山医院

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值