📌  相关文章
📜  引导程序(第3部分)|按钮，字形图标，表格

📅  最后修改于: 2021-05-25 11:28:37             🧑  作者: Mango

  1. 简介与安装
  2. 网格系统
  3. 垂直形式，水平形式，内联形式
  4. 下拉菜单和响应式标签
  5. 进度栏和超大屏幕

在上一篇文章之后，应该熟悉Bootstrap的网格系统。现在，我们将学习制作Buttons，所有新的Glyphicons和Tables。让我们开始吧。

    漂亮的按钮：

    我们可以通过两种方式(或更具体地说，使用两个标签)在Bootstrap中制作Buttons。首先，使用标记，其次使用


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属性)

  • 带有标记的按钮
    例子： 
    


  Bootstrap Example
  
  
  
  
  


    
    
     
    GeeksforGeeks
    
    
    

    
  
    Button Styles
    
  
  
  
  
  
  
  

    

    
  

    
  
    Button with  and  
    
  
    Button with  tag 
        

    
  

    输出：

  • 华丽的雕文：

    Glyphicons是一个由精确准备的单色图标和符号组成的库，其重点是简化和易于定位。我们可以在span标签内使用Glyphicons，如下所示：

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

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

    例子： 

    


  Bootstrap Example
  
  
  
  
  


    
    
     
    GeeksforGeeks
    
       
    
    
    
    
        
    Correct
    
        
    Incorrect
    
        
    Glyphicon with buttons
    
        
             
        
        
             
        
        
             
        
        
             
        
    
    
    
    
    
    
        
        Like Button 
    
    

    输出：

  • 诱人的桌子：

    对于创建表，我们需要

    标记，在其中使用标记定义每一行，并使用标签，例如

    同样，您还可以通过在

    / 标记表示实际数据单元。在table标记中，我们可以添加归因于它们的不同类，这可以使我们的表看起来更好。一些表类将是带表条纹的，带表边界的，表悬停的，表压缩的等。您可以在此处找到所有表类。该表的基本结构为： 

    
   
    
      First Column
      Second Column
      Third Column

    您还可以使用

    标记中包括颜色类别，为每个单元格添加颜色。
    例子： 

    


  Bootstrap Example
  
  
  
  
  


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

    输出：

    在下一篇文章中，您将学到更多有关Bootstrap的知识。保持学习！

    Harshit Gupta的文章： 苛刻的
    总部位于加尔各答的Harshit Gupta是一位活跃的博客作者，对撰写有关时事，技术博客，故事和个人生活经历的浓厚兴趣。除了对写作充满热情，他还喜欢编码和跳舞。他目前在IIEST学习，是geeksforgeeks的活跃博客撰稿人。

    如果您还希望在此处展示您的博客，请参阅GBlog，以在GeeksforGeeks上撰写来宾博客。