📌  相关文章
📜  Bootstrap（第 3 部分）|按钮、字形、表格

📅  最后修改于: 2021-10-19 05:43:05             🧑  作者: Mango

  1. 介绍与安装
  2. 网格系统
  3. 垂直表格、水平表格、内联表格
  4. 下拉菜单和响应式选项卡
  5. 进度条和大屏幕

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

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 
    
    
    • 输出：

    • 诱人的桌子：

    为了创建表格，我们需要

    标签，我们在其中使用 标签来定义每一行和 标签如
    同样，您也可以通过在
    / 标签来表示实际的数据单元格。在 table 标签中，我们可以添加归属于它们的不同类，这可以使我们的表格看起来更好。一些表格类将是表格条纹、表格边框、表格悬停、表格压缩等。您可以在此处找到所有表格类。表的基本结构是： 

    
   
    
      First Column
      Second Column
      Third Column
    • 您还可以使用
    标签中包含颜色类别来为每个单元格添加颜色。
    例子：

    html 

    


  Bootstrap Example
  
  
  
  
  


    
    
     
    GeeksforGeeks
    
       
    
    
    
    
        
    Tables using Bootstrap
    
        
    
        
    
            
    
                
                   
                    
                    
                    
                   
                   
                    
                    
                    
                   
                   
                    
                    
                    
                   
                   
                    
                    
                    
                   
                
    First ColumnSecond ColumnThird Column
    PythonJavaSwift
    HTMLCSSJavaScript
    MySqlMongoDBSQL lit
    
            
    
       
    
   
    • 输出：

    支持的浏览器：

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