学习Bootstrap 5的第十四天

目录

Toast

如何创建 Toast

实例

打开 Toast

实例

滚动监听(Scrollspy)

如何创建滚动监听

实例

侧边栏导航(Offcanvas)

如何创建 Offcanvas 侧边栏

实例

侧边栏的方向

实例

设置背景及背景是否可滚动

实例

侧边栏案例

实例


Toast

Toast 组件类似警告框,当发生某些事情时(例如当用户单击按钮、提交表单等)时,它只会显示几秒钟。

如何创建 Toast

如需创建 Toast,请使用 .toast 类,并在其中添加 .toast-header 和 .toast-body。

注意:默认情况下,toast 是隐藏的。如果要显示它,请使用 .show 类。如果要关闭它,请使用

Toast 内容

运行结果

学习Bootstrap 5的第十四天_第1张图片

打开 Toast

如需通过单击按钮显示 Toast,将必须使用 JavaScript 对其进行初始化。选取指定的元素并调用 toast() 方法。当单击按钮时,以下代码将显示文档中的所有 toast。

实例



	
		Bootstrap5 实例
		
		
		
		
	
	
		

打开 Toast


运行结果

学习Bootstrap 5的第十四天_第2张图片

滚动监听(Scrollspy)

滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

如何创建滚动监听

要创建一个 Bootstrap 5 滚动监听(Scrollspy),需要执行以下步骤:

  1. 设置导航菜单的基本结构,将其放置在需要滚动监听的容器内。
  2. 在导航菜单中设置 data-bs-spy="scroll" 属性,以启用滚动监听。
  3. 在导航菜单中设置 data-bs-target 属性,并指定要监听的容器 ID,例如 data-bs-target="#navbar"。
  4. 在 JS 中初始化滚动监听插件,例如 var scrollSpy = new bootstrap.ScrollSpy(document.body, { target: '#navbar' })。

实例



	
		Bootstrap5 实例
		
		
		
		
	
	

		
		

		
		

Section 1

Section 2

Section 3

将上述代码保存为一个 HTML 文件,并在浏览器中打开,你将看到一个包含滚动监听功能的页面。当你滚动页面时,导航菜单中的链接将根据当前滚动位置自动更新活动状态。 

运行结果学习Bootstrap 5的第十四天_第3张图片

侧边栏导航(Offcanvas)

如何创建 Offcanvas 侧边栏

  1. 使用 Bootstrap 5 的类 .offcanvas 来创建侧边栏导航。
  2. 通过 JavaScript 控制是否在 .offcanvas 类后面添加 .show 类来控制侧边栏的显示与隐藏。
  3. 使用 链接的 href 属性或
  4. 使用 data-bs-toggle="offcanvas" 来启用侧边栏的切换功能。

实例



	
		Bootstrap5 实例
		
		
		
		
	
	
		

如何创建 Offcanvas 侧边栏

使用链接的 href 属性
侧边栏标题

这是侧边栏的内容。

运行结果

学习Bootstrap 5的第十四天_第4张图片

侧边栏的方向

可以使用以下四个类来控制侧边栏的方向:

  1. .offcanvas-start:将侧边栏显示在左侧。
  2. .offcanvas-end:将侧边栏显示在右侧。
  3. .offcanvas-top:将侧边栏显示在顶部。
  4. .offcanvas-bottom:将侧边栏显示在底部。

通过在侧边栏的外层

元素上添加相应的类来设置侧边栏的方向。例如,如果希望将侧边栏显示在右侧,可以将
元素的类设置为 offcanvas offcanvas-end。

实例

下面是一个显示侧边栏在右侧的示例代码:



	
		Bootstrap5 实例
		
		
		
		
	
	
		

侧边栏的方向

使用链接的 href 属性
将侧边栏显示在右侧

将侧边栏显示在右侧

运行结果

学习Bootstrap 5的第十四天_第5张图片

设置背景及背景是否可滚动

可以使用 data-bs-scroll 属性来设置 元素是否可以滚动,并使用 data-bs-backdrop 属性来控制是否显示背景画布。

  • data-bs-scroll="true":当侧边栏显示时,允许页面内容滚动。
  • data-bs-scroll="false":当侧边栏显示时,禁止页面内容滚动。
  • data-bs-backdrop="true":当侧边栏显示时,显示一个背景画布。
  • data-bs-backdrop="false":当侧边栏显示时,不显示背景画布。

实例



	
		Bootstrap5 实例
		
		
		
		
	
	
		
正文内容可以滚动

滚动页面查看效果。

使用背景画布

正文内容不可滚动

使用背景画布,正文内容可滚动

滚动页面查看效果。

侧边栏滚动测试

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。






侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。






侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。






侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。






侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。






侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。






侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。






侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。

侧边栏滚动测试内容。。。。






侧边栏案例

实例




  Bootstrap5 实例
  
  
  
  
  



  
    Bootstrap
    
  
  
    
  
  
    
    
  
  
    
  
  
    
    
  
  
    
  
  
    
  
  
    
    
  
  
    
  
  
    
    
  
  
    
  
  
    
    
  
  
    
    
    
  
  
    
  
  
    
  
  
    
  


Sidebars examples

运行结果学习Bootstrap 5的第十四天_第6张图片

你可能感兴趣的:(Bootstrap,学习,bootstrap,前端)