4.5、Bootstrap V4自学之路------组件---输入框

为什么80%的码农都做不了架构师?>>>   hot3.png

基本示例

核心类 .input-group-addon 。把一个附加内容或按钮放在输入框的任一侧。你可以把它们同时放在输入框的两侧。我们不支持在同一侧放多个附加内容,同样也不支持多个表单控件放在一个输入框组中



  @
  

     .00

Your vanity URL   https://example.com/users/   

  $      .00

之前文档里面遇到过 .input-group-addon类。还记得吗?

尺寸

.input-group上添加相关的表单尺寸类,它里面的内容会自动调整尺寸——不需要在每个元素上重复添加表单控件尺寸类


  @
  
  @   
             @   

没什么好说的,留一个疑问。的文本值,

是否会配合的aria-describedby一起传参到后台,成为一个完整的数据。

复选框和单选钮附加

请将复选框或单选钮选项放在一个输入框组的addon中,替换掉文本。



  
    
      
        
      
      
    
  
                                               
     

PS:这里注意的是,标签中没有写文字,而是插入一个

按钮附加

输入框组中的按钮有一点不同,它需要额外的嵌套级别。

你需要用.input-group-btn而不是.input-group-addon以包裹按钮。

这是必须的,因为默认浏览器样式无法重写它。



  
    
      
        Go!
      
      
    
  

  
    
      
      
        Go!
      
    
  

PS:如果使用按钮固定的话。则使用 .input-group-btn类实现。

如果继续使用 .input-group-addon类的话,样式不协调。

带弹出菜单的按钮

一个组合拳,一种现实方式。


  
      
    
      
        
          Action
        
        
          Action
          Another action
          Something else here
          
          Separated link
        
      
      
    
      
  
  
      
    
      
      
        
          Action
        
        
          Action
          Another action
          Something else here
          
          Separated link
        
      
    
      
  

分段按钮

另一种组合拳,也是一种方式。用在哪里好呢?


  
      
    
      
        Action
        
          Toggle Dropdown
        
        
          Action
          Another action
          Something else here
          
          Separated link
        
      
      
    
      
  
  
      
    
      
      
        Action
        
          Toggle Dropdown
        
        
          Action
          Another action
          Something else here
          
          Separated link
        
      
    
      
  

可访问性

如果你没有用label包裹每个input的话,屏幕阅读器在处理你的表单时将遇到麻烦。对于那些输入组,确保任何额外的label或者功能都能够向辅助技术传达。

使用精确的技术(使用.sr-only类隐藏元素,或者使用aria-labelaria-labelledbyaria-describedbytitleplaceholder 属性)。需要传达的额外的信息决取于你所使用的接口部件的精确类型。本章节的示例提供了一些建议、特殊场合的方法。


使用这些非常用的编程语言,在恰当的地方使用符合当下场景的语义。会使网站的具有内涵!这将是我要追求的!


转载于:https://my.oschina.net/asktao/blog/646370

你可能感兴趣的:(javascript,ViewUI)