📌  相关文章
📜  如何打开列表内的其他模式？

📅  最后修改于: 2021-05-25 16:22:20             🧑  作者: Mango

级联样式表是一种样式表语言，与HTML和JavaScript一起用于构建Web应用程序。 CSS框架提供了一个库，可以简化，标准化的Web设计。一个这样的CSS框架就是Bootstrap4。Bootstrap4是最常用的CSS框架，这是因为它的简单性和内置库提供了设计交互式用户界面所需的大量组件和实用程序。

列表和模式是Bootstrap 4中各种预定义的组件。模式是基于HTML，CSS和JavaScript的组合。模态位于在文档中触发它的父元素上，可以通过单击模态中存在的关闭选项将其删除。同样，单击模态背景会自动关闭模态。 Bootstrap 4一次仅支持一种模式。本文重点介绍打开列表内的其他模式。以下示例演示了如何从列表项中打开模式。

第一种方法：第一种方法处理包含完全不同内容的模态。在这种情况下，模态必须单独编码。 



  

    
    
    
    

  

  
    
    
    
        
  • 
            Item 1
        
    • 
        
  • 
            Item 2
        
    • 
        
  • 
            Item 3
        
    • 
    

    
    
  
    
  
    

  

输出

  • 单击“ item1”将显示以下输出

  • 单击“ item2”将显示以下输出

  • 单击“ item3”将显示以下输出

第二种方法：第二种方法处理内容几乎相似但差异很小的模态。编写了一个JavaScript函数，用于根据需要更改文本。调用列表项的show实例方法时，将立即触发show.bs.modal事件。 clicked元素可用作事件的relatedTarget属性。目标元素存储在“ li”变量中。接下来，目标元素的所有数据值都存储在收件人变量中。当前的模态事件存储在模态变量中。该模式变量调用find()方法来查找模式“ title”和模式“ body”，并将其替换为所需的文本。 



  

    
    
    
    

  

  
    
    
    
        
  • 
            Item 1
        
    • 
        
  • 
            Item 2
        
    • 
        
  • 
            Item 3
        
    • 
    

    
    
    

  

输出