学习Bootstrap 5的第十一天

目录

折叠

基础的折叠

实例

Accordion(手风琴)

实例

导航

导航菜单

实例

导航对齐方式

实例

垂直导航栏

实例

动态选项卡

实例

胶囊状动态选项卡

实例

等宽的选项卡/胶囊的下拉菜单

实例

导航栏

基础的导航栏

实例

垂直导航栏

实例

居中对齐的导航栏

实例

不同颜色导航栏

实例

品牌/Logo

实例

导航栏文本


折叠

基础的折叠

在 Bootstrap 5 中,折叠效果可以通过添加特定的属性和类来轻松实现内容的显示和隐藏。具体步骤如下:

1、创建一个可折叠的元素,通常使用

标签,并为其添加 .collapse 类,以指示它是可折叠的。

...

2、在按钮或链接中添加 data-bs-toggle="collapse" 属性,以触发折叠效果,并使用 data-bs-target="#id" 或 href="#id" 属性将按钮或链接与要折叠的元素关联起来。


或者,也可以使用 元素代替

这是折叠的内容

内容是隐藏的

点击我
这是折叠的内容

运行结果

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

Accordion(手风琴)

注意:使用 data-bs-parent 属性确保当显示可折叠项目之一时,会关闭指定父项下的所有可折叠元素。

实例



	
		Bootstrap5 实例
		
		
		
		
	
	
		
这是折叠项 1 的内容
这是折叠项 2 的内容
这是折叠项 3 的内容

运行结果

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

导航

导航菜单

如果要创建简单的水平菜单,可以在

    元素上添加 .nav 类,在每个
  • 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类来创建一个简单的水平导航栏。

    实例

    
    
    	
    		Bootstrap5 实例
    		
    		
    		
    		
    	
    	
    		

    简单的水平导航

    运行结果

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

    导航对齐方式

    在 Bootstrap 5 中,.justify-content-center 类可以用于将导航项居中显示,.justify-content-end 类可以用于将导航项右对齐。

    实例

    
    
    	
    		Bootstrap5 实例
    		
    		
    		
    		
    	
    	
    		

    导航对齐方式

    左对齐导航 (默认):

    居中对齐导航:

    右对齐导航:

    运行结果

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

    垂直导航栏

    .flex-column 类可以用于创建垂直导航。通过将该类添加到

      元素上,可以使导航项在垂直方向上排列。

      实例

      
      
      	
      		Bootstrap5 实例
      		
      		
      		
      		
      	
      	
      		

      垂直导航栏

      运行结果

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

      动态选项卡

      1. 使用 .nav-tabs 类可以将导航转化为选项卡,并使用 .active 类来标记当前选中的选项。
      2. 如果要设置选项卡是动态可切换的,可以在每个链接上添加 data-bs-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类,对应选项卡的内容的 
         标签使用 .tab-content 类 。

      注意:如果希望有淡入效果可以在 .tab-pane 后添加 .fade类。

      实例

      
      
      	
      		Bootstrap5 实例
      		
      		
      		
      		
      	
      	
      		

      动态选项卡

      这是首页内容

      这是个人资料内容

      这是消息内容

      运行结果

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

      胶囊状动态选项卡

      只需将上面动态选项卡的实例的代码中 data-bs-toggle="tab"属性设置为 data-bs-toggle="pill"。

      实例

      
      
      	
      		Bootstrap5 实例
      		
      		
      		
      		
      	
      	
      		

      胶囊状动态选项卡

      这是首页内容

      这是个人资料内容

      这是消息内容

      运行结果

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

      等宽的选项卡/胶囊的下拉菜单

      要创建等宽的选项卡/胶囊的下拉菜单,可以使用.nav-justified类对齐标签/胶囊。

      实例

      
      
      	
      		Bootstrap5 实例
      		
      		
      		
      		
      	
      	
      		

      等宽的选项卡/胶囊的下拉菜单

      胶囊导航带下拉菜单


      选项卡下拉菜单

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

      导航栏

      基础的导航栏

      通过使用Bootstrap,可以创建一个可以根据屏幕大小扩展或折叠的导航栏。要创建标准导航栏,请使用.navbar类,然后使用.navbar-expand-xxl|xl|lg|md|sm(在特大、超大、大、中型设备上水平排列,或小屏幕上垂直堆叠导航栏)类来指定在不同设备上的排列方式。要添加链接,请使用带有.navbar-nav类的

        元素(或
        ),并添加带有.nav-item类的
      • 元素和带有.nav-link类的元素。

        实例

        
        
        	
        		Bootstrap5 实例
        		
        		
        		
        		
        	
        	
        		
        	
        

        运行结果

        垂直导航栏

        通过删除 .navbar-expand-xxl|xl|lg|md|sm 类来创建垂直导航栏。

        实例

        
        
        	
        		Bootstrap5 实例
        		
        		
        		
        		
        	
        	
        		

        垂直导航栏

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

        居中对齐的导航栏

        如果想要将导航栏的内容居中,可以使用 Bootstrap 的 .justify-content-center 类。这个类可以将 flexbox 容器中的项目在水平方向上居中。

        实例

        
        
        	
        		Bootstrap5 实例
        		
        		
        		
        		
        	
        	
        		

        居中的导航栏

        运行结果

        不同颜色导航栏

        使用任何 .bg-color 类来更改导航栏的背景颜色:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark和.bg-light。

        如果你选择暗色背景,记得给.navbar元素添加.navbar-dark类,并为文本设置浅色。同样地,如果你选择浅色背景,给.navbar元素添加.navbar-light类,并为文本设置深色。这样可以确保背景和文本颜色之间有足够的对比度。

        实例

        
        
        	
        		Bootstrap5 实例
        		
        		
        		
        		
        	
        	
        		
        	
        

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

        可以使用.navbar-brand类来设置显示品牌/Logo的导航栏。这个类会为品牌/Logo添加一些样式,以确保它在导航栏中适当地显示。你可以将品牌/Logo作为图片或文本。注意:在 Bootstrap 中,品牌标识通常放置在导航栏的左侧,并作为第一个子元素。

        实例

        
        
        	
        		Bootstrap5 实例
        		
        		
        		
        		
        	
        	
        		
        	
        

        运行结果

        导航栏文本

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