📌  相关文章
📜  引导按钮、字形图标、表格

📅  最后修改于: 2022-05-13 01:56:43.398000             🧑  作者: Mango

引导按钮、字形图标、表格

  1. 介绍与安装
  2. 网格系统
  3. 垂直表单、水平表单、内联表单
  4. 下拉菜单和响应式标签
  5. 进度条和 Jumbotron

看完上一篇文章，大家应该对Bootstrap的Grid System比较熟悉了。现在，我们将学习制作按钮、全新的字形图标和表格。让我们开始吧。

    漂亮的按钮：

    我们可以通过两种方式（或者更具体地说，使用两个标签）在 Bootstrap 中制作按钮。首先，使用 标签，其次使用 


Button with'a'tag

我们可以使用 Bootstrap 获得不同颜色的按钮。每个都有一个特定的名称，如 btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger 和 btn-link。它们都代表按钮的特定颜色。

我们还可以制作不同大小的按钮（通过使用 btn-lg、btn-sm、btn-xs 和 btn-block 属性）

  • 带有标签的按钮
    例子：
    html
    


  Bootstrap Example
  
  
  
  
  


    
    
     
    GeeksforGeeks
    
    
    

    
  
    Button Styles
    
  
  
  
  
  
  
  

    

    
  

    
  
    Button with  and  
    
  
    Button with  tag 
        

    
  

    html
    


  Bootstrap Example
  
  
  
  
  


    
    
     
    GeeksforGeeks
    
       
    
    
    
    
        
    Correct
    
        
    Incorrect
    
        
    Glyphicon with buttons
    
        
             
        
        
             
        
        
             
        
        
             
        
    
    
    
    
    
    
        
        Like Button 
    
    

    html
    


  Bootstrap Example
  
  
  
  
  


    
    
     
    GeeksforGeeks
    
       
    
    
    
    
        
    Tables using Bootstrap
    
        
    
        
    
            
    
                
                   
                    
                    
                    
                   
                   
                    
                    
                    
                   
                   
                    
                    
                    
                   
                   
                    
                    
                    
                   
                
    First ColumnSecond ColumnThird Column
    PythonJavaSwift
    HTMLCSSJavaScript
    MySqlMongoDBSQL lit
    
            
    
       
    
   

    输出：
    引导按钮、字形图标、表格

  • 华丽的字形：

    Glyphicons 是一个精确准备的单色图标和符号库，其创建强调简单和易于定位。我们可以像这样在 span 标签中使用 Glyphicons：

    Glyphicons 也可以在这样的按钮中使用：

    可以在 http://getbootstrap.com/components 免费查看所有可用的字形图标。您可以复制他们的名字并粘贴到引号 class="Paste here" 中。如果您需要更具体的 glyphicon，您可以访问 http://glyphicons.com/ 并购买它们。

    例子：

    html 

    


  Bootstrap Example
  
  
  
  
  


    
    
     
    GeeksforGeeks
    
       
    
    
    
    
        
    Correct
    
        
    Incorrect
    
        
    Glyphicon with buttons
    
        
             
        
        
             
        
        
             
        
        
             
        
    
    
    
    
    
    
        
        Like Button 
    
    


    输出：
    引导按钮、字形图标、表格
  • 诱人的桌子：

    为了创建表格，我们需要

    标签，在其中我们使用 标签来定义每一行，并使用 标签，如

    同样，您还可以通过在

    / 标签来表示实际的数据单元格。在表格标签中，我们可以添加不同的类，这可以使我们的表格看起来更好。一些表格类将是表格条带化、表格边框、表格悬停、表格压缩等。您可以在此处找到所有表格类。表的基本结构是： 

    
   
    
      First Column
      Second Column
      Third Column

    您还可以使用表格中的颜色为表格的每一行添加不同的颜色

    标记中包含颜色类来为每个单元格添加颜色。
    例子：

    html 

    


  Bootstrap Example
  
  
  
  
  


    
    
     
    GeeksforGeeks
    
       
    
    
    
    
        
    Tables using Bootstrap
    
        
    
        
    
            
    
                
                   
                    
                    
                    
                   
                   
                    
                    
                    
                   
                   
                    
                    
                    
                   
                   
                    
                    
                    
                   
                
    First ColumnSecond ColumnThird Column
    PythonJavaSwift
    HTMLCSSJavaScript
    MySqlMongoDBSQL lit
    
            
    
       
    
   


    输出：
    引导按钮、字形图标、表格

    支持的浏览器：

    • 谷歌浏览器
    • 微软边缘
    • 火狐
    • 歌剧
    • 苹果浏览器

    您将在下一篇文章中了解更多有关 Bootstrap 的内容。保持学习！

    Harshit Gupta 的文章： 严酷
    加尔各答的 Harshit Gupta 是一位活跃的博主，对撰写有关时事、技术博客、故事和个人生活经历的文章有着浓厚的兴趣。除了热爱写作，他还热爱编程和跳舞。目前在 IIEST 学习，他是 geeksforgeeks 的活跃博客撰稿人。

    如果您还想在这里展示您的博客，请参阅 GeeksforGeeks 上的客座博客文章。